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.

Pozadí

Advanced interactive backgrounds and patterns.

Animated Faded Grid

Modern Grid

Perfect for hero sections

AnimatedGrid.tsxLanguage: tsx

export function AnimatedGridBackground() {
  return (
    <div className="relative w-full h-[400px] bg-black overflow-hidden flex items-center justify-center">
      {/* Dynamic Grid */}
      <div 
        className="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"
      />
      {/* Glowing Orb */}
      <div className="absolute top-0 w-full h-full bg-accent/20 blur-[100px] rounded-full scale-150 transform -translate-y-1/2 opacity-50" />
      
      <div className="relative z-10 text-center">
        <h2 className="text-4xl font-bold text-white tracking-tight mb-2">Modern Grid</h2>
        <p className="text-gray-400">Perfect for hero sections</p>
      </div>
    </div>
  );
}

Subtle Dot Pattern

Subtle Pattern

Clean & Professional

DotPattern.tsxLanguage: tsx

export function DotPatternBackground() {
  return (
    <div className="relative w-full h-[300px] bg-surface overflow-hidden flex flex-col items-center justify-center border border-border rounded-xl">
      <div className="absolute h-full w-full bg-[radial-gradient(var(--color-border)_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)] opacity-50" />
      
      <div className="relative z-10 space-y-4 text-center">
         <span className="px-3 py-1 rounded-full border border-border bg-surface/80 text-xs font-semibold backdrop-blur-sm shadow-sm inline-block">
            Subtle Pattern
         </span>
         <h3 className="text-2xl font-semibold text-foreground">Clean & Professional</h3>
      </div>
    </div>
  );
}

Aurora Glow

Beautiful soft gradients for premium interfaces.

AuroraBackground.tsxLanguage: tsx

export function AuroraBackground() {
  return (
    <div className="relative w-full h-[350px] overflow-hidden flex items-center justify-center rounded-2xl bg-black">
      <div className="absolute -top-[50%] -left-[10%] w-[50%] h-[100%] rounded-[100%] bg-blue-500/30 blur-[80px] mix-blend-screen" />
      <div className="absolute -bottom-[20%] -right-[10%] w-[60%] h-[120%] rounded-[100%] bg-purple-500/30 blur-[80px] mix-blend-screen" />
      <div className="absolute top-[20%] left-[20%] w-[30%] h-[30%] rounded-[100%] bg-accent/40 blur-[80px] mix-blend-screen" />
      
      <div className="relative z-10 backdrop-blur-md bg-white/5 border border-white/10 p-8 rounded-2xl shadow-2xl">
        <h2 className="text-3xl font-bold text-white">Aurora Glow</h2>
        <p className="text-white/70 mt-2 max-w-xs">Beautiful soft gradients for premium interfaces.</p>
      </div>
    </div>
  );
}