Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -10,7 +10,7 @@ import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGaller
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 
 export default function LandingPage() {
@@ -31,26 +31,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Portfolio",
-          id: "portfolio",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Services", id: "services" },
+        { name: "Portfolio", id: "portfolio" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="Lief vir Kreatief"
     />
@@ -58,39 +43,22 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardGallery
-      background={{
-        variant: "gradient-bars",
-      }}
+      background={{ variant: "gradient-bars" }}
       title="Creative Design That Tells Your Story"
       description="At Lief vir Kreatief, we create unique, meaningful designs and manage your social media so your brand stands out and connects."
       buttons={[
-        {
-          text: "View Portfolio",
-          href: "#portfolio",
-        },
-        {
-          text: "Get a Quote",
-          href: "#contact",
-        },
+        { text: "View Portfolio", href: "#portfolio" },
+        { text: "Get a Quote", href: "#contact" },
       ]}
       mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/school-supplies-arrangement-children-room_23-2148666105.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/blank-stationery-concept-with-two-stacks-business-cards_23-2147725121.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-website-content-layout-design-illustraion-notebook_53876-167124.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-notebook-desk_23-2148304861.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164872.jpg",
-        },
+        { imageSrc: "http://img.b2bpic.net/free-photo/school-supplies-arrangement-children-room_23-2148666105.jpg" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/blank-stationery-concept-with-two-stacks-business-cards_23-2147725121.jpg" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-website-content-layout-design-illustraion-notebook_53876-167124.jpg" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-notebook-desk_23-2148304861.jpg" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164872.jpg" },
       ]}
       mediaAnimation="slide-up"
+      buttonClassName="font-bold"
     />
   </div>
 
@@ -98,15 +66,8 @@ export default function LandingPage() {
       <InlineImageSplitTextAbout
       useInvertedBackground={true}
       heading={[
-        {
-          type: "text",
-          content: "Who We Are",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/neat-office-with-computer-worker_482257-119323.jpg",
-          alt: "Studio Team",
-        },
+        { type: "text", content: "Who We Are" },
+        { type: "image", src: "http://img.b2bpic.net/free-photo/neat-office-with-computer-worker_482257-119323.jpg", alt: "Studio Team" },
       ]}
     />
   </div>
@@ -117,108 +78,32 @@ export default function LandingPage() {
       textboxLayout="inline-image"
       useInvertedBackground={false}
       features={[
-        {
-          id: "s1",
-          label: "Graphic Design",
-          title: "Branding & Print",
-          items: [
-            "Logo Design",
-            "Business Cards",
-            "Flyers & Posters",
-            "Marketing Material",
-          ],
-        },
-        {
-          id: "s2",
-          label: "Social Media",
-          title: "Engagement Strategy",
-          items: [
-            "Content Creation",
-            "Monthly Posting Plans",
-            "Hashtag Strategy",
-            "Page Growth",
-          ],
-        },
-        {
-          id: "s3",
-          label: "Website",
-          title: "Digital Presence",
-          items: [
-            "Custom Landing Pages",
-            "Small Business Websites",
-            "UI/UX Design",
-          ],
-        },
+        { id: "s1", label: "Graphic Design", title: "Branding & Print", items: ["Logo Design", "Business Cards", "Flyers & Posters", "Marketing Material"], buttons: [{text: "Learn More"}] },
+        { id: "s2", label: "Social Media", title: "Engagement Strategy", items: ["Content Creation", "Monthly Posting Plans", "Hashtag Strategy", "Page Growth"], buttons: [{text: "Learn More"}] },
+        { id: "s3", label: "Website", title: "Digital Presence", items: ["Custom Landing Pages", "Small Business Websites", "UI/UX Design"], buttons: [{text: "Learn More"}] },
       ]}
       title="Our Creative Services"
       description="We help brands grow through strategic visual storytelling."
+      buttons={[{text: "View All Services"}]}
+      textBoxButtonClassName="font-bold text-lg"
     />
   </div>
 
   <div id="portfolio" data-section="portfolio">
-      <ProductCardTwo
+      <ProductCardThree
       animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
+      textboxLayout="split-actions"
+      gridVariant="bento-grid"
       useInvertedBackground={true}
       products={[
-        {
-          id: "p1",
-          brand: "Branding",
-          name: "Earthy Identity",
-          price: "Custom",
-          rating: 5,
-          reviewCount: "5",
-          imageSrc: "http://img.b2bpic.net/free-photo/big-stationery-concept_23-2147786742.jpg",
-        },
-        {
-          id: "p2",
-          brand: "Social",
-          name: "Digital Series",
-          price: "Custom",
-          rating: 5,
-          reviewCount: "5",
-          imageSrc: "http://img.b2bpic.net/free-photo/design-style-graphic-creativity-ideas-illustration-concept_53876-121068.jpg",
-        },
-        {
-          id: "p3",
-          brand: "Print",
-          name: "Poster Layout",
-          price: "Custom",
-          rating: 5,
-          reviewCount: "5",
-          imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimalist-flyer-template_23-2149991660.jpg",
-        },
-        {
-          id: "p4",
-          brand: "Branding",
-          name: "Logo Concept",
-          price: "Custom",
-          rating: 5,
-          reviewCount: "5",
-          imageSrc: "http://img.b2bpic.net/free-photo/stationery-ice-cream-concept_23-2147803265.jpg",
-        },
-        {
-          id: "p5",
-          brand: "Social",
-          name: "Ads Campaign",
-          price: "Custom",
-          rating: 5,
-          reviewCount: "5",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-office-with-tablet-device_23-2149749887.jpg",
-        },
-        {
-          id: "p6",
-          brand: "Print",
-          name: "Brochure Design",
-          price: "Custom",
-          rating: 5,
-          reviewCount: "5",
-          imageSrc: "http://img.b2bpic.net/free-vector/triangle-cover-brochure-mock-up_23-2147492651.jpg",
-        },
+        { id: "p1", name: "Earthy Identity", price: "Custom Project", imageSrc: "http://img.b2bpic.net/free-photo/big-stationery-concept_23-2147786742.jpg" },
+        { id: "p2", name: "Digital Series", price: "Custom Project", imageSrc: "http://img.b2bpic.net/free-photo/design-style-graphic-creativity-ideas-illustration-concept_53876-121068.jpg" },
+        { id: "p3", name: "Poster Layout", price: "Custom Project", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimalist-flyer-template_23-2149991660.jpg" },
+        { id: "p4", name: "Logo Concept", price: "Custom Project", imageSrc: "http://img.b2bpic.net/free-photo/stationery-ice-cream-concept_23-2147803265.jpg" },
       ]}
       title="Featured Projects"
       description="A glimpse into our recent creative work."
+      buttons={[{text: "See More Works"}]}
     />
   </div>
 
@@ -228,33 +113,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",
-          value: "100%",
-          title: "Custom Designs",
-          items: [
-            "No templates used",
-            "Tailored to your voice",
-          ],
-        },
-        {
-          id: "m2",
-          value: "24h",
-          title: "Support",
-          items: [
-            "One-on-one attention",
-            "Responsive service",
-          ],
-        },
-        {
-          id: "m3",
-          value: "Fast",
-          title: "Turnaround",
-          items: [
-            "Efficient process",
-            "Meeting your deadlines",
-          ],
-        },
+        { id: "m1", value: "100%", title: "Custom Designs", items: ["No templates used", "Tailored to your voice"] },
+        { id: "m2", value: "24h", title: "Support", items: ["One-on-one attention", "Responsive service"] },
+        { id: "m3", value: "Fast", title: "Turnaround", items: ["Efficient process", "Meeting your deadlines"] },
       ]}
       title="Why Choose Lief vir Kreatief?"
       description="We are committed to helping small businesses succeed."
@@ -267,46 +128,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       testimonials={[
-        {
-          id: "1",
-          name: "Sarah J.",
-          handle: "@sarahbiz",
-          testimonial: "Professional, creative, and always delivers beyond expectations.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg",
-        },
-        {
-          id: "2",
-          name: "Mark D.",
-          handle: "@markstudio",
-          testimonial: "The best design partner I've ever worked with.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-yellow-jacket_23-2149020790.jpg",
-        },
-        {
-          id: "3",
-          name: "Emily R.",
-          handle: "@emmy_r",
-          testimonial: "Absolutely love their attention to detail and personal touch.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-slim-sensual-girl-gray-dress-leaning-against_613910-151.jpg",
-        },
-        {
-          id: "4",
-          name: "John B.",
-          handle: "@j_biz",
-          testimonial: "Lief vir Kreatief changed how my customers see my brand.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/concentrated-young-lady-designer-sitting-office-night_171337-15594.jpg",
-        },
-        {
-          id: "5",
-          name: "Anna P.",
-          handle: "@annap_creative",
-          testimonial: "Reliable and incredibly talented design studio.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/job-seat-commercial-digitally-generated-blank_1134-1162.jpg",
-        },
+        { id: "1", name: "Sarah J.", handle: "@sarahbiz", testimonial: "Professional, creative, and always delivers beyond expectations.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg" },
+        { id: "2", name: "Mark D.", handle: "@markstudio", testimonial: "The best design partner I've ever worked with.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-yellow-jacket_23-2149020790.jpg" },
+        { id: "3", name: "Emily R.", handle: "@emmy_r", testimonial: "Absolutely love their attention to detail and personal touch.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-young-slim-sensual-girl-gray-dress-leaning-against_613910-151.jpg" },
       ]}
       showRating={true}
       title="What Clients Say"
@@ -319,21 +143,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "f1",
-          title: "How do I get started?",
-          content: "Simply reach out via the contact form or WhatsApp.",
-        },
-        {
-          id: "f2",
-          title: "Do you offer packages?",
-          content: "Yes, we have monthly management plans for social media.",
-        },
-        {
-          id: "f3",
-          title: "Where are you based?",
-          content: "We are proud to be based in Port Elizabeth, South Africa.",
-        },
+        { id: "f1", title: "How do I get started?", content: "Simply reach out via the contact form or WhatsApp." },
+        { id: "f2", title: "Do you offer packages?", content: "Yes, we have monthly management plans for social media." },
+        { id: "f3", title: "Where are you based?", content: "We are proud to be based in Port Elizabeth, South Africa." },
       ]}
       title="Frequently Asked Questions"
       description="Answers to common questions about our design services."
@@ -346,21 +158,13 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={true}
-      background={{
-        variant: "radial-gradient",
-      }}
+      background={{ variant: "radial-gradient" }}
       tag="Let's connect"
       title="Ready to elevate your brand?"
       description="Contact us today for a consultation and get a custom quote."
       buttons={[
-        {
-          text: "Send us a message",
-          href: "mailto:info@liefvirkreatief.com",
-        },
-        {
-          text: "Chat on WhatsApp",
-          href: "https://wa.me/yournumber",
-        },
+        { text: "Send us a message", href: "mailto:info@liefvirkreatief.com" },
+        { text: "Chat on WhatsApp", href: "https://wa.me/yournumber" },
       ]}
     />
   </div>
@@ -368,14 +172,8 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="Lief vir Kreatief"
-      leftLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Terms of Service",
-        href: "#",
-      }}
+      leftLink={{ text: "Privacy Policy", href: "#" }}
+      rightLink={{ text: "Terms of Service", href: "#" }}
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fdfaf7;
-  --card: #ffffff;
-  --foreground: #2b2520;
-  --primary-cta: #a5a58d;
+  --background: #F5F3EF;
+  --card: #FFFFFF;
+  --foreground: #2D2926;
+  --primary-cta: #D4A373;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #E6DCCF;
   --secondary-cta-text: #2b2520;
-  --accent: #d6ccc2;
-  --background-accent: #f5ebe0;
+  --accent: #CCD5AE;
+  --background-accent: #FAEDCD;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);