Jak dlouho typicky trvá projekt?

Záleží na rozsahu, ale většina projektů zabere 4-8 týdnů od startu po spuštění. Během úvodní konzultace vám dám detailní harmonogram, aby vás nic nepřekvapilo.

Kolik projekt stojí?

Každý projekt je unikátní, takže poskytuji individuální cenové nabídky na základě vašich konkrétních potřeb. Vždy jsem otevřený ohledně nákladů a rád s vámi najdu řešení, které se vejde do vašeho rozpočtu bez kompromisů na kvalitě.

Spolupracujete i s klienty ze zahraničí?

Samozřejmě! Spolupracuji s klienty po celém světě. Moderní nástroje dělají vzdálenou spolupráci bezproblémovou — budete mít pocit, že sedíme ve stejné místnosti.

Co když budu potřebovat změny po dokončení projektu?

Nabízím průběžnou údržbu a podporu. Drobné úpravy jsou často součástí původního rozsahu projektu a u větších aktualizací společně probereme nejlepší postup.

Můžete pracovat s mými stávajícími brand guidelines?

Samozřejmě. Skvěle pracuji v rámci zavedených brandových systémů a zároveň přináším svěží nápady a kreativní řešení.

Jaké technologie používáte?

Primárně pracuji s Next.js, React, TypeScript a Tailwind CSS pro vývoj webu, spolu s Figma pro design. Ale vybírám správné nástroje pro každý projekt — technologie by měla sloužit cíli, ne naopak.

🎨

UI Knihovna

Kolekce nádherných, znovupoužitelných React komponent a CSS fragmentů vytvořená pomocí Tailwind CSS a Framer Motion.

Notifikace (Toasts)

Nenásilné oznamovací zprávy, které se krátce zobrazí.

Notifikace o úspěchu

Toast.tsxLanguage: tsx

import { motion, AnimatePresence } from 'framer-motion';

export function SuccessToast({ visible }) {
  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          initial={{ opacity: 0, y: 50, scale: 0.9 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, scale: 0.9, transition: { duration: 0.2 } }}
          className="fixed bottom-4 right-4 bg-surface border border-green-500/30 shadow-2xl shadow-green-500/10 rounded-2xl p-4 flex items-center gap-4 z-50 min-w-[300px]"
        >
          <div className="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center text-green-500">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} className="w-5 h-5">
              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
            </svg>
          </div>
          <div>
            <h4 className="font-semibold text-foreground">Successfully saved!</h4>
            <p className="text-sm text-muted">Your changes have been deployed.</p>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

Chybová notifikace

Toast.tsxLanguage: tsx

export function ErrorToast({ visible }) {
  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          initial={{ opacity: 0, x: 50 }}
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: 50 }}
          className="bg-surface border border-red-500/30 shadow-2xl shadow-red-500/10 rounded-2xl p-4 flex items-center gap-4 z-50 min-w-[300px]"
        >
          <div className="w-10 h-10 rounded-full bg-red-500/20 flex items-center justify-center text-red-500">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} className="w-5 h-5">
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </div>
          <div>
            <h4 className="font-semibold text-foreground">Connection failed</h4>
            <p className="text-sm text-muted">Please check your network setup.</p>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}