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.

Modální okna a Dialogy

Zaměřená vyskakovací okna vyžadující pozornost uživatele nebo interakci.

Výchozí okno

Modal.tsxLanguage: tsx

import { useState } from 'react';

export function DefaultModal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)} className="px-5 py-2.5 rounded-xl bg-accent text-background font-semibold">
        Open Default Modal
      </button>

      {isOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/80 backdrop-blur-sm">
          <div className="bg-popover border border-border rounded-2xl p-8 max-w-md w-full shadow-2xl relative">
            <h3 className="text-2xl font-bold mb-3">Action Required</h3>
            <p className="text-muted leading-relaxed mb-8">
              Are you sure you want to perform this action? This cannot be undone and will permanently delete your data.
            </p>
            <div className="flex justify-end gap-3 rounded-b-2xl">
              <button onClick={() => setIsOpen(false)} className="px-4 py-2 rounded-xl text-foreground font-medium hover:bg-black/5 transition-colors">
                Cancel
              </button>
              <button onClick={() => setIsOpen(false)} className="px-4 py-2 rounded-xl bg-red-500 text-white font-medium hover:bg-red-600 transition-colors shadow-lg shadow-red-500/20">
                Confirm Delete
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

Animovaný dialog

Modal.tsxLanguage: tsx

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

export function AnimatedModal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)} className="px-5 py-2.5 rounded-xl bg-popover border border-border text-foreground font-semibold hover:border-accent transition-colors">
        Open Animated Modal
      </button>

      <AnimatePresence>
        {isOpen && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setIsOpen(false)}
              className="absolute inset-0 bg-background/80 backdrop-blur-md"
            />
            <motion.div
              initial={{ scale: 0.95, opacity: 0, y: 20 }}
              animate={{ scale: 1, opacity: 1, y: 0 }}
              exit={{ scale: 0.95, opacity: 0, y: 20 }}
              transition={{ type: "spring", duration: 0.5, bounce: 0.3 }}
              className="bg-popover border border-border rounded-2xl p-8 max-w-sm w-full shadow-2xl relative z-10"
            >
              <div className="w-16 h-16 rounded-full bg-accent/20 flex items-center justify-center mb-6 text-3xl">
                ✨
              </div>
              <h3 className="text-2xl font-bold mb-3">Premium Feature</h3>
              <p className="text-muted leading-relaxed mb-8">
                Unlock exclusive tools and animations to supercharge your workflow today!
              </p>
              <button onClick={() => setIsOpen(false)} className="w-full py-3 rounded-xl bg-accent text-background font-bold transition-transform active:scale-95">
                Upgrade Now
              </button>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </>
  );
}