Update src/app/page.tsx

src/app/page.tsx

@@ -11,6 +11,7 @@ import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGaller
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import BlogCardOne from '@/components/sections/blog/BlogCardOne';
 import { Award, Calendar, CheckCircle, MapPin, ShieldCheck, Star } from "lucide-react";
 
 export default function LandingPage() {
@@ -32,25 +33,15 @@ export default function LandingPage() {
       <NavbarLayoutFloatingOverlay
       navItems={[
         {
-          name: "Home",
-          id: "hero",
-        },
+          name: "Home",          id: "hero"},
         {
-          name: "About",
-          id: "about",
-        },
+          name: "About",          id: "about"},
         {
-          name: "Inventory",
-          id: "inventory",
-        },
+          name: "Inventory",          id: "inventory"},
         {
-          name: "Testimonials",
-          id: "testimonials",
-        },
+          name: "Testimonials",          id: "testimonials"},
         {
-          name: "Contact",
-          id: "contact",
-        },
+          name: "Contact",          id: "contact"},
       ]}
       brandName="Kevin's Klassics"
     />
@@ -59,37 +50,24 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboardGallery
       background={{
-        variant: "gradient-bars",
-      }}
+        variant: "gradient-bars"}}
       title="Timeless Quality, Reliable Rides."
       description="Kevin's Klassics in Cannon Falls offers a curated selection of pre-owned vehicles. Experience the difference of local, honest car sales."
       buttons={[
         {
-          text: "View Inventory",
-          href: "#inventory",
-        },
+          text: "View Inventory",          href: "#inventory"},
       ]}
       mediaItems={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-car-medium-shot_23-2148266189.jpg",
-          imageAlt: "Showroom view",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-car-medium-shot_23-2148266189.jpg?_wi=1",          imageAlt: "Showroom view"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/vertical-low-angle-shot-silver-vintage-car-street_181624-60007.jpg",
-          imageAlt: "Car display",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/vertical-low-angle-shot-silver-vintage-car-street_181624-60007.jpg",          imageAlt: "Car display"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-choosing-car-car-showroom_1303-26815.jpg",
-          imageAlt: "Sales office",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-choosing-car-car-showroom_1303-26815.jpg",          imageAlt: "Sales office"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-showroom-looking-buy-vehicle-assessing-condition-cars_482257-124070.jpg",
-          imageAlt: "Woman in showroom looking to buy vehicle assessing condition of cars",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/woman-showroom-looking-buy-vehicle-assessing-condition-cars_482257-124070.jpg",          imageAlt: "Woman in showroom looking to buy vehicle assessing condition of cars"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-elegant-woman-car-salon_1157-32023.jpg",
-          imageAlt: "Stylish and elegant woman in a car salon",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/stylish-elegant-woman-car-salon_1157-32023.jpg",          imageAlt: "Stylish and elegant woman in a car salon"},
       ]}
       mediaAnimation="slide-up"
     />
