Update src/app/page.tsx

Merge version_2 into main

src/app/about/page.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import Link from "next/link";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroOverlay from "@/components/sections/hero/HeroOverlay";
 import SplitAbout from "@/components/sections/about/SplitAbout";
 import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
 import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Target, Users, Zap, Star } from "lucide-react";
+import { Award, Users, Zap, Target, Lightbulb, CheckCircle, HandshakeIcon, Star, Heart, Rocket } from "lucide-react";
 
 export default function AboutPage() {
   return (
@@ -28,93 +28,93 @@ export default function AboutPage() {
           brandName="Webuild"
           navItems={[
             { name: "Projekty", id: "projects" },
-            { name: "O nás", id: "about" },
+            { name: "O nás", id: "/about" },
             { name: "Klientská zóna", id: "clientzone" },
-            { name: "Kontakt", id: "contact" },
+            { name: "Kontakt", id: "/contact" },
           ]}
           button={{
-            text: "Začít projekt",
-            href: "contact",
+            text: "Začít projekt",            href: "/contact"
           }}
         />
       </div>
 
-      <div id="about-main" data-section="about-main">
-        <SplitAbout
-          title="Naše Mise a Vize"
-          description="V Webuild věříme, že technologie by měla být nástrojem pro pozitivní změnu. Naší misí je pomáhat firmám transformovat jejich digitální přítomnost a dosáhnout jejich obchodních cílů prostřednictvím inovativních řešení, kvalitního kódu a trvalého partnerství."
-          tag="Kdo jsme"
-          tagIcon={Target}
-          imagePosition="left"
-          textboxLayout="default"
-          useInvertedBackground={false}
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="O nás"
+          description="Jsme tým passionátních vývojářů, designérů a strategů, kteří věří v sílu technologie. Našim cílem je vytvářet digitální řešení, která skutečně dělají rozdíl."
+          tag="Webuild - Tým"
+          tagIcon={Heart}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/development-team-collaborating-in-modern-1773150026682-bc1074b8.png?_wi=2"
-          imageAlt="Webuild tým"
-          mediaAnimation="slide-up"
-          bulletPoints={[
+          imageAlt="Webuild team collaboration"
+          showBlur={true}
+          showDimOverlay={true}
+          buttons={[
             {
-              title: "Pasionovaný Tým",
-              description: "Skládáme se z vývojářů, designérů a strategů, kteří milují to, co dělají",
-              icon: Users,
-            },
-            {
-              title: "Inovace Prvním",
-              description: "Neustále se učíme a přijímáme nové technologie a metodologie",
-              icon: Zap,
-            },
-            {
-              title: "Vaše Úspěch je Náš Úspěch",
-              description: "Jsme zde pro váš dlouhodobý růst a podporu",
-              icon: Target,
+              text: "Pojďme spolupracovat",              href: "/contact"
             },
           ]}
         />
       </div>
 
-      <div id="process-about" data-section="process-about">
+      <div id="about" data-section="about">
+        <SplitAbout
+          title="Naš příběh"
+          description="Webuild byl založen s vizí vytvářet digitální řešení, která jsou inovativní, funkční a inspirují. Věříme, že dobrý design a kvalitní kód mohou transformovat podnikání. Od svého založení jsme pomohli desítkám společností dosáhnout jejich cílů."
+          tag="Naše Mise"
+          tagIcon={Rocket}
+          imagePosition="right"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/high-quality-web-application-interface-s-1773150027398-6f473b47.png?_wi=2"
+          imageAlt="Company vision and values"
+          mediaAnimation="slide-up"
+          bulletPoints={[
+            {
+              title: "Inovace",              description: "Nás inspiruje technologie a její potenciál zlepšit svět",              icon: Lightbulb,
+            },
+            {
+              title: "Kvalita",              description: "Každý projekt je vytvořen s důrazem na dokonalost a detaily",              icon: Award,
+            },
+            {
+              title: "Spolupráce",              description: "Věříme v sílu týmové práce a dlouhodobých partnerství",              icon: HandshakeIcon,
+            },
+          ]}
+        />
+      </div>
+
+      <div id="process" data-section="process">
         <FeatureCardNineteen
-          title="Naše Hodnoty a Principy"
-          description="Vedeme se těmito klíčovými principy v každém projektu"
-          tag="Jak pracujeme"
+          title="Naše hodnoty"
+          description="Principy, které nás řídí v každém projektu"
+          tag="Co nás Definuje"
           tagIcon={Zap}
           textboxLayout="default"
           useInvertedBackground={true}
           features={[
             {
               id: 1,
-              tag: "Kvalita",
-              title: "Nikdy se nezkracujeme",
-              subtitle: "Obsah a funkčnost jsou naší prioritou",
-              description: "Každý řádek kódu je psán s maximální péčí. Testujeme důkladně a optimalizujeme výkon. Kvalita není předvolbou – je to základ.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/software-development-and-coding-phase-de-1773150029543-51bf9788.png?_wi=3",
-              imageAlt: "Quality focus",
+              tag: "Hodnota 1",              title: "Transparentnost",              subtitle: "Otevřená komunikace na každém kroku",              description: "Věříme na jasnou a průběžnou komunikaci se našimi klienty. Jste vždy informováni o stavu projektu a našich rozhodnutích.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/project-discovery-and-planning-phase-vis-1773150026837-172cea3d.png?_wi=2",              imageAlt: "Transparent communication"
             },
             {
               id: 2,
-              tag: "Transparentnost",
-              title: "Otevřená Komunikace",
-              subtitle: "Budujeme na základě důvěry",
-              description: "Pravidelně vás informujeme o pokroku projektu. Jsme vždy dostupní pro otázky a diskuzi. Bez skrytých nákladů nebo překvapení.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/project-discovery-and-planning-phase-vis-1773150026837-172cea3d.png?_wi=3",
-              imageAlt: "Communication",
+              tag: "Hodnota 2",              title: "Excelence",              subtitle: "Maximální úsilí v každém detailu",              description: "Nepřijímáme nic menšího než skvělé. Naš tým je dedikován tomu, aby překročil vaše očekávání ve všem, co dělá.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/ui-ux-design-and-prototyping-phase-desig-1773150026434-808fbc2f.png?_wi=2",              imageAlt: "Excellence in design"
             },
             {
               id: 3,
-              tag: "Inovace",
-              title: "Zůstáváme Vpředu",
-              subtitle: "Nejnovější technologie a best practices",
-              description: "Vývojáři v našem týmu jsou neustále připraveni učit se a zlepšovat. Sledujeme trendy a zavádíme technologie, které vám dávají konkurenční výhodu.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/ui-ux-design-and-prototyping-phase-desig-1773150026434-808fbc2f.png?_wi=3",
-              imageAlt: "Innovation",
+              tag: "Hodnota 3",              title: "Inovace",              subtitle: "Neustálé učení a vývoj",              description: "Technologie se neustále mění. Zůstáváme na čele průmyslu prostřednictvím vzdělávání a experimentování s novými nástroji.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/software-development-and-coding-phase-de-1773150029543-51bf9788.png?_wi=2",              imageAlt: "Innovation and learning"
+            },
+            {
+              id: 4,
+              tag: "Hodnota 4",              title: "Empatie",              subtitle: "Pochopit vaše potřeby a cíle",              description: "Vaš úspěch je náš úspěch. Pracujeme s empatií a porozuměním, aby jsme vytvořili řešení, která skutečně fungují.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/quality-assurance-and-testing-phase-qa-e-1773150027299-048c5178.png?_wi=2",              imageAlt: "Empathy and understanding"
             },
           ]}
         />
       </div>
 
-      <div id="testimonials-about" data-section="testimonials-about">
+      <div id="testimonials" data-section="testimonials">
         <TestimonialCardTwo
-          title="Ověřené Zkušenosti Našich Klientů"
-          description="Slyšte přímo od těch, kteří si nás zvolili"
+          title="Co si o nás myslí naši klienti"
+          description="Ověřené recenze od společností, které s námi zažily transformaci"
           tag="Recenze"
           tagIcon={Star}
           textboxLayout="default"
@@ -122,28 +122,16 @@ export default function AboutPage() {
           animationType="slide-up"
           testimonials={[
             {
-              id: "1",
-              name: "Jana Procházková",
-              role: "CEO, TechFlow",
-              testimonial: "Webuild dodal naší společnosti moderní webovou aplikaci, která se stala klíčovou pro naš růst. Jejich profesionální přístup a péče o detaily byly výjimečné.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/professional-headshot-of-a-business-exec-1773150025715-3e0df040.png?_wi=2",
-              imageAlt: "Jana Procházková",
+              id: "1",              name: "Jana Procházková",              role: "CEO",              testimonial: "Webuild dodal naší společnosti moderní webovou aplikaci, která se stala klíčovou pro naš růst. Jejich profesionální přístup a péče o detaily byly výjimečné.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/professional-headshot-of-a-business-exec-1773150025715-3e0df040.png?_wi=2",              imageAlt: "Jana Procházková"
             },
             {
-              id: "2",
-              name: "Petr Novotný",
-              role: "Founder, StartupX",
-              testimonial: "Od prvního dne jsme věděli, že máme správný tým. Komunikace byla bezproblémová a výsledek přesáhl naše očekávání.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/professional-headshot-of-a-business-owne-1773150027498-780139b6.png?_wi=2",
-              imageAlt: "Petr Novotný",
+              id: "2",              name: "Petr Novotný",              role: "Founder",              testimonial: "Od prvního dne jsme věděli, že máme správný tým. Komunikace byla bezproblémová a výsledek přesáhl naše očekávání.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/professional-headshot-of-a-business-owne-1773150027498-780139b6.png?_wi=2",              imageAlt: "Petr Novotný"
             },
             {
-              id: "3",
-              name: "Michaela Dvořáková",
-              role: "Project Manager, Digital Solutions",
-              testimonial: "Spolupráce s Webuild byla naprosto profesionální. Dodali jsme projekt včas a v rozpočtu. Doporučuji je bez výhrad.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/professional-headshot-of-a-project-manag-1773150025598-b53e3266.png?_wi=2",
-              imageAlt: "Michaela Dvořáková",
+              id: "3",              name: "Michaela Dvořáková",              role: "Project Manager",              testimonial: "Spolupráce s Webuild byla naprosto profesionální. Dodali jsme projekt včas a v rozpočtu. Doporučuji je bez výhrad.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/professional-headshot-of-a-project-manag-1773150025598-b53e3266.png?_wi=2",              imageAlt: "Michaela Dvořáková"
+            },
+            {
+              id: "4",              name: "Martin Svoboda",              role: "Marketing Director",              testimonial: "Nejsme jen získali web, ale nábor s komplexním řešením pro marketing. Tým je inovativní a vždy připraven diskutovat o nejlepších řešeních.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/professional-headshot-of-a-creative-dire-1773150032151-6082319a.png?_wi=2",              imageAlt: "Martin Svoboda"
             },
           ]}
         />
@@ -153,27 +141,24 @@ export default function AboutPage() {
         <FooterBaseReveal
           columns={[
             {
-              title: "Produkty",
-              items: [
+              title: "Produkty",              items: [
                 { label: "Web Development", href: "#projects" },
                 { label: "Mobile Apps", href: "#projects" },
                 { label: "SaaS Solutions", href: "#projects" },
               ],
             },
             {
-              title: "Společnost",
-              items: [
+              title: "Společnost",              items: [
                 { label: "O nás", href: "/about" },
                 { label: "Blog", href: "#" },
                 { label: "Kariéra", href: "#" },
               ],
             },
             {
-              title: "Právní",
-              items: [
+              title: "Právní",              items: [
                 { label: "Ochrana osobních údajů", href: "#" },
                 { label: "Podmínky používání", href: "#" },
-                { label: "Kontakt", href: "contact" },
+                { label: "Kontakt", href: "/contact" },
               ],
             },
           ]}

src/app/client-zone/page.tsx

@@ -0,0 +1,274 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroOverlay from "@/components/sections/hero/HeroOverlay";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { LogOut, User, FileText, Settings, Download, ArrowRight, Mail } from "lucide-react";
+
+export default function ClientZonePage() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (email && password) {
+      setIsLoggedIn(true);
+    }
+  };
+
+  const handleLogout = () => {
+    setIsLoggedIn(false);
+    setEmail("");
+    setPassword("");
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="floatingGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Webuild"
+          navItems={[
+            { name: "Projekty", id: "/" },
+            { name: "O nás", id: "/" },
+            { name: "Klientská zóna", id: "/client-zone" },
+            { name: "Kontakt", id: "/" },
+          ]}
+          button={{
+            text: isLoggedIn ? "Odhlásit se" : "Přihlásit se",            onClick: isLoggedIn ? handleLogout : undefined,
+            href: isLoggedIn ? undefined : "/client-zone"
+          }}
+        />
+      </div>
+
+      {!isLoggedIn ? (
+        <>
+          {/* Login Hero Section */}
+          <div id="hero" data-section="hero" className="min-h-screen flex items-center justify-center py-20 px-4">
+            <div className="w-full max-w-md">
+              <div className="bg-card rounded-lg border border-accent/10 p-8 shadow-lg backdrop-blur-sm">
+                {/* Header */}
+                <div className="mb-8 text-center">
+                  <div className="flex items-center justify-center gap-2 mb-4">
+                    <User className="w-8 h-8 text-primary-cta" />
+                  </div>
+                  <h1 className="text-3xl font-bold text-foreground mb-2">Klientská zóna</h1>
+                  <p className="text-foreground/70">Přihlaste se k přístupu na vaše projekty</p>
+                </div>
+
+                {/* Login Form */}
+                <form onSubmit={handleLogin} className="space-y-4 mb-6">
+                  {/* Email Input */}
+                  <div>
+                    <label className="block text-sm font-medium text-foreground mb-2">
+                      Email
+                    </label>
+                    <input
+                      type="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      placeholder="vase.email@priklad.cz"
+                      className="w-full px-4 py-3 rounded-lg border border-accent/20 bg-secondary-cta text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta transition"
+                      required
+                    />
+                  </div>
+
+                  {/* Password Input */}
+                  <div>
+                    <label className="block text-sm font-medium text-foreground mb-2">
+                      Heslo
+                    </label>
+                    <div className="relative">
+                      <input
+                        type={showPassword ? "text" : "password"}
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        placeholder="Vaše heslo"
+                        className="w-full px-4 py-3 rounded-lg border border-accent/20 bg-secondary-cta text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta transition"
+                        required
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setShowPassword(!showPassword)}
+                        className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground/50 hover:text-foreground transition"
+                      >
+                        {showPassword ? "Skrýt" : "Zobrazit"}
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Submit Button */}
+                  <button
+                    type="submit"
+                    className="w-full bg-primary-cta text-background font-semibold py-3 rounded-lg hover:opacity-90 transition flex items-center justify-center gap-2 mt-6"
+                  >
+                    Přihlásit se
+                    <ArrowRight className="w-4 h-4" />
+                  </button>
+                </form>
+
+                {/* Footer */}
+                <div className="border-t border-accent/10 pt-6 text-center text-sm text-foreground/60">
+                  <p>Nemáte přístup? <a href="mailto:info@webuild.cz" className="text-primary-cta hover:underline">Kontaktujte nás</a></p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          {/* Dashboard Section */}
+          <div id="dashboard" data-section="dashboard" className="min-h-screen py-20 px-4">
+            <div className="max-w-6xl mx-auto">
+              {/* Welcome Header */}
+              <div className="mb-12">
+                <div className="flex items-center justify-between mb-2">
+                  <h1 className="text-4xl font-bold text-foreground">Vítejte zpět!</h1>
+                  <button
+                    onClick={handleLogout}
+                    className="flex items-center gap-2 px-4 py-2 text-foreground/70 hover:text-foreground transition"
+                  >
+                    <LogOut className="w-4 h-4" />
+                    Odhlásit se
+                  </button>
+                </div>
+                <p className="text-foreground/60">Přehled vašich projektů a dokumentů</p>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {/* Project Cards */}
+                {[
+                  {
+                    id: "1",                    title: "E-Commerce Platforma",                    status: "V provozu",                    date: "Spuštěno: 15. března 2024",                    icon: FileText,
+                  },
+                  {
+                    id: "2",                    title: "Mobilní Aplikace",                    status: "V provozu",                    date: "Spuštěno: 22. dubna 2024",                    icon: FileText,
+                  },
+                  {
+                    id: "3",                    title: "SaaS Řešení",                    status: "Vývoj",                    date: "Zahájeno: 1. ledna 2025",                    icon: FileText,
+                  },
+                ].map((project) => (
+                  <div
+                    key={project.id}
+                    className="bg-card border border-accent/10 rounded-lg p-6 hover:border-accent/30 transition group cursor-pointer"
+                  >
+                    <div className="flex items-start justify-between mb-4">
+                      <project.icon className="w-8 h-8 text-primary-cta" />
+                      <span
+                        className={`text-xs font-semibold px-3 py-1 rounded-full ${
+                          project.status === "V provozu"
+                            ? "bg-green-500/20 text-green-600"
+                            : "bg-yellow-500/20 text-yellow-600"
+                        }`}
+                      >
+                        {project.status}
+                      </span>
+                    </div>
+                    <h3 className="text-lg font-semibold text-foreground mb-2 group-hover:text-primary-cta transition">
+                      {project.title}
+                    </h3>
+                    <p className="text-sm text-foreground/60 mb-4">{project.date}</p>
+                    <button className="flex items-center gap-2 text-primary-cta hover:gap-3 transition text-sm font-medium">
+                      Zobrazit detaily
+                      <ArrowRight className="w-4 h-4" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+
+              {/* Quick Links Section */}
+              <div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="bg-card border border-accent/10 rounded-lg p-8">
+                  <div className="flex items-center gap-3 mb-4">
+                    <Download className="w-6 h-6 text-primary-cta" />
+                    <h2 className="text-xl font-semibold text-foreground">Ke stažení</h2>
+                  </div>
+                  <p className="text-foreground/60 mb-4">Projekte a dokumenty k dispozici pro stažení</p>
+                  <button className="flex items-center gap-2 text-primary-cta hover:gap-3 transition font-medium">
+                    Zobrazit soubory
+                    <ArrowRight className="w-4 h-4" />
+                  </button>
+                </div>
+
+                <div className="bg-card border border-accent/10 rounded-lg p-8">
+                  <div className="flex items-center gap-3 mb-4">
+                    <Settings className="w-6 h-6 text-primary-cta" />
+                    <h2 className="text-xl font-semibold text-foreground">Nastavení účtu</h2>
+                  </div>
+                  <p className="text-foreground/60 mb-4">Spravujte svůj profil a preferenze</p>
+                  <button className="flex items-center gap-2 text-primary-cta hover:gap-3 transition font-medium">
+                    Přejít na nastavení
+                    <ArrowRight className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Contact CTA Section */}
+      <div id="contact" data-section="contact">
+        <ContactSplit
+          tag="Podpora"
+          tagIcon={Mail}
+          title="Máte otázky?"
+          description="Náš tým je vždy připraven vám pomoci. Kontaktujte nás s jakýmikoliv dotazy ohledně vašich projektů."
+          background={{ variant: "sparkles-gradient" }}
+          useInvertedBackground={true}
+          mediaPosition="right"
+          mediaAnimation="slide-up"
+          inputPlaceholder="Vaše email..."
+          buttonText="Poslat zprávu"
+          termsText="Odpovíme obvykle do 24 hodin."
+          onSubmit={(email) => console.log("Support request from:", email)}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Produkty",              items: [
+                { label: "Web Development", href: "#projects" },
+                { label: "Mobile Apps", href: "#projects" },
+                { label: "SaaS Solutions", href: "#projects" },
+              ],
+            },
+            {
+              title: "Společnost",              items: [
+                { label: "O nás", href: "/about" },
+                { label: "Blog", href: "#" },
+                { label: "Kariéra", href: "#" },
+              ],
+            },
+            {
+              title: "Právní",              items: [
+                { label: "Ochrana osobních údajů", href: "#" },
+                { label: "Podmínky používání", href: "#" },
+                { label: "Kontakt", href: "contact" },
+              ],
+            },
+          ]}
+          copyrightText="© 2024 Webuild. Všechna práva vyhrazena."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -1,13 +1,11 @@
 "use client";
 
-import Link from "next/link";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroOverlay from "@/components/sections/hero/HeroOverlay";
 import ContactSplit from "@/components/sections/contact/ContactSplit";
-import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
-import SplitAbout from "@/components/sections/about/SplitAbout";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Mail, Phone, MapPin, MessageCircle, Clock, Zap } from "lucide-react";
+import { Mail, Phone, MapPin } from "lucide-react";
 
 export default function ContactPage() {
   return (
@@ -28,81 +26,51 @@ export default function ContactPage() {
           brandName="Webuild"
           navItems={[
             { name: "Projekty", id: "projects" },
-            { name: "O nás", id: "about" },
+            { name: "O nás", id: "/about" },
             { name: "Klientská zóna", id: "clientzone" },
-            { name: "Kontakt", id: "contact" },
+            { name: "Kontakt", id: "/contact" },
           ]}
           button={{
-            text: "Začít projekt",            href: "contact"
+            text: "Začít projekt",            href: "/contact"
           }}
         />
       </div>
 
-      <div id="contact-form" data-section="contact-form">
-        <ContactSplit
-          tag="Kontakt"
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Pojďme spolu vytvořit něco úžasného"
+          description="Máte projekt, který by mohl změnit váš byznys? Kontaktujte nás a pojďme diskutovat o tom, jak vám můžeme pomoct."
+          tag="Kontaktujte Nás"
           tagIcon={Mail}
-          title="Máte zajímavý projekt?"
-          description="Pojďme spolu vytvořit něco úžasného. Napište nám a my se vám ozveme v nejkratší možné chvíli. Rádi si vyslechneme vaši myšlenku."
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/modern-tech-development-studio-workspace-1773150028423-42a4a38c.png?_wi=2"
+          imageAlt="Contact us"
+          showBlur={true}
+          showDimOverlay={true}
+          buttons={[
+            {
+              text: "Naplánovat konzultaci",              href: "#contact-form"
+            },
+          ]}
+        />
+      </div>
+
+      <div id="contact-form" data-section="contact">
+        <ContactSplit
+          tag="Formulář"
+          tagIcon={Mail}
+          title="Zajímá vás spolupráce?"
+          description="Vyplňte formulář níže a my se vám ozveme do 24 hodin s návrhem řešení na míru vaším potřebám. Vaše vize je naší inspirací."
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={true}
           mediaPosition="right"
           mediaAnimation="slide-up"
           inputPlaceholder="Vaše email..."
-          buttonText="Začít diskuzi"
-          termsText="Respektujeme vaši soukromí. Neposíláme spam. Vypište se kdykoli."
-          onSubmit={(email) => console.log("Email submission:", email)}
-        />
-      </div>
-
-      <div id="contact-info" data-section="contact-info">
-        <SplitAbout
-          title="Jak se s námi můžete Spojit"
-          description="Vyberte si nejlepší způsob, jak se s námi spojit. Jsme online a připraveni odpovědět na vaše otázky a poskytnout konzultaci."
-          tag="Dostupnost"
-          tagIcon={Phone}
-          imagePosition="right"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/development-team-collaborating-in-modern-1773150026682-bc1074b8.png?_wi=2"
-          imageAlt="Webuild kontakt"
-          mediaAnimation="slide-up"
-          bulletPoints={[
-            {
-              title: "Email",              description: "info@webuild.cz - Ozveme se do 24 hodin",              icon: Mail,
-            },
-            {
-              title: "Telefon",              description: "+420 123 456 789 - Pracovní dny 9:00 - 17:00",              icon: Phone,
-            },
-            {
-              title: "Sídlo",              description: "Praha 1, Česká Republika",              icon: MapPin,
-            },
-          ]}
-        />
-      </div>
-
-      <div id="faq-contact" data-section="faq-contact">
-        <FeatureCardNineteen
-          title="FAQ - Často Kladené Otázky"
-          description="Odpovědi na nejčastější otázky týkající se spolupráce s námi"
-          tag="Informace"
-          tagIcon={MessageCircle}
-          textboxLayout="default"
-          useInvertedBackground={true}
-          features={[
-            {
-              id: 1,
-              tag: "Cena",              title: "Kolik stojí vývoj projektu?",              subtitle: "Cena závisí na vaších potřebách",              description: "Každý projekt je unikátní. Cena se liší v závislosti na rozsahu, složitosti, technologiích a časové lhůtě. Poskytneme vám přesný odhad po konzultaci. Můžeme pracovat na základě pevné ceny, time-and-materials nebo retainer modelů.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/project-discovery-and-planning-phase-vis-1773150026837-172cea3d.png?_wi=2",              imageAlt: "Pricing"
-            },
-            {
-              id: 2,
-              tag: "Čas",              title: "Jak dlouho trvá vývoj?",              subtitle: "Závisí na specifikaci projektu",              description: "Jednoduchý web může trvat 4-8 týdnů, zatímco komplexní SaaS aplikace může trvat 3-6 měsíců nebo více. Během prvotní konzultace si stanoveníme realistický časový plán a milníky projektu.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/ui-ux-design-and-prototyping-phase-desig-1773150026434-808fbc2f.png?_wi=2",              imageAlt: "Timeline"
-            },
-            {
-              id: 3,
-              tag: "Podpora",              title: "Poskytujete podporu po spuštění?",              subtitle: "Ano, zůstáváme s vámi",              description: "Po spuštění projektu nabízíme různé balíčky podpory a údržby. Od záchytné chyby po měsíční optimalizace. Jsme vždy připraveni vám pomoci a zlepšovat váš systém.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/quality-assurance-and-testing-phase-qa-e-1773150027299-048c5178.png?_wi=2",              imageAlt: "Support"
-            },
-          ]}
+          buttonText="Poslat zprávu"
+          termsText="Respektujeme vaši soukromí. Vaše email budeme používat pouze k odpovědi na vaši zprávu."
+          onSubmit={(email) => {
+            console.log("Contact form submission:", email);
+            // Here you can add your form submission logic
+          }}
         />
       </div>
 
@@ -127,7 +95,7 @@ export default function ContactPage() {
               title: "Právní",              items: [
                 { label: "Ochrana osobních údajů", href: "#" },
                 { label: "Podmínky používání", href: "#" },
-                { label: "Kontakt", href: "contact" },
+                { label: "Kontakt", href: "/contact" },
               ],
             },
           ]}

src/app/page.tsx

@@ -32,7 +32,7 @@ export default function HomePage() {
           navItems={[
             { name: "Projekty", id: "projects" },
             { name: "O nás", id: "about" },
-            { name: "Klientská zóna", id: "clientzone" },
+            { name: "Klientská zóna", id: "/client-zone" },
             { name: "Kontakt", id: "contact" },
           ]}
           button={{
@@ -47,7 +47,7 @@ export default function HomePage() {
           description="Spolupracujeme na tvorbě webů, mobilních aplikací a projektů, které vaši firmu posunují vpřed. Maximální kvalita, inovace a péče o detail v každém projektu."
           tag="Vývoj s Vášní"
           tagIcon={Sparkles}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/modern-tech-development-studio-workspace-1773150028423-42a4a38c.png"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/modern-tech-development-studio-workspace-1773150028423-42a4a38c.png?_wi=1"
           imageAlt="Modern development studio workspace"
           showBlur={true}
           showDimOverlay={true}
@@ -87,7 +87,8 @@ export default function HomePage() {
           ]}
           buttons={[
             {
-              text: "Více o nás",              href: "/about"},
+              text: "Více o nás",              href: "/about"
+            },
           ]}
         />
       </div>
@@ -104,7 +105,7 @@ export default function HomePage() {
           gridVariant="three-columns-all-equal-width"
           products={[
             {
-              id: "1",              name: "E-Commerce Platforma",              price: "2024",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/high-quality-web-application-interface-s-1773150027398-6f473b47.png",              imageAlt: "E-commerce website platform"
+              id: "1",              name: "E-Commerce Platforma",              price: "2024",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/high-quality-web-application-interface-s-1773150027398-6f473b47.png?_wi=1",              imageAlt: "E-commerce website platform"
             },
             {
               id: "2",              name: "Mobilní Aplikace",              price: "2024",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/mobile-application-interface-showcase-mo-1773150027254-925ab6f6.png",              imageAlt: "Mobile application interface"
@@ -135,7 +136,7 @@ export default function HomePage() {
             },
             {
               id: 3,
-              tag: "Fáze 3",              title: "Vývoj & Implementace",              subtitle: "Profesionální kódování a architektura",              description: "Tým vývojářů pracuje na implementaci s použitím nejlepších praktik, čistého kódu a moderních technologií.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/software-development-and-coding-phase-de-1773150029543-51bf9788.png",              imageAlt: "Software development and coding"
+              tag: "Fáze 3",              title: "Vývoj & Implementace",              subtitle: "Profesionální kódování a architektura",              description: "Tým vývojářů pracuje na implementaci s použitím nejlepších praktik, čistého kódu a moderních technologií.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/software-development-and-coding-phase-de-1773150029543-51bf9788.png?_wi=1",              imageAlt: "Software development and coding"
             },
             {
               id: 4,
@@ -156,16 +157,16 @@ export default function HomePage() {
           animationType="slide-up"
           testimonials={[
             {
-              id: "1",              name: "Jana Procházková",              role: "CEO",              testimonial: "Webuild dodal naší společnosti moderní webovou aplikaci, která se stala klíčovou pro naš růst. Jejich profesionální přístup a péče o detaily byly výjimečné.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/professional-headshot-of-a-business-exec-1773150025715-3e0df040.png",              imageAlt: "Jana Procházková"
+              id: "1",              name: "Jana Procházková",              role: "CEO",              testimonial: "Webuild dodal naší společnosti moderní webovou aplikaci, která se stala klíčovou pro naš růst. Jejich profesionální přístup a péče o detaily byly výjimečné.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/professional-headshot-of-a-business-exec-1773150025715-3e0df040.png?_wi=1",              imageAlt: "Jana Procházková"
             },
             {
-              id: "2",              name: "Petr Novotný",              role: "Founder",              testimonial: "Od prvního dne jsme věděli, že máme správný tým. Komunikace byla bezproblémová a výsledek přesáhl naše očekávání.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/professional-headshot-of-a-business-owne-1773150027498-780139b6.png",              imageAlt: "Petr Novotný"
+              id: "2",              name: "Petr Novotný",              role: "Founder",              testimonial: "Od prvního dne jsme věděli, že máme správný tým. Komunikace byla bezproblémová a výsledek přesáhl naše očekávání.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/professional-headshot-of-a-business-owne-1773150027498-780139b6.png?_wi=1",              imageAlt: "Petr Novotný"
             },
             {
-              id: "3",              name: "Michaela Dvořáková",              role: "Project Manager",              testimonial: "Spolupráce s Webuild byla naprosto profesionální. Dodali jsme projekt včas a v rozpočtu. Doporučuji je bez výhrad.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/professional-headshot-of-a-project-manag-1773150025598-b53e3266.png",              imageAlt: "Michaela Dvořáková"
+              id: "3",              name: "Michaela Dvořáková",              role: "Project Manager",              testimonial: "Spolupráce s Webuild byla naprosto profesionální. Dodali jsme projekt včas a v rozpočtu. Doporučuji je bez výhrad.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/professional-headshot-of-a-project-manag-1773150025598-b53e3266.png?_wi=1",              imageAlt: "Michaela Dvořáková"
             },
             {
-              id: "4",              name: "Martin Svoboda",              role: "Marketing Director",              testimonial: "Nejsme jen získali web, ale nábor s komplexním řešením pro marketing. Tým je inovativní a vždy připraven diskutovat o nejlepších řešeních.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/professional-headshot-of-a-creative-dire-1773150032151-6082319a.png",              imageAlt: "Martin Svoboda"
+              id: "4",              name: "Martin Svoboda",              role: "Marketing Director",              testimonial: "Nejsme jen získali web, ale nábor s komplexním řešením pro marketing. Tým je inovativní a vždy připraven diskutovat o nejlepších řešeních.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AktXk5vl9xYcHjxhZM3X0XrHrX/professional-headshot-of-a-creative-dire-1773150032151-6082319a.png?_wi=1",              imageAlt: "Martin Svoboda"
             },
           ]}
         />

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #ffffff;
-  --card: #f8faf9;
+  --card: #f9f9f9;
   --foreground: #0a1a1a;
-  --primary-cta: #1a5d5a;
+  --primary-cta: #1a7d6b;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #ff8c3a;
+  --secondary-cta: #ff8c42;
   --secondary-cta-text: #ffffff;
-  --accent: #ff8c3a;
-  --background-accent: #1a5d5a;
+  --accent: #ff8c42;
+  --background-accent: #1a7d6b;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);