Update src/app/styles/base.css

Update src/app/layout.tsx
Merge version_16 into main
2026-03-05 16:07:39 +00:00 · 2026-03-05 16:07:38 +00:00 · 2026-03-05 15:51:08 +00:00 · 2026-03-05 15:51:04 +00:00 · 2026-03-05 15:51:04 +00:00 · 2026-03-05 15:46:58 +00:00
4 changed files with 451 additions and 82 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,11 +1,18 @@
 import type { Metadata } from "next";
+import { DM_Sans } from "next/font/google";
 import { Inter } from "next/font/google";
 import "./globals.css";

-const inter = Inter({ subsets: ["latin"] });
+const dmSans = DM_Sans({
+  variable: "--font-dm-sans",  subsets: ["latin"],
+});
+
+const inter = Inter({
+  variable: "--font-inter",  subsets: ["latin"],
+});

 export const metadata: Metadata = {
-  title: "WOLNY STUDIO AI - Systemy, Aplikacje, Automatyzacje",  description: "Tworzymy aplikacje webowe, platformy AI i automatyzacje, które eliminują chaos, oszczędzają czas i zwiększają zysk."
+  title: "WOLNY STUDIO AI",  description: "Budujemy systemy, które zarabiają dla Twojej firmy."
 };

 export default function RootLayout({
@@ -15,7 +22,7 @@ export default function RootLayout({
 }) {
  return (
    <html lang="pl">
-      <body className={inter.className}>{children}
+      <body className={`${dmSans.variable} ${inter.variable}`}>{children}
        <script
          dangerouslySetInnerHTML={{
            __html: `
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,11 +7,10 @@ import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCa
 import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import { Award, BarChart3, Brain, CheckCircle2, Code2, Github, Handshake, Lightbulb, Linkedin, Mail, Palette, Rocket, Shield, Star, Target, TrendingUp, Workflow, Wrench, Zap } from "lucide-react";
+import { Award, BarChart3, Brain, CheckCircle2, Code2, Github, Handshake, Lightbulb, Linkedin, Mail, MapPin, Phone, Search, Target, TrendingUp, Workflow, Wrench, Zap, ShieldCheck, Users, Sparkles, TrendingDown, RotateCw, Activity } from "lucide-react";

 export default function LandingPage() {
  return (
@@ -35,10 +34,11 @@ export default function LandingPage() {
            { name: "Realizacje", id: "cases" },
            { name: "Proces", id: "process" },
            { name: "O nas", id: "about" },
-            { name: "Kontakt", id: "contact" }
+            { name: "Kontakt", id: "contact" },
+            { name: "Rozpocznij projekt", id: "/rozpocznij-projekt" }
          ]}
-          bottomLeftText="Warszawa, Polska"
-          bottomRightText="hello@walnystudio.ai"
+          bottomLeftText="Rajcza, Polska"
+          bottomRightText="wsa.labs.wolny@gmail.com"
        />
      </div>

@@ -51,7 +51,7 @@ export default function LandingPage() {
          tagAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          buttons={[
-            { text: "Rozpocznij projekt", href: "contact" },
+            { text: "Rozpocznij projekt", href: "/rozpocznij-projekt" },
            { text: "Zobacz realizacje", href: "cases" }
          ]}
          buttonAnimation="slide-up"
@@ -104,20 +104,20 @@ export default function LandingPage() {
          title="Co Robimy"
          description="Trzy filarowe usługi, które transformują biznes i skalują zyski poprzez nowoczesną technologię"
          tag="Nasze Usługi"
-          tagIcon={Rocket}
+          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              icon: Code2,
-              title: "Systemy i Aplikacje Webowe",              description: "Dedykowane platformy, CRM, systemy zarządzania, panele klienta. Rozwiązania stworzone pod Twoją firmę.",              button: { text: "Automatyzacja 24/7", href: "contact" }
+              title: "Systemy i Aplikacje Webowe",              description: "Dedykowane platformy, CRM, systemy zarządzania, panele klienta. Rozwiązania stworzone pod Twoją firmę.",              button: { text: "Oszczędź 20h/tydzień", href: "/rozpocznij-projekt" }
            },
            {
              icon: Brain,
-              title: "Automatyzacje i AI",              description: "Boty AI, automatyczna obsługa klienta, scoring CV, workflow, integracje API. Procesy które pracują 24/7.",              button: { text: "Zwiększ Efekt", href: "contact" }
+              title: "Automatyzacje i AI",              description: "Boty AI, automatyczna obsługa klienta, scoring CV, workflow, integracje API. Procesy które pracują 24/7.",              button: { text: "Zwiększ Przychód o 40%", href: "/rozpocznij-projekt" }
            },
            {
              icon: TrendingUp,
-              title: "Digitalizacja Biznesu",              description: "Zamieniamy Excel i papier na nowoczesne systemy online. Porządek operacyjny, lepsze decyzje.",              button: { text: "Redukcja Kosztów", href: "contact" }
+              title: "Digitalizacja Biznesu",              description: "Zamieniamy Excel i papier na nowoczesne systemy online. Porządek operacyjny, lepsze decyzje.",              button: { text: "Zmniejsz Koszty o 35%", href: "/rozpocznij-projekt" }
            }
          ]}
          animationType="slide-up"
@@ -128,29 +128,142 @@ export default function LandingPage() {
      </div>

      <div id="cases" data-section="cases">
-        <ProductCardThree
-          title="Nasze Realizacje"
-          description="Rzeczywiste projekty z rzeczywistymi rezultatami. Każdy projekt = konkretne problemy rozwiązane, wymierny ROI."
-          tag="Case Studies"
-          tagIcon={Award}
-          tagAnimation="slide-up"
-          products={[
-            {
-              id: "1",              name: "Platforma Rekrutacyjna AI",              price: "Redukcja czasu selekcji CV o 70%",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/professional-mockup-of-a-recruitment-pla-1772646443733-1f2246bd.png?_wi=3",              imageAlt: "Platform rekrutacyjny z AI"
-            },
-            {
-              id: "2",              name: "System Zarządzania Warsztatem",              price: "90% mniej czasu na kosztorysy",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/workshop-management-system-interface-dis-1772646442811-e87de6cc.png?_wi=3",              imageAlt: "System zarządzania warsztatem"
-            },
-            {
-              id: "3",              name: "CRM dla Agencji Marketingowej",              price: "Centralizacja 100% procesów",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/marketing-agency-crm-dashboard-with-cont-1772646443395-5375cae3.png?_wi=2",              imageAlt: "CRM dla agencji"
-            }
-          ]}
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          ariaLabel="Sekcja realizacji"
-        />
+        <div className="py-20 px-4 sm:px-6 md:px-8">
+          <div className="space-y-16">
+            <div className="flex flex-col items-center text-center">
+              <div className="mb-4 inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-cta/10">
+                <span className="text-sm font-medium text-primary-cta">Case Studies</span>
+              </div>
+              <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">Nasze Realizacje</h2>
+              <p className="text-lg md:text-xl text-foreground/70 max-w-2xl">Rzeczywiste projekty z rzeczywistymi rezultatami. Każdy projekt = konkretne problemy rozwiązane, wymierny ROI.</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
+              {/* Case Study 1: Recruitment Platform */}
+              <div className="bg-card rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
+                <div className="relative overflow-hidden bg-gradient-to-br from-blue-900 to-slate-900 aspect-video">
+                  <img
+                    src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/professional-mockup-of-a-recruitment-pla-1772646443733-1f2246bd.png?_wi=1"
+                    alt="Platforma Rekrutacyjna AI"
+                    className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
+                  />
+                </div>
+                <div className="p-6 md:p-8 space-y-4">
+                  <h3 className="text-2xl md:text-3xl font-bold text-foreground">Platforma Rekrutacyjna AI</h3>
+                  <div className="space-y-3">
+                    <div>
+                      <h4 className="font-semibold text-primary-cta mb-2">Problem</h4>
+                      <p className="text-foreground/70">Nasz klient spędzał 40+ godzin tygodniowo na manualnym przeszukiwaniu i ocenianiu CV. Proces był chaotyczny, a najlepsi kandydaci ginęli w przepełnionych skrzynkach e-mail.</p>
+                    </div>
+                    <div>
+                      <h4 className="font-semibold text-primary-cta mb-2">Rozwiązanie</h4>
+                      <p className="text-foreground/70">Stworzyliśmy inteligentny system AI z real-time dashboardem. Platforma automatycznie scoring'uje kandydatów, wysyła notyfikacje do zespołu i integruje się z systemem HR.</p>
+                    </div>
+                    <div>
+                      <h4 className="font-semibold text-primary-cta mb-2">Rezultat</h4>
+                      <div className="flex flex-col gap-2">
+                        <div className="flex items-center gap-2">
+                          <TrendingDown className="w-5 h-5 text-green-500" />
+                          <span className="text-foreground font-semibold">70% redukcja czasu selekcji CV</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Activity className="w-5 h-5 text-green-500" />
+                          <span className="text-foreground font-semibold">200% wzrost jakości najmu</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <RotateCw className="w-5 h-5 text-green-500" />
+                          <span className="text-foreground font-semibold">24/7 automatyczne procesowanie</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Case Study 2: Workshop Management */}
+              <div className="bg-card rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
+                <div className="relative overflow-hidden bg-gradient-to-br from-orange-900 to-red-900 aspect-video">
+                  <img
+                    src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/workshop-management-system-interface-dis-1772646442811-e87de6cc.png?_wi=1"
+                    alt="System Zarządzania Warsztatem"
+                    className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
+                  />
+                </div>
+                <div className="p-6 md:p-8 space-y-4">
+                  <h3 className="text-2xl md:text-3xl font-bold text-foreground">System Zarządzania Warsztatem</h3>
+                  <div className="space-y-3">
+                    <div>
+                      <h4 className="font-semibold text-primary-cta mb-2">Problem</h4>
+                      <p className="text-foreground/70">Warsztat samochodowy zarządzał harmonogramem napraw za pomocą karteczek i SMS-ów. Brak widoczności kosztów, opóźnienia, niezadowoleni klienci.</p>
+                    </div>
+                    <div>
+                      <h4 className="font-semibold text-primary-cta mb-2">Rozwiązanie</h4>
+                      <p className="text-foreground/70">Wdrożyliśmy system zarządzania z real-time dashboardem, automaty kosztorysu, trackingiem napraw i integracją z SMS/email do klientów.</p>
+                    </div>
+                    <div>
+                      <h4 className="font-semibold text-primary-cta mb-2">Rezultat</h4>
+                      <div className="flex flex-col gap-2">
+                        <div className="flex items-center gap-2">
+                          <TrendingDown className="w-5 h-5 text-green-500" />
+                          <span className="text-foreground font-semibold">90% mniej czasu na kosztorysy</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Activity className="w-5 h-5 text-green-500" />
+                          <span className="text-foreground font-semibold">35% wzrost przepustowości</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <RotateCw className="w-5 h-5 text-green-500" />
+                          <span className="text-foreground font-semibold">+40% zadowolenie klientów</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Case Study 3: Marketing Agency CRM */}
+              <div className="bg-card rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
+                <div className="relative overflow-hidden bg-gradient-to-br from-purple-900 to-indigo-900 aspect-video">
+                  <img
+                    src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/marketing-agency-crm-dashboard-with-cont-1772646443395-5375cae3.png?_wi=1"
+                    alt="CRM dla Agencji Marketingowej"
+                    className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
+                  />
+                </div>
+                <div className="p-6 md:p-8 space-y-4">
+                  <h3 className="text-2xl md:text-3xl font-bold text-foreground">CRM dla Agencji Marketingowej</h3>
+                  <div className="space-y-3">
+                    <div>
+                      <h4 className="font-semibold text-primary-cta mb-2">Problem</h4>
+                      <p className="text-foreground/70">Agencja marketingowa prowadziła kampanie klientów w pięciu różnych narzędziach. Brak centralnego widoku, duplikaty danych, strata informacji.</p>
+                    </div>
+                    <div>
+                      <h4 className="font-semibold text-primary-cta mb-2">Rozwiązanie</h4>
+                      <p className="text-foreground/70">Zbudowaliśmy dedykowany CRM z centralizacją wszystkich procesów, automatyzacją kampanii, raportowaniem i integracją z narzędziami martech.</p>
+                    </div>
+                    <div>
+                      <h4 className="font-semibold text-primary-cta mb-2">Rezultat</h4>
+                      <div className="flex flex-col gap-2">
+                        <div className="flex items-center gap-2">
+                          <TrendingDown className="w-5 h-5 text-green-500" />
+                          <span className="text-foreground font-semibold">Centralizacja 100% procesów</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Activity className="w-5 h-5 text-green-500" />
+                          <span className="text-foreground font-semibold">50% wzrost produktywności zespołu</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <RotateCw className="w-5 h-5 text-green-500" />
+                          <span className="text-foreground font-semibold">+25% retencja klientów</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
      </div>

      <div id="why-us" data-section="why-us">
@@ -158,7 +271,7 @@ export default function LandingPage() {
          title="Dlaczego My"
          description="Technologia to narzędzie. Liczy się efekt. Nasze podejście oparte na rezultatach biznesowych."
          tag="Przewaga Konkurencyjna"
-          tagIcon={Shield}
+          tagIcon={Sparkles}
          tagAnimation="slide-up"
          metrics={[
            {
@@ -197,7 +310,7 @@ export default function LandingPage() {
              title: "01 - Analiza i Strategia",              description: "Pogłębiamy się w Twoim biznesie. Problemy, wyzwania, cele. Budujemy strategię opartą na danych.",              button: { text: "Dowiedz się więcej", href: "#" }
            },
            {
-              icon: Palette,
+              icon: Search,
              title: "02 - Projekt UX/UI",              description: "Projektujemy doświadczenie użytkownika i interfejs. Funkcjonalne, piękne, intuicyjne rozwiązania.",              button: { text: "Dowiedz się więcej", href: "#" }
            },
            {
@@ -217,50 +330,27 @@ export default function LandingPage() {
      </div>

      <div id="social-proof" data-section="social-proof">
-        <TestimonialCardOne
-          title="Co Mówią Nasi Klienci"
-          description="96% satysfakcji, 100% zaangażowania. Ich sukces to nasz sukces. Sprawdź, jak zmieniliśmy ich biznes."
-          tag="Opinie Klientów"
-          tagIcon={Star}
-          tagAnimation="slide-up"
-          testimonials={[
-            {
-              id: "1",              name: "Marcin Kowalski",              role: "Właściciel",              company: "TechRecruit Polska",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/professional-headshot-of-a-confident-bus-1772646442150-2e1e63e4.png",              imageAlt: "Marcin Kowalski"
-            },
-            {
-              id: "2",              name: "Anna Nowak",              role: "Dyrektor",              company: "Auto Service Solutions",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/professional-portrait-of-a-company-direc-1772646442028-775cdaab.png",              imageAlt: "Anna Nowak"
-            },
-            {
-              id: "3",              name: "Piotr Lewandowski",              role: "CEO",              company: "Digital Marketing Pro",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/professional-headshot-of-an-agency-owner-1772646443428-1c53d6f7.png",              imageAlt: "Piotr Lewandowski"
-            },
-            {
-              id: "4",              name: "Katarzyna Zając",              role: "HR Manager",              company: "Staffing Excellence",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/professional-portrait-of-a-recruiter-or--1772646443961-89d3d657.png",              imageAlt: "Katarzyna Zając"
-            },
-            {
-              id: "5",              name: "Tomasz Kruk",              role: "Founder",              company: "Cloud Innovations",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/professional-headshot-of-a-tech-savvy-bu-1772646441921-ee1f86c4.png",              imageAlt: "Tomasz Kruk"
-            },
-            {
-              id: "6",              name: "Magdalena Szymczak",              role: "Director",              company: "Enterprise Systems",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/professional-business-portrait-of-a-conf-1772646442053-3a2aecf3.png",              imageAlt: "Magdalena Szymczak"
-            }
-          ]}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          ariaLabel="Sekcja opinii klientów"
-        />
+        <div className="space-y-12 py-20 px-4 sm:px-6 md:px-8">
+          <div className="flex flex-col items-center text-center">
+            <div className="mb-4 inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-cta/10">
+              <span className="text-sm font-medium text-primary-cta">Opinie Google</span>
+            </div>
+            <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">Zadowoleni Klienci</h2>
+            <p className="text-lg md:text-xl text-foreground/70 max-w-2xl">Odkryj, co mówią o nas nasi klienci na Google</p>
+          </div>
+
+          <div className="flex justify-center pt-8">
+            <a href="https://google.com" target="_blank" rel="noopener noreferrer" className="px-8 py-3 bg-primary-cta text-primary-cta-text rounded-lg font-semibold hover:opacity-90 transition-opacity">
+              Przejdź do Opinii na Google
+            </a>
+          </div>
+        </div>
      </div>

      <div id="partners" data-section="partners">
        <SocialProofOne
          title="Zaufanie Biznesowe"
-          description="Pracujemy z najlepszymi firmami z Polski i Europy. Partnerami bez kompromisów w jakości."
+          description="Pracujemy z najlepszymi firmami z Polski i Europy. Partnerami bez kompromisów w jakości. Wszystkie opinie są zweryfikowane i pochodzą od rzeczywistych klientów."
          tag="Nasi Partnerzy"
          tagIcon={Handshake}
          tagAnimation="slide-up"
@@ -278,8 +368,8 @@ export default function LandingPage() {
          text="Masz pomysł? Zbudujmy system, który zacznie na Ciebie pracować."
          animationType="entrance-slide"
          buttons={[
-            { text: "Rozpocznij Projekt", href: "#" },
-            { text: "Rozmowa Strategiczna", href: "#" }
+            { text: "Rozpocznij Projekt", href: "/rozpocznij-projekt" },
+            { text: "Rozmowa Strategiczna", href: "/rozpocznij-projekt" }
          ]}
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
@@ -294,7 +384,7 @@ export default function LandingPage() {
          socialLinks={[
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
-            { icon: Mail, href: "mailto:hello@walnystudio.ai", ariaLabel: "Email" }
+            { icon: Mail, href: "mailto:wsa.labs.wolny@gmail.com", ariaLabel: "Email" }
          ]}
          ariaLabel="Stopka strony"
        />
--- a/src/app/rozpocznij-projekt/page.tsx
+++ b/src/app/rozpocznij-projekt/page.tsx
@@ -0,0 +1,272 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import { Mail, CheckCircle2, Clock, User2, Zap } from "lucide-react";
+import { useState } from "react";
+
+export default function RozpocznijProjektPage() {
+  const [formData, setFormData] = useState({
+    name: "",    email: "",    projectType: "",    budget: "",    timeline: "",    description: ""
+  });
+
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    try {
+      const mailtoLink = `mailto:wsa.labs.wolny@gmail.com?subject=Nowe%20zapytanie%20projektowe&body=${encodeURIComponent(
+        `Imię: ${formData.name}\nEmail: ${formData.email}\nTyp projektu: ${formData.projectType}\nBudżet: ${formData.budget}\nOś czasu: ${formData.timeline}\nOpis projektu:\n${formData.description}`
+      )}`;
+      
+      window.location.href = mailtoLink;
+      setSubmitted(true);
+      
+      setTimeout(() => {
+        setFormData({
+          name: "",          email: "",          projectType: "",          budget: "",          timeline: "",          description: ""
+        });
+        setSubmitted(false);
+      }, 3000);
+    } catch (error) {
+      console.error("Error submitting form:", error);
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumSmall"
+      sizing="large"
+      background="circleGradient"
+      cardStyle="outline"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          brandName="WOLNY STUDIO AI"
+          navItems={[
+            { name: "Usługi", id: "services" },
+            { name: "Realizacje", id: "cases" },
+            { name: "Proces", id: "process" },
+            { name: "O nas", id: "about" },
+            { name: "Kontakt", id: "contact" },
+            { name: "Rozpocznij projekt", id: "/rozpocznij-projekt" }
+          ]}
+          bottomLeftText="Rajcza, Polska"
+          bottomRightText="wsa.labs.wolny@gmail.com"
+        />
+      </div>
+
+      <div className="min-h-screen bg-background py-20 px-4 sm:px-6 md:px-8">
+        <div className="max-w-4xl mx-auto">
+          {/* Header */}
+          <div className="text-center mb-16">
+            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-foreground mb-4">
+              Opowiedz nam o swoim projekcie
+            </h1>
+            <p className="text-lg md:text-xl text-foreground/70 max-w-2xl mx-auto">
+              Wypełnij formularz poniżej, aby otrzymać wycenę i szczegółową konsultację dotyczącą Twojego projektu.
+            </p>
+          </div>
+
+          {/* Form Section */}
+          <div className="bg-card rounded-lg p-8 md:p-12 mb-16 border border-accent/20">
+            {submitted ? (
+              <div className="flex flex-col items-center justify-center py-12">
+                <CheckCircle2 className="w-16 h-16 text-primary-cta mb-6" />
+                <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-2">
+                  Dziękujemy za wiadomość!
+                </h2>
+                <p className="text-lg text-foreground/70 text-center max-w-md">
+                  Odpowiemy w ciągu 24 godzin na adres email: <span className="font-semibold text-primary-cta">{formData.email}</span>
+                </p>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-6">
+                {/* Name and Email Row */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label htmlFor="name" className="block text-foreground font-semibold mb-2">
+                      Imię i nazwisko *
+                    </label>
+                    <input
+                      type="text"
+                      id="name"
+                      name="name"
+                      value={formData.name}
+                      onChange={handleInputChange}
+                      required
+                      placeholder="Jan Kowalski"
+                      className="w-full px-4 py-3 bg-background border border-accent rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta focus:ring-1 focus:ring-primary-cta"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="email" className="block text-foreground font-semibold mb-2">
+                      Email *
+                    </label>
+                    <input
+                      type="email"
+                      id="email"
+                      name="email"
+                      value={formData.email}
+                      onChange={handleInputChange}
+                      required
+                      placeholder="jan@example.com"
+                      className="w-full px-4 py-3 bg-background border border-accent rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta focus:ring-1 focus:ring-primary-cta"
+                    />
+                  </div>
+                </div>
+
+                {/* Project Type */}
+                <div>
+                  <label htmlFor="projectType" className="block text-foreground font-semibold mb-2">
+                    Typ projektu *
+                  </label>
+                  <select
+                    id="projectType"
+                    name="projectType"
+                    value={formData.projectType}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full px-4 py-3 bg-background border border-accent rounded-lg text-foreground focus:outline-none focus:border-primary-cta focus:ring-1 focus:ring-primary-cta"
+                  >
+                    <option value="">Wybierz typ projektu</option>
+                    <option value="Strona internetowa">Strona internetowa</option>
+                    <option value="System webowy">System webowy</option>
+                    <option value="Automatyzacja">Automatyzacja</option>
+                    <option value="AI dla biznesu">AI dla biznesu</option>
+                    <option value="Nie wiem jeszcze">Nie wiem jeszcze</option>
+                  </select>
+                </div>
+
+                {/* Budget */}
+                <div>
+                  <label htmlFor="budget" className="block text-foreground font-semibold mb-2">
+                    Przybliżony budżet *
+                  </label>
+                  <select
+                    id="budget"
+                    name="budget"
+                    value={formData.budget}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full px-4 py-3 bg-background border border-accent rounded-lg text-foreground focus:outline-none focus:border-primary-cta focus:ring-1 focus:ring-primary-cta"
+                  >
+                    <option value="">Wybierz zakres budżetu</option>
+                    <option value="Poniżej 5000 PLN">Poniżej 5000 PLN</option>
+                    <option value="5000 - 10000 PLN">5000 - 10000 PLN</option>
+                    <option value="10000 - 25000 PLN">10000 - 25000 PLN</option>
+                    <option value="25000 - 50000 PLN">25000 - 50000 PLN</option>
+                    <option value="Powyżej 50000 PLN">Powyżej 50000 PLN</option>
+                  </select>
+                </div>
+
+                {/* Timeline */}
+                <div>
+                  <label htmlFor="timeline" className="block text-foreground font-semibold mb-2">
+                    Ośrodek czasu *
+                  </label>
+                  <select
+                    id="timeline"
+                    name="timeline"
+                    value={formData.timeline}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full px-4 py-3 bg-background border border-accent rounded-lg text-foreground focus:outline-none focus:border-primary-cta focus:ring-1 focus:ring-primary-cta"
+                  >
+                    <option value="">Wybierz ośrodek czasu</option>
+                    <option value="Tak szybko jak to możliwe">Tak szybko jak to możliwe</option>
+                    <option value="W ciągu miesiąca">W ciągu miesiąca</option>
+                    <option value="W ciągu 2-3 miesięcy">W ciągu 2-3 miesięcy</option>
+                    <option value="Elastycznie">Elastycznie</option>
+                  </select>
+                </div>
+
+                {/* Description */}
+                <div>
+                  <label htmlFor="description" className="block text-foreground font-semibold mb-2">
+                    Opis projektu *
+                  </label>
+                  <textarea
+                    id="description"
+                    name="description"
+                    value={formData.description}
+                    onChange={handleInputChange}
+                    required
+                    placeholder="Opisz szczegółowo, co chcesz osiągnąć. Jakie są główne problemy? Jakie funkcjonalności są potrzebne?"
+                    rows={8}
+                    className="w-full px-4 py-3 bg-background border border-accent rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta focus:ring-1 focus:ring-primary-cta resize-none"
+                  />
+                </div>
+
+                {/* Submit Button */}
+                <button
+                  type="submit"
+                  className="w-full px-8 py-4 bg-primary-cta text-primary-cta-text rounded-lg font-semibold text-lg hover:opacity-90 transition-opacity"
+                >
+                  Wyślij zapytanie
+                </button>
+              </form>
+            )}
+          </div>
+
+          {/* Info Section */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {/* 24h Response */}
+            <div className="bg-card rounded-lg p-8 border border-accent/20 text-center">
+              <Clock className="w-12 h-12 text-primary-cta mx-auto mb-4" />
+              <h3 className="text-xl font-bold text-foreground mb-2">Odpowiedź w 24h</h3>
+              <p className="text-foreground/70">
+                Gwarantujemy odpowiedź na Twoje zapytanie w ciągu 24 godzin roboczych
+              </p>
+            </div>
+
+            {/* Free Consultation */}
+            <div className="bg-card rounded-lg p-8 border border-accent/20 text-center">
+              <User2 className="w-12 h-12 text-primary-cta mx-auto mb-4" />
+              <h3 className="text-xl font-bold text-foreground mb-2">Bezpłatna Konsultacja</h3>
+              <p className="text-foreground/70">
+                Pierwsza konsultacja strategiczna jest całkowicie bezpłatna i bez zobowiązań
+              </p>
+            </div>
+
+            {/* Individual Approach */}
+            <div className="bg-card rounded-lg p-8 border border-accent/20 text-center">
+              <Zap className="w-12 h-12 text-primary-cta mx-auto mb-4" />
+              <h3 className="text-xl font-bold text-foreground mb-2">Indywidualne Podejście</h3>
+              <p className="text-foreground/70">
+                Każdy projekt jest unikalny. Dostosowujemy się do Twoich konkretnych potrzeb
+              </p>
+            </div>
+          </div>
+
+          {/* Contact Email */}
+          <div className="mt-16 text-center">
+            <p className="text-foreground/70 mb-2">Lub skontaktuj się bezpośrednio:</p>
+            <a
+              href="mailto:wsa.labs.wolny@gmail.com"
+              className="inline-flex items-center gap-2 text-primary-cta font-semibold text-lg hover:opacity-80 transition-opacity"
+            >
+              <Mail className="w-5 h-5" />
+              wsa.labs.wolny@gmail.com
+            </a>
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-dm-sans), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-dm-sans), sans-serif;
 }
Author	SHA1	Message	Date
bender	c9543c7c85	Update src/app/styles/base.css	2026-03-05 16:07:39 +00:00
bender	477f440f3d	Update src/app/layout.tsx	2026-03-05 16:07:38 +00:00
bender	ee8ac92a36	Merge version_16 into main Merge version_16 into main	2026-03-05 15:51:08 +00:00
bender	26d6340560	Update src/app/rozpocznij-projekt/page.tsx	2026-03-05 15:51:04 +00:00
bender	f9282ddc55	Update src/app/page.tsx	2026-03-05 15:51:04 +00:00
bender	3f6ab53cfa	Merge version_16 into main Merge version_16 into main	2026-03-05 15:46:58 +00:00
bender	e03963c67b	Update src/app/rozpocznij-projekt/page.tsx	2026-03-05 15:46:54 +00:00
bender	335a44521b	Merge version_15 into main Merge version_15 into main	2026-03-05 15:39:36 +00:00
bender	5eaa34281f	Add src/app/rozpocznij-projekt/page.tsx	2026-03-05 15:39:32 +00:00
bender	df1be7ba8b	Update src/app/page.tsx	2026-03-05 15:39:31 +00:00
bender	d6f11cbc66	Switch to version 13: modified src/app/page.tsx	2026-03-04 19:38:14 +00:00
bender	122cf65a2b	Switch to version 13: modified src/app/layout.tsx	2026-03-04 19:38:13 +00:00
bender	b574f7777f	Switch to version 12: modified src/app/page.tsx	2026-03-04 19:37:57 +00:00
bender	92629dce4a	Switch to version 12: modified src/app/layout.tsx	2026-03-04 19:37:57 +00:00
bender	04dae799d5	Switch to version 11: modified src/app/page.tsx	2026-03-04 19:37:18 +00:00
bender	077865975b	Switch to version 11: modified src/app/layout.tsx	2026-03-04 19:37:18 +00:00
bender	d88376cc0f	Switch to version 12: modified src/app/page.tsx	2026-03-04 19:36:58 +00:00
bender	0d013c8072	Switch to version 12: modified src/app/layout.tsx	2026-03-04 19:36:58 +00:00
bender	5108f651e6	Switch to version 13: modified src/app/page.tsx	2026-03-04 19:36:41 +00:00
bender	a4269a701b	Merge version_14 into main Merge version_14 into main	2026-03-04 19:34:28 +00:00
bender	7b40caf25c	Update src/app/page.tsx	2026-03-04 19:34:23 +00:00
bender	51ac04332d	Merge version_13 into main Merge version_13 into main	2026-03-04 19:06:01 +00:00
bender	e7a9259bfd	Update src/app/page.tsx	2026-03-04 19:05:57 +00:00
bender	803e563c11	Update src/app/layout.tsx	2026-03-04 19:05:56 +00:00
bender	ce99711852	Merge version_12 into main Merge version_12 into main	2026-03-04 18:52:31 +00:00
bender	c40bb4b205	Update src/app/page.tsx	2026-03-04 18:52:27 +00:00
bender	18be743f2c	Update src/app/layout.tsx	2026-03-04 18:52:27 +00:00
bender	45ab056278	Merge version_11 into main Merge version_11 into main	2026-03-04 18:49:38 +00:00
bender	9bd50ae3d2	Update src/app/page.tsx	2026-03-04 18:49:34 +00:00
bender	3e655b3fae	Merge version_11 into main Merge version_11 into main	2026-03-04 18:47:42 +00:00
bender	942a537c35	Update src/app/page.tsx	2026-03-04 18:47:38 +00:00
bender	2830822063	Switch to version 9: modified src/app/page.tsx	2026-03-04 18:44:25 +00:00
bender	619409fb37	Update src/app/page.tsx	2026-03-04 18:43:02 +00:00
bender	fa5f71da3d	Merge version_9 into main Merge version_9 into main	2026-03-04 18:41:00 +00:00
bender	3a52fe4ff9	Update src/app/page.tsx	2026-03-04 18:40:56 +00:00
bender	bb498881eb	Update src/app/layout.tsx	2026-03-04 18:40:53 +00:00
bender	3abe1e1203	Switch to version 7: modified src/app/page.tsx	2026-03-04 18:39:50 +00:00
bender	eaab816815	Merge version_8 into main Merge version_8 into main	2026-03-04 18:39:07 +00:00
bender	0a421514ac	Update src/app/page.tsx	2026-03-04 18:39:03 +00:00
bender	08273259a9	Update src/app/page.tsx	2026-03-04 18:38:15 +00:00
bender	112d6bb52b	Merge version_8 into main Merge version_8 into main	2026-03-04 18:37:37 +00:00
bender	82784cb01f	Update src/app/page.tsx	2026-03-04 18:37:27 +00:00
bender	d8c8dddcf8	Merge version_7 into main Merge version_7 into main	2026-03-04 18:33:25 +00:00
bender	0ca3d43a30	Update src/app/page.tsx	2026-03-04 18:33:21 +00:00
bender	a91c87a819	Merge version_6 into main Merge version_6 into main	2026-03-04 18:26:22 +00:00
bender	f01632789f	Update src/app/page.tsx	2026-03-04 18:26:17 +00:00
bender	08f761bf92	Merge version_5 into main Merge version_5 into main	2026-03-04 18:21:34 +00:00