@@ -101,19 +79,13 @@ export default function LandingPage() {
       title="Proven Excellence"
       metrics={[
         {
-          label: "Perfect Rating",
-          value: "5.0",
-          icon: Star,
+          label: "Perfect Rating",          value: "5.0",          icon: Star,
         },
         {
-          label: "Satisfied Clients",
-          value: "100%",
-          icon: Award,
+          label: "Satisfied Clients",          value: "100%",          icon: Award,
         },
         {
-          label: "Years Served",
-          value: "10+",
-          icon: Calendar,
+          label: "Years Served",          value: "10+",          icon: Calendar,
         },
       ]}
       metricsAnimation="slide-up"
@@ -128,47 +100,41 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "p1",
-          name: "Vintage Cruiser",
-          price: "Call for Price",
-          imageSrc: "http://img.b2bpic.net/free-photo/vertical-closeup-shot-green-car-headlamps_181624-8290.jpg",
-        },
+          id: "p1",          name: "Vintage Cruiser",          price: "Call for Price",          imageSrc: "http://img.b2bpic.net/free-photo/vertical-closeup-shot-green-car-headlamps_181624-8290.jpg"},
         {
-          id: "p2",
-          name: "Classic Sport",
-          price: "Call for Price",
-          imageSrc: "http://img.b2bpic.net/free-photo/vintage-car-headlight-vintage-auto-detail-selective-focus-idea-interior-article_166373-3398.jpg",
-        },
+          id: "p2",          name: "Classic Sport",          price: "Call for Price",          imageSrc: "http://img.b2bpic.net/free-photo/vintage-car-headlight-vintage-auto-detail-selective-focus-idea-interior-article_166373-3398.jpg"},
         {
-          id: "p3",
-          name: "Open-Top Roadster",
-          price: "Call for Price",
-          imageSrc: "http://img.b2bpic.net/free-photo/transportation-detail-front-shiny-classic_1203-6155.jpg",
-        },
+          id: "p3",          name: "Open-Top Roadster",          price: "Call for Price",          imageSrc: "http://img.b2bpic.net/free-photo/transportation-detail-front-shiny-classic_1203-6155.jpg?_wi=1"},
         {
-          id: "p4",
-          name: "Reliable Commuter",
-          price: "Call for Price",
-          imageSrc: "http://img.b2bpic.net/free-photo/view-three-dimensional-car-with-abstract-spheres-background_23-2151005307.jpg",
-        },
+          id: "p4",          name: "Reliable Commuter",          price: "Call for Price",          imageSrc: "http://img.b2bpic.net/free-photo/view-three-dimensional-car-with-abstract-spheres-background_23-2151005307.jpg"},
         {
-          id: "p5",
-          name: "Executive Sedan",
-          price: "Call for Price",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-car-with-simple-background_23-2150797044.jpg",
-        },
+          id: "p5",          name: "Executive Sedan",          price: "Call for Price",          imageSrc: "http://img.b2bpic.net/free-photo/3d-car-with-simple-background_23-2150797044.jpg"},
         {
-          id: "p6",
-          name: "Project Special",
-          price: "Call for Price",
-          imageSrc: "http://img.b2bpic.net/free-photo/funny-license-plate-vehicle_23-2150165820.jpg",
-        },
+          id: "p6",          name: "Project Special",          price: "Call for Price",          imageSrc: "http://img.b2bpic.net/free-photo/funny-license-plate-vehicle_23-2150165820.jpg"},
       ]}
       title="Current Inventory"
       description="Browse our hand-picked classics and reliable daily drivers."
     />
   </div>
 
+  <div id="social" data-section="social">
+      <BlogCardOne
+      animationType="slide-up"
+      textboxLayout="split"
+      useInvertedBackground={true}
+      title="Latest Facebook Posts"
+      description="Stay updated with our newest arrivals and shop happenings directly from our Facebook page."
+      blogs={[
+        {
+          id: "f1",          category: "Facebook",          title: "New Inventory Arrival!",          excerpt: "Just in: A stunning 1965 Mustang in pristine condition. Stop by the shop to see it in person.",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-car-medium-shot_23-2148266189.jpg?_wi=2",          authorName: "Kevin's Klassics",          authorAvatar: "http://img.b2bpic.net/free-photo/stylish-elegant-woman-car-salon_1157-32023.jpg",          date: "2 days ago"
+        },
+        {
+          id: "f2",          category: "Facebook",          title: "Weekend Spotlight",          excerpt: "The Open-Top Roadster is getting lots of attention! Come take it for a test drive this weekend.",          imageSrc: "http://img.b2bpic.net/free-photo/transportation-detail-front-shiny-classic_1203-6155.jpg?_wi=2",          authorName: "Kevin's Klassics",          authorAvatar: "http://img.b2bpic.net/free-photo/stylish-elegant-woman-car-salon_1157-32023.jpg",          date: "4 days ago"
+        }
+      ]}
+    />
+  </div>
+
   <div id="features" data-section="features">
       <FeatureBorderGlow
       animationType="slide-up"
@@ -176,19 +142,13 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "Transparent Sales",
-          description: "No hidden fees, no pressure, just clear answers.",
-          icon: ShieldCheck,
+          title: "Transparent Sales",          description: "No hidden fees, no pressure, just clear answers.",          icon: ShieldCheck,
         },
         {
-          title: "Quality Assured",
-          description: "Every vehicle is inspected before it hits our lot.",
-          icon: CheckCircle,
+          title: "Quality Assured",          description: "Every vehicle is inspected before it hits our lot.",          icon: CheckCircle,
         },
         {
-          title: "Local Roots",
-          description: "Serving the Cannon Falls community for years.",
-          icon: MapPin,
+          title: "Local Roots",          description: "Serving the Cannon Falls community for years.",          icon: MapPin,
         },
       ]}
       title="Why Kevin's Klassics?"
@@ -204,25 +164,15 @@ export default function LandingPage() {
       author="Kevin Manley"
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/young-man-delivering-christmas-tree-car_1303-19511.jpg",
-          alt: "Customer Photo 1",
-        },
+          src: "http://img.b2bpic.net/free-photo/young-man-delivering-christmas-tree-car_1303-19511.jpg",          alt: "Customer Photo 1"},
         {
-          src: "http://img.b2bpic.net/free-photo/man-looking-car-car-showroom_1303-14544.jpg",
-          alt: "Customer Photo 2",
-        },
+          src: "http://img.b2bpic.net/free-photo/man-looking-car-car-showroom_1303-14544.jpg",          alt: "Customer Photo 2"},
         {
-          src: "http://img.b2bpic.net/free-photo/smiley-man-coffee-break-city_23-2148289249.jpg",
-          alt: "Customer Photo 3",
-        },
+          src: "http://img.b2bpic.net/free-photo/smiley-man-coffee-break-city_23-2148289249.jpg",          alt: "Customer Photo 3"},
         {
-          src: "http://img.b2bpic.net/free-photo/older-woman-with-red-car_1149-1161.jpg",
-          alt: "Customer Photo 4",
-        },
+          src: "http://img.b2bpic.net/free-photo/older-woman-with-red-car_1149-1161.jpg",          alt: "Customer Photo 4"},
         {
-          src: "http://img.b2bpic.net/free-photo/happy-man-car-dealership_23-2148130231.jpg",
-          alt: "Customer Photo 5",
-        },
+          src: "http://img.b2bpic.net/free-photo/happy-man-car-dealership_23-2148130231.jpg",          alt: "Customer Photo 5"},
       ]}
       ratingAnimation="slide-up"
       avatarsAnimation="blur-reveal"
@@ -234,20 +184,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "q1",
-          title: "Do you offer financing?",
-          content: "We work with local lenders to help secure the best financing for your needs.",
-        },
+          id: "q1",          title: "Do you offer financing?",          content: "We work with local lenders to help secure the best financing for your needs."},
         {
-          id: "q2",
-          title: "Can I trade in my car?",
-          content: "Yes, we accept trade-ins at fair market value after professional appraisal.",
-        },
+          id: "q2",          title: "Can I trade in my car?",          content: "Yes, we accept trade-ins at fair market value after professional appraisal."},
         {
-          id: "q3",
-          title: "Are your prices fixed?",
-          content: "Our pricing is highly competitive and transparent, though we are always happy to discuss terms.",
-        },
+          id: "q3",          title: "Are your prices fixed?",          content: "Our pricing is highly competitive and transparent, though we are always happy to discuss terms."},
       ]}
       sideTitle="Common Questions"
       sideDescription="Everything you need to know about purchasing at Kevin's Klassics."
@@ -259,8 +200,7 @@ export default function LandingPage() {
       <ContactCenter
       useInvertedBackground={true}
       background={{
-        variant: "gradient-bars",
-      }}
+        variant: "gradient-bars"}}
       tag="Get in touch"
       title="Visit Us Today"
       description="Drop by our Cannon Falls lot or give us a call at (612) 275-8722."
@@ -273,29 +213,19 @@ export default function LandingPage() {
         {
           items: [
             {
-              label: "Home",
-              href: "#hero",
-            },
+              label: "Home",              href: "#hero"},
             {
-              label: "About",
-              href: "#about",
-            },
+              label: "About",              href: "#about"},
             {
-              label: "Contact",
-              href: "#contact",
-            },
+              label: "Contact",              href: "#contact"},
           ],
         },
         {
           items: [
             {
-              label: "Privacy Policy",
-              href: "#",
-            },
+              label: "Privacy Policy",              href: "#"},
             {
-              label: "Terms of Service",
-              href: "#",
-            },
+              label: "Terms of Service",              href: "#"},
           ],
         },
       ]}
@@ -305,4 +235,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5faff;
-  --card: #f1f8ff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffffe6;
+  --primary-cta: #e6e6e6;
   --primary-cta-text: #f5faff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --accent: #737373;
+  --background-accent: #737373;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);