Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -5,8 +5,9 @@ import ReactLenis from "lenis/react";
 import ContactText from '@/components/sections/contact/ContactText';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
+import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import SplitAbout from '@/components/sections/about/SplitAbout';
@@ -30,62 +31,24 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "Services", id: "features" },
-          id: "hero",
+        { name: "Feature Details", id: "features-nine" },
-        },
+        { name: "Testimonials", id: "testimonials" },
-        {
+        { name: "Contact", id: "contact" },
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="1001 Perde Eskişehir"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardGallery
+      <HeroLogoBillboard
-      background={{
+      logoText="1001 PERDE"
-        variant: "gradient-bars",
-      }}
-      title="Zarif ve Modern Perde Çözümleri"
       description="Eskişehir'de evinize estetik katacak perde seçenekleri ve profesyonel hizmet için randevunuzu hemen oluşturun."
-      buttons={[
+      background={{ variant: "gradient-bars" }}
-        {
+      buttons={[{ text: "Randevu Al", href: "#contact" }]}
-          text: "Randevu Al",
+      imageSrc="http://img.b2bpic.net/free-photo/curtain-with-sunlight_1339-4065.jpg?_wi=1"
-          href: "#contact",
+      imageAlt="Zarif perde seçenekleri"
-        },
-      ]}
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/curtain-with-sunlight_1339-4065.jpg?_wi=1",
-          imageAlt: "Zarif perde seçenekleri",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/man-looking-outside-modern-room-with-gray-curtains-hanging-lamp_8353-12543.jpg?_wi=1",
-          imageAlt: "Modern perde tasarımları",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/towel-stack-shelf_1339-7649.jpg?_wi=1",
-          imageAlt: "Ev dekorasyonu perde",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/chambermaid-preparing-hotel-room_23-2148095224.jpg",
-          imageAlt: "Chambermaid preparing hotel room",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-near-widnow-fixing-curtains_259150-59507.jpg",
-          imageAlt: "Young woman standing near the widnow and fixing the curtains",
-        },
-      ]}
       mediaAnimation="slide-up"
     />
   </div>
@@ -97,18 +60,9 @@ export default function LandingPage() {
       title="Hakkımızda"
       description="Eskişehir 1001 Perde olarak, evinizi hayalinizdeki görünüme kavuşturmak için kaliteli kumaşlar ve uzman işçilikle hizmet vermekteyiz."
       bulletPoints={[
-        {
+        { title: "Geniş Ürün Yelpazesi", description: "Her zevke uygun perde çeşitleri." },
-          title: "Geniş Ürün Yelpazesi",
+        { title: "Profesyonel Montaj", description: "Uzman ekibimizle hızlı ve temiz uygulama." },
-          description: "Her zevke uygun perde çeşitleri.",
+        { title: "Ücretsiz Keşif", description: "Ölçülerinizi yerinde alıyoruz." },
-        },
-        {
-          title: "Profesyonel Montaj",
-          description: "Uzman ekibimizle hızlı ve temiz uygulama.",
-        },
-        {
-          title: "Ücretsiz Keşif",
-          description: "Ölçülerinizi yerinde alıyoruz.",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/serious-focused-afro-american-teacher-blue-shirt-checking-drawings_273609-14156.jpg?_wi=1"
       mediaAnimation="slide-up"
@@ -120,56 +74,43 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
-      negativeCard={{
+      negativeCard={{ items: ["Kalitesiz Kumaş Kullanımı", "Geç Teslimat", "Hatalı Ölçülendirme", "Yetersiz Müşteri Desteği", "Zor Montaj Süreçleri"] }}
-        items: [
+      positiveCard={{ items: ["Özel Tasarım Perdeler", "Tül ve Fon Çeşitleri", "Motorlu Perde Sistemleri", "Stor ve Zebra Perde", "Blackout Karartma Perdeler"] }}
-          "Kalitesiz Kumaş Kullanımı",
-          "Geç Teslimat",
-          "Hatalı Ölçülendirme",
-          "Yetersiz Müşteri Desteği",
-          "Zor Montaj Süreçleri",
-        ],
-      }}
-      positiveCard={{
-        items: [
-          "Özel Tasarım Perdeler",
-          "Tül ve Fon Çeşitleri",
-          "Motorlu Perde Sistemleri",
-          "Stor ve Zebra Perde",
-          "Blackout Karartma Perdeler",
-        ],
-      }}
       title="Hizmetlerimiz"
       description="Evinize değer katan perde çözümleri."
     />
   </div>
 
+  <div id="features-nine" data-section="features-nine">
+    <FeatureCardNine
+        showStepNumbers={true}
+        animationType="slide-up"
+        textboxLayout="default"
+        useInvertedBackground={true}
+        title="Nasıl Çalışıyoruz?"
+        description="Adım adım evinizi güzelleştirme sürecimiz."
+        features={[
+          {
+            title: "Keşif",            description: "Evini ziyaret ediyor, ölçüleri alıyoruz.",            phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/curtain-with-sunlight_1339-4065.jpg?_wi=1" },
+            phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/towel-stack-shelf_1339-7649.jpg?_wi=2" }
+          },
+          {
+            title: "Tasarım",            description: "Size özel kumaş ve model seçimleri.",            phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/scenery-designers-work_23-2149741822.jpg?_wi=1" },
+            phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/serious-focused-afro-american-teacher-blue-shirt-checking-drawings_273609-14156.jpg?_wi=1" }
+          }
+        ]}
+    />
+  </div>
+
   <div id="metrics" data-section="metrics">
       <MetricCardEleven
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={true}
       metrics={[
-        {
+        { id: "m1", value: "1000+", title: "Mutlu Müşteri", description: "Binlerce mutlu ev sahibi.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-handyman-applying-some-sealant-door-with-sealing-gun_662251-2740.jpg?_wi=1" },
-          id: "m1",
+        { id: "m2", value: "15 Yıl", title: "Tecrübe", description: "Sektörde uzun yıllar.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-decorating-front-door_23-2150562109.jpg" },
-          value: "1000+",
+        { id: "m3", value: "%100", title: "Memnuniyet", description: "Kaliteden ödün vermiyoruz.", imageSrc: "http://img.b2bpic.net/free-photo/scenery-designers-work_23-2149741822.jpg?_wi=2" },
-          title: "Mutlu Müşteri",
-          description: "Binlerce mutlu ev sahibi.",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-handyman-applying-some-sealant-door-with-sealing-gun_662251-2740.jpg?_wi=1",
-        },
-        {
-          id: "m2",
-          value: "15 Yıl",
-          title: "Tecrübe",
-          description: "Sektörde uzun yıllar.",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-decorating-front-door_23-2150562109.jpg",
-        },
-        {
-          id: "m3",
-          value: "%100",
-          title: "Memnuniyet",
-          description: "Kaliteden ödün vermiyoruz.",
-          imageSrc: "http://img.b2bpic.net/free-photo/scenery-designers-work_23-2149741822.jpg",
-        },
       ]}
       title="Başarılarımız"
       description="Deneyimimizle yanınızdayız."
@@ -181,61 +122,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "1", name: "Ayşe Yılmaz", date: "2023-10-12", title: "Mükemmel işçilik", quote: "Perdelerim harika oldu, ellerinize sağlık.", tag: "Ev sahibi", avatarSrc: "http://img.b2bpic.net/free-photo/business-people-working-office_1157-21980.jpg", imageSrc: "http://img.b2bpic.net/free-photo/curtain-with-sunlight_1339-4065.jpg?_wi=2" },
-          id: "1",
-          name: "Ayşe Yılmaz",
-          date: "2023-10-12",
-          title: "Mükemmel işçilik",
-          quote: "Perdelerim harika oldu, ellerinize sağlık.",
-          tag: "Ev sahibi",
-          avatarSrc: "http://img.b2bpic.net/free-photo/business-people-working-office_1157-21980.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/curtain-with-sunlight_1339-4065.jpg?_wi=2",
-          imageAlt: "happy customer home decor",
-        },
-        {
-          id: "2",
-          name: "Mehmet Demir",
-          date: "2023-09-05",
-          title: "Çok hızlılar",
-          quote: "Söz verdikleri sürede montajı tamamladılar.",
-          tag: "Müşteri",
-          avatarSrc: "http://img.b2bpic.net/free-photo/set-designer-work-indoors_23-2149836952.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-looking-outside-modern-room-with-gray-curtains-hanging-lamp_8353-12543.jpg?_wi=2",
-          imageAlt: "happy customer home decor",
-        },
-        {
-          id: "3",
-          name: "Fatma Şen",
-          date: "2023-08-20",
-          title: "Kaliteli malzeme",
-          quote: "Kumaş kalitesi çok iyi.",
-          tag: "Müşteri",
-          avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-near-widnow-fixing-curtains_259150-59510.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/towel-stack-shelf_1339-7649.jpg?_wi=2",
-          imageAlt: "happy customer home decor",
-        },
-        {
-          id: "4",
-          name: "Canan Korkmaz",
-          date: "2023-07-15",
-          title: "Profesyonel hizmet",
-          quote: "Güleryüzlü bir ekip.",
-          tag: "Müşteri",
-          avatarSrc: "http://img.b2bpic.net/free-photo/middle-aged-woman-meeting-with-notary_74855-2982.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/serious-focused-afro-american-teacher-blue-shirt-checking-drawings_273609-14156.jpg?_wi=2",
-          imageAlt: "happy customer home decor",
-        },
-        {
-          id: "5",
-          name: "Ali Veli",
-          date: "2023-06-01",
-          title: "Harika tavsiye",
-          quote: "Tavsiye ederim.",
-          tag: "Müşteri",
-          avatarSrc: "http://img.b2bpic.net/free-photo/cheerful-friends-having-pillow-fight-bed_23-2147766821.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-handyman-applying-some-sealant-door-with-sealing-gun_662251-2740.jpg?_wi=2",
-          imageAlt: "happy customer home decor",
-        },
       ]}
       title="Müşterilerimizden"
       description="Bizi tercih edenler ne diyor?"
@@ -246,21 +133,7 @@ export default function LandingPage() {
       <FaqSplitText
       useInvertedBackground={true}
       faqs={[
-        {
+        { id: "f1", title: "Ücretsiz keşif yapıyor musunuz?", content: "Evet, tüm ölçü keşiflerimiz ücretsizdir." },
-          id: "f1",
-          title: "Ücretsiz keşif yapıyor musunuz?",
-          content: "Evet, tüm ölçü keşiflerimiz ücretsizdir.",
-        },
-        {
-          id: "f2",
-          title: "Montaj süresi ne kadar?",
-          content: "Genellikle 2-3 iş günü içerisinde teslim edilir.",
-        },
-        {
-          id: "f3",
-          title: "Kredi kartına taksit var mı?",
-          content: "Evet, tüm kartlara vade farksız taksit imkanı sunuyoruz.",
-        },
       ]}
       sideTitle="Sıkça Sorulanlar"
       faqsAnimation="slide-up"
@@ -270,48 +143,16 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={false}
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars",
-      }}
       text="Evinize yeni bir görünüm kazandırmak için hemen randevu alın."
-      buttons={[
+      buttons={[{ text: "WhatsApp Üzerinden Randevu Al", href: "https://wa.me/905555555555" }]}
-        {
-          text: "WhatsApp Üzerinden Randevu Al",
-          href: "https://wa.me/905555555555",
-        },
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
-        {
+        { title: "İletişim", items: [{ label: "Adres: Eskişehir", href: "#" }, { label: "Telefon: 0555 555 55 55", href: "tel:05555555555" }] },
-          title: "İletişim",
-          items: [
-            {
-              label: "Adres: Eskişehir",
-              href: "#",
-            },
-            {
-              label: "Telefon: 0555 555 55 55",
-              href: "tel:05555555555",
-            },
-          ],
-        },
-        {
-          title: "Sosyal Medya",
-          items: [
-            {
-              label: "Instagram",
-              href: "#",
-            },
-            {
-              label: "Facebook",
-              href: "#",
-            },
-          ],
-        },
       ]}
       bottomLeftText="© 2024 1001 Perde Eskişehir"
       bottomRightText="Tüm hakları saklıdır."

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #f6f0e9;
-  --card: #f9f9f9;
+  --card: #efe7dd;
-  --foreground: #000612e6;
+  --foreground: #2b180a;
-  --primary-cta: #15479c;
+  --primary-cta: #2b180a;
-  --primary-cta-text: #ffffff;
+  --primary-cta-text: #f6f0e9;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #efe7dd;
-  --secondary-cta-text: #000612e6;
+  --secondary-cta-text: #2b180a;
-  --accent: #e2e2e2;
+  --accent: #94877c;
-  --background-accent: #c4c4c4;
+  --background-accent: #afa094;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);