Switch to version 3: modified src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactText from '@/components/sections/contact/ContactText';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
+import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import HeroSplit from '@/components/sections/hero/HeroSplit';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
@@ -12,7 +12,7 @@ import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import { AlertTriangle, Box, Shield, ShieldCheck, Smartphone, Zap } from "lucide-react";
+import { Shield } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -32,22 +32,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "Hizmetler", id: "features" },
-          id: "hero",
+        { name: "Ürünler", id: "products" },
-        },
+        { name: "İletişim", id: "contact" },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Products",
-          id: "products",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="Hilltech"
     />
@@ -55,70 +43,29 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplit
-      background={{
+      background={{ variant: "plain" }}
-        variant: "plain",
-      }}
       title="Hilltech Elektronik Güvenlik Sistemleri"
       description="Modern elektronik güvenlik çözümleriyle yaşam alanlarınızı ve ticari varlıklarınızı en üst düzey teknolojiyle koruma altına alıyoruz."
-      buttons={[
+      buttons={[{ text: "Hizmetleri Keşfet", href: "#features" }]}
-        {
-          text: "Hizmetlerimizi İnceleyin",
-          href: "#products",
-        },
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/empty-national-secret-service-operation-room-used-follow-safety-alerts_482257-90051.jpg"
       imageAlt="modern security system monitor"
       mediaAnimation="slide-up"
-      avatars={[
+    />
-        {
+  </div>
-          src: "http://img.b2bpic.net/free-photo/cheerful-attractive-businesswoman-crossing-arms_1262-4724.jpg",
+
-          alt: "Cheerful attractive businesswoman crossing arms",
+  <div id="features" data-section="features">
-        },
+      <FeatureCardMedia
-        {
+      animationType="slide-up"
-          src: "http://img.b2bpic.net/free-photo/proud-middle-aged-business-man-conference-room_1262-3062.jpg",
+      textboxLayout="split"
-          alt: "Proud Middle-aged Business Man in Conference Room",
+      useInvertedBackground={true}
-        },
+      title="Uzmanlık Alanlarımız ve Hizmetlerimiz"
-        {
+      description="Elektronik güvenlikte projelendirmeden kurulum ve desteğe kadar uçtan uca çözümler sunuyoruz."
-          src: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-13618.jpg",
+      features={[
-          alt: "Attractive blond business woman in a white shirt, eyeglasses and crossed arms over grey background.",
+        { id: "s1", title: "Güvenlik Kamera Sistemleri", description: "Yüksek çözünürlüklü ve yapay zeka destekli izleme çözümleri.", tag: "Kamera" },
-        },
+        { id: "s2", title: "Erişim Kontrol Sistemleri", description: "Biyometrik okuyucular ve kartlı geçiş yönetim panelleri.", tag: "Kontrol" },
-        {
+        { id: "s3", title: "Akıllı Yangın ve Alarm", description: "Risk durumunda anında müdahale ve uyarı ağları.", tag: "Alarm" }
-          src: "http://img.b2bpic.net/free-photo/happy-smiling-businesswoman-looking-camera-with-arms-crossed-portrait_1163-4337.jpg",
-          alt: "Happy smiling businesswoman looking at camera with arms crossed, portrait",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-successful-young-entrepreneur-standing-looking-camera-crossing-arms-smiling_482257-5018.jpg",
-          alt: "Portrait of successful young entrepreneur standing looking at camera crossing arms and smiling",
-        },
-      ]}
-      avatarText="Mutlu müşterilerimizden bazıları"
-      marqueeItems={[
-        {
-          type: "text-icon",
-          text: "7/24 Teknik Destek",
-          icon: ShieldCheck,
-        },
-        {
-          type: "text-icon",
-          text: "Hızlı Kurulum",
-          icon: Zap,
-        },
-        {
-          type: "text-icon",
-          text: "Modern Teknoloji",
-          icon: Box,
-        },
-        {
-          type: "text-icon",
-          text: "Uzaktan Yönetim",
-          icon: Smartphone,
-        },
-        {
-          type: "text-icon",
-          text: "Garanti Kapsamı",
-          icon: AlertTriangle,
-        },
       ]}
+      className="py-20"
     />
   </div>
 
@@ -127,8 +74,8 @@ export default function LandingPage() {
       useInvertedBackground={false}
       tag="Hakkımızda"
       title="Güvenliğiniz, Bizim Uzmanlığımız"
-      description="Hilltech, elektronik güvenlik sektöründe uzun yıllara dayanan deneyimi ile projelendirme, kurulum ve teknik destek hizmetleri sunmaktadır."
+      description="Hilltech, uzun yıllara dayanan deneyimi ile sektörün en güvenilir çözüm ortağıdır."
-      subdescription="Sektörel standartların üzerinde, yenilikçi ve sürdürülebilir güvenlik sistemleriyle her zaman yanınızdayız."
+      subdescription="Teknolojik gelişmeleri yakından takip ederek, güvenliğinizi geleceğe hazırlıyoruz."
       icon={Shield}
       imageSrc="http://img.b2bpic.net/free-photo/portrait-male-security-guard-with-radio-station-camera-screens_23-2150368740.jpg"
       imageAlt="security technician working"
@@ -136,42 +83,6 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentySeven
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      features={[
-        {
-          id: "f1",
-          title: "7/24 Kesintisiz İzleme",
-          descriptions: [
-            "Gelişmiş kamera sistemlerimizle her an güvendesiniz.",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/composition-tablet-with-home-automation-app_23-2149036814.jpg",
-        },
-        {
-          id: "f2",
-          title: "Modern Biometrik Sistemler",
-          descriptions: [
-            "Parmak izi ve yüz tanıma teknolojileri ile erişim kontrolü.",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-empty-steel-measure-cup-white-weights-isolated-wooden-table-professional-coffee-brewing_346278-1477.jpg",
-        },
-        {
-          id: "f3",
-          title: "Akıllı Alarm Altyapısı",
-          descriptions: [
-            "Yangın ve hırsızlık risklerine karşı anında uyarı sistemleri.",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/selfservice-terminal-with-loading-screen-payment-device-displays-processing-operation_169016-72768.jpg",
-        },
-      ]}
-      title="Neden Hilltech Güvenlik?"
-      description="Entegre güvenlik çözümlerimizle mülklerinizi akıllıca koruyun."
-    />
-  </div>
-
   <div id="products" data-section="products">
       <ProductCardThree
       animationType="slide-up"
@@ -179,63 +90,23 @@ export default function LandingPage() {
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "p1", name: "Dome Kamera Sistemi", price: "1.200 TL", imageSrc: "http://img.b2bpic.net/free-photo/cctv-security-camera-ceiling_53876-123083.jpg" },
-          id: "p1",
+        { id: "p2", name: "Biyometrik Okuyucu", price: "2.500 TL", imageSrc: "http://img.b2bpic.net/free-photo/man-getting-intercom-read-his-fingerprint-open-door-with-gloves_176474-2789.jpg" },
-          name: "Dome Kamera Sistemi",
+        { id: "p3", name: "Akıllı Alarm Paneli", price: "3.100 TL", imageSrc: "http://img.b2bpic.net/free-photo/cctv-security-technology-with-lock-icon-digital-remix_53876-104935.jpg" },
-          price: "1.200 TL",
+        { id: "p4", name: "Kablosuz Sensör Seti", price: "850 TL", imageSrc: "http://img.b2bpic.net/free-photo/top-view-hand-with-robotic-vacuum-cleaner-home_23-2150663444.jpg" }
-          imageSrc: "http://img.b2bpic.net/free-photo/cctv-security-camera-ceiling_53876-123083.jpg",
-        },
-        {
-          id: "p2",
-          name: "Biyometrik Okuyucu",
-          price: "2.500 TL",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-getting-intercom-read-his-fingerprint-open-door-with-gloves_176474-2789.jpg",
-        },
-        {
-          id: "p3",
-          name: "Akıllı Alarm Paneli",
-          price: "3.100 TL",
-          imageSrc: "http://img.b2bpic.net/free-photo/cctv-security-technology-with-lock-icon-digital-remix_53876-104935.jpg",
-        },
-        {
-          id: "p4",
-          name: "Kablosuz Sensör Seti",
-          price: "850 TL",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-hand-with-robotic-vacuum-cleaner-home_23-2150663444.jpg",
-        },
-        {
-          id: "p5",
-          name: "Gaz ve Yangın Dedektörü",
-          price: "950 TL",
-          imageSrc: "http://img.b2bpic.net/free-photo/smart-home-innovation-technology-with-woman-using-control-panel_53876-124638.jpg",
-        },
-        {
-          id: "p6",
-          name: "DVR Kayıt Cihazı",
-          price: "1.800 TL",
-          imageSrc: "http://img.b2bpic.net/free-photo/masked-worker-photovoltaics-factory-stealing-proprietary-technology-data_482257-119560.jpg",
-        },
       ]}
-      title="Ürünlerimiz"
+      title="Öne Çıkan Ürünler"
-      description="Endüstriyel ve ev tipi güvenlik ihtiyaçlarınız için profesyonel ürün serimiz."
+      description="Endüstriyel ve ev tipi güvenlik ihtiyaçlarınız için profesyonel donanımlar."
     />
   </div>
 
   <div id="socialProof" data-section="socialProof">
       <SocialProofOne
-      textboxLayout="split"
+      names={["TeknoSecure", "SafeGuard Pro", "VisionGuard", "SmartLock", "DefendTech"]}
-      useInvertedBackground={true}
+      title="İş Ortaklarımız"
-      names={[
-        "TeknoSecure",
-        "SafeGuard Pro",
-        "VisionGuard",
-        "SmartLock Systems",
-        "EliteAlarm Solutions",
-        "DefendTech Industries",
-        "CoreProtect Security",
-      ]}
-      title="Çözüm Ortaklarımız"
       description="Güvenilir markalarla en iyi teknolojik donanımları projelerimize dahil ediyoruz."
+      textboxLayout="split"
+      useInvertedBackground={false}
     />
   </div>
 
@@ -243,31 +114,8 @@ export default function LandingPage() {
       <TestimonialCardTwelve
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "t1", name: "Ahmet Y.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-succesful-senior-entrrepeneur-conference-room_482257-4100.jpg" },
-          id: "t1",
+        { id: "t2", name: "Ayşe M.", imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-standing-with-crossed-arms_23-2148095775.jpg" }
-          name: "Ahmet Y.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-succesful-senior-entrrepeneur-conference-room_482257-4100.jpg",
-        },
-        {
-          id: "t2",
-          name: "Ayşe M.",
-          imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-standing-with-crossed-arms_23-2148095775.jpg",
-        },
-        {
-          id: "t3",
-          name: "Mehmet S.",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-consultant-monitoring-financial-updates-targets-laptop_482257-130669.jpg",
-        },
-        {
-          id: "t4",
-          name: "Fatma K.",
-          imageSrc: "http://img.b2bpic.net/free-photo/manufacturing-analyst-reviewing-solar-panel-production-workflow_482257-125954.jpg",
-        },
-        {
-          id: "t5",
-          name: "Canan D.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-using-digital-tablet-home-office_329181-4278.jpg",
-        },
       ]}
       cardTitle="Müşterilerimizin Yorumları"
       cardTag="Referanslar"
@@ -280,21 +128,8 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       faqs={[
-        {
+        { id: "q1", title: "Sistem kurulumu ne kadar sürer?", content: "Genellikle 1-2 iş günü içerisinde tamamlanır." },
-          id: "q1",
+        { id: "q2", title: "Teknik destek veriyor musunuz?", content: "Tüm ürünlerimize 7/24 teknik destek sağlıyoruz." }
-          title: "Sistem kurulumu ne kadar sürer?",
-          content: "Kapsama göre değişmekle birlikte genellikle 1-2 iş günü içerisinde tamamlanır.",
-        },
-        {
-          id: "q2",
-          title: "Teknik destek veriyor musunuz?",
-          content: "Evet, tüm ürünlerimiz için 7/24 teknik destek ve bakım garantisi sunuyoruz.",
-        },
-        {
-          id: "q3",
-          title: "Uzaktan izleme mümkün mü?",
-          content: "Evet, mobil uygulamamız üzerinden dünyanın her yerinden sisteminizi izleyebilirsiniz.",
-        },
       ]}
       title="Sıkça Sorulan Sorular"
       description="Güvenlik sistemlerimiz hakkında en çok merak edilenler."
@@ -305,30 +140,17 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={false}
-      background={{
+      background={{ variant: "downward-rays-animated" }}
-        variant: "downward-rays-animated",
-      }}
       text="Ücretsiz keşif ve fiyat teklifi için bizimle iletişime geçin."
-      buttons={[
+      buttons={[{ text: "İletişime Geç", href: "mailto:info@hilltech.com.tr" }]}
-        {
-          text: "Hemen İletişime Geç",
-          href: "mailto:info@hilltech.com.tr",
-        },
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="Hilltech"
-      leftLink={{
+      leftLink={{ text: "Gizlilik Politikası", href: "#" }}
-        text: "Privacy Policy",
+      rightLink={{ text: "Kullanım Şartları", href: "#" }}
-        href: "#",
-      }}
-      rightLink={{
-        text: "Terms of Service",
-        href: "#",
-      }}
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #010912;
+  --background: #fdf8f8;
-  --card: #152840;
+  --card: #f9f0f0;
-  --foreground: #e6f0ff;
+  --foreground: #4a0404;
-  --primary-cta: #cee7ff;
+  --primary-cta: #701a75;
   --primary-cta-text: #010912;
-  --secondary-cta: #0e1a29;
+  --secondary-cta: #881337;
   --secondary-cta-text: #e6f0ff;
-  --accent: #3f5c79;
+  --accent: #e11d48;
-  --background-accent: #004a93;
+  --background-accent: #fce7f3;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);