Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,14 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
+import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
 
@@ -22,60 +22,34 @@ export default function LandingPage() {
         contentWidth="medium"
         sizing="mediumLargeSizeMediumTitles"
         background="blurBottom"
-        cardStyle="gradient-bordered"
+        cardStyle="glass-depth"
-        primaryButtonStyle="double-inset"
+        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "Services", id: "services" },
-          id: "hero",
+        { name: "Portfolio", id: "portfolio" },
-        },
+        { name: "Pricing", id: "pricing" },
-        {
+        { name: "Contact", id: "contact" },
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Portfolio",
-          id: "portfolio",
-        },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="Grafik Tee Studio"
-      button={{
+      button={{ text: "Order Now", href: "#contact" }}
-        text: "Order Now",
-        href: "#contact",
-      }}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboardScroll
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars",
-      }}
       title="Professional Graphic Design That Makes Your Brand Stand Out"
       description="High-converting designs for social media, clothing brands, ads, packaging, and online stores."
       buttons={[
-        {
+        { text: "Order Now", href: "#contact" },
-          text: "Order Now",
+        { text: "View Portfolio", href: "#portfolio" },
-          href: "#contact",
-        },
-        {
-          text: "View Portfolio",
-          href: "#portfolio",
-        },
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6v6oo3"
       imageAlt="graphic design studio dark aesthetic"
@@ -87,26 +61,8 @@ export default function LandingPage() {
       animationType="depth-3d"
       textboxLayout="default"
       useInvertedBackground={false}
-      negativeCard={{
+      negativeCard={{ items: ["Low-quality designs", "Generic templates", "Delayed delivery", "Hidden fees"] }}
-        items: [
+      positiveCard={{ items: ["Logo Design", "Product Packaging", "Social Media Posts", "T-Shirt Design", "Shopify Banner Design", "TikTok Ad Creatives", "Etsy Listing Images", "Thumbnail Design"] }}
-          "Low-quality designs",
-          "Generic templates",
-          "Delayed delivery",
-          "Hidden fees",
-        ],
-      }}
-      positiveCard={{
-        items: [
-          "Logo Design",
-          "Product Packaging",
-          "Social Media Posts",
-          "T-Shirt Design",
-          "Shopify Banner Design",
-          "TikTok Ad Creatives",
-          "Etsy Listing Images",
-          "Thumbnail Design",
-        ],
-      }}
       title="Our Professional Services"
       description="We specialize in crafting visual identities that capture attention and drive sales."
     />
@@ -119,42 +75,12 @@ export default function LandingPage() {
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={true}
       products={[
-        {
+        { id: "p1", name: "Luxury Logo Design", price: "Featured", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hvs1uf" },
-          id: "p1",
+        { id: "p2", name: "TikTok Ad Creative", price: "Featured", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zx584g" },
-          name: "Luxury Logo Design",
+        { id: "p3", name: "Apparel Design", price: "Featured", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z2dndp" },
-          price: "Featured",
+        { id: "p4", name: "Packaging Mockup", price: "Featured", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qce8c2" },
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hvs1uf",
+        { id: "p5", name: "Shopify Banners", price: "Featured", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=915wec" },
-        },
+        { id: "p6", name: "Brand Identity", price: "Featured", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wai4ax" },
-        {
-          id: "p2",
-          name: "TikTok Ad Creative",
-          price: "Featured",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zx584g",
-        },
-        {
-          id: "p3",
-          name: "Apparel Design",
-          price: "Featured",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z2dndp",
-        },
-        {
-          id: "p4",
-          name: "Packaging Mockup",
-          price: "Featured",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qce8c2",
-        },
-        {
-          id: "p5",
-          name: "Shopify Banners",
-          price: "Featured",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=915wec",
-        },
-        {
-          id: "p6",
-          name: "Brand Identity",
-          price: "Featured",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wai4ax",
-        },
       ]}
       title="Portfolio Gallery"
       description="A glimpse into our recent design work."
@@ -167,26 +93,10 @@ export default function LandingPage() {
       title="Why Choose Grafik Tee Studio"
       tag="Advantages"
       metrics={[
-        {
+        { id: "m1", value: "24h", description: "Fast Delivery" },
-          id: "m1",
+        { id: "m2", value: "100%", description: "Unique Designs" },
-          value: "24h",
+        { id: "m3", value: "Unlimited", description: "Revisions" },
-          description: "Fast Delivery",
+        { id: "m4", value: "Commercial", description: "Rights Included" },
-        },
-        {
-          id: "m2",
-          value: "100%",
-          description: "Unique Designs",
-        },
-        {
-          id: "m3",
-          value: "Unlimited",
-          description: "Revisions",
-        },
-        {
-          id: "m4",
-          value: "Commercial",
-          description: "Rights Included",
-        },
       ]}
       metricsAnimation="slide-up"
     />
@@ -198,41 +108,11 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       testimonials={[
-        {
+        { id: "t1", name: "Sarah Miller", handle: "@sarah_fashion", testimonial: "The best design work I have received. High quality and fast turnaround.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ff1iao" },
-          id: "t1",
+        { id: "t2", name: "James Chen", handle: "@chen_ecom", testimonial: "Increased my Shopify conversion rate immediately with their banners.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t1x9lh" },
-          name: "Sarah Miller",
+        { id: "t3", name: "Elena Rodriguez", handle: "@elena_brand", testimonial: "Amazing packaging design. My products look professional now.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ty6xp0" },
-          handle: "@sarah_fashion",
+        { id: "t4", name: "Mike Davis", handle: "@davis_tiktok", testimonial: "Their TikTok ad creatives are absolute game changers for my brand.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g83mby" },
-          testimonial: "The best design work I have received. High quality and fast turnaround.",
+        { id: "t5", name: "Lisa Wang", handle: "@lisa_etsy", testimonial: "Stunning visuals for my Etsy listings. Increased my sales significantly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g2wjuv" },
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ff1iao",
-        },
-        {
-          id: "t2",
-          name: "James Chen",
-          handle: "@chen_ecom",
-          testimonial: "Increased my Shopify conversion rate immediately with their banners.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t1x9lh",
-        },
-        {
-          id: "t3",
-          name: "Elena Rodriguez",
-          handle: "@elena_brand",
-          testimonial: "Amazing packaging design. My products look professional now.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ty6xp0",
-        },
-        {
-          id: "t4",
-          name: "Mike Davis",
-          handle: "@davis_tiktok",
-          testimonial: "Their TikTok ad creatives are absolute game changers for my brand.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g83mby",
-        },
-        {
-          id: "t5",
-          name: "Lisa Wang",
-          handle: "@lisa_etsy",
-          testimonial: "Stunning visuals for my Etsy listings. Increased my sales significantly.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g2wjuv",
-        },
       ]}
       title="Loved By Creators"
       description="See what our clients say about our design services."
@@ -240,64 +120,14 @@ export default function LandingPage() {
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardTwo
+      <PricingCardNine
-      animationType="slide-up"
+      animationType="blur-reveal"
-      textboxLayout="default"
+      textboxLayout="split"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       plans={[
-        {
+        { id: "starter", title: "Entry", price: "$99", period: "/ project", features: ["1 Logo Concept", "2 Social Posts", "3 Days Delivery"], button: { text: "Select", href: "#contact" } },
-          id: "starter",
+        { id: "pro", title: "Popular", price: "$299", period: "/ project", features: ["3 Concepts", "10 Social Posts", "Shopify Banners", "24h Delivery"], button: { text: "Select", href: "#contact" } },
-          badge: "Entry",
+        { id: "premium", title: "Ultimate", price: "$599", period: "/ project", features: ["All Concepts", "Full Packaging", "TikTok Ads", "Priority Support"], button: { text: "Select", href: "#contact" } },
-          price: "$99",
-          subtitle: "Perfect for starters",
-          features: [
-            "1 Logo Concept",
-            "2 Social Posts",
-            "3 Days Delivery",
-          ],
-          buttons: [
-            {
-              text: "Select",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          id: "pro",
-          badge: "Popular",
-          price: "$299",
-          subtitle: "Best for growth",
-          features: [
-            "3 Concepts",
-            "10 Social Posts",
-            "Shopify Banners",
-            "24h Delivery",
-          ],
-          buttons: [
-            {
-              text: "Select",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          id: "premium",
-          badge: "Ultimate",
-          price: "$599",
-          subtitle: "Total brand overhaul",
-          features: [
-            "All Concepts",
-            "Full Packaging",
-            "TikTok Ads",
-            "Priority Support",
-          ],
-          buttons: [
-            {
-              text: "Select",
-              href: "#contact",
-            },
-          ],
-        },
       ]}
       title="Pricing Packages"
       description="Simple, transparent pricing for your design needs."
@@ -305,60 +135,36 @@ export default function LandingPage() {
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
+      <FaqSplitMedia
-      textboxLayout="default"
+      textboxLayout="split"
       useInvertedBackground={true}
       faqs={[
-        {
+        { id: "q1", title: "How fast is delivery?", content: "Most standard orders are delivered within 24 hours, while complex projects take up to 48 hours." },
-          id: "q1",
+        { id: "q2", title: "Are unlimited revisions included?", content: "Yes, we work until you are satisfied with your design." },
-          title: "How fast is delivery?",
+        { id: "q3", title: "Can I use designs commercially?", content: "Absolutely. Full commercial usage rights are included in all packages." },
-          content: "Most orders are delivered within 24-48 hours depending on complexity.",
-        },
-        {
-          id: "q2",
-          title: "Are unlimited revisions included?",
-          content: "Yes, we work until you are satisfied with your design.",
-        },
-        {
-          id: "q3",
-          title: "Can I use designs commercially?",
-          content: "Absolutely. Full commercial usage rights are included in all packages.",
-        },
       ]}
       title="Frequently Asked Questions"
       description="Common questions about our design process."
       faqsAnimation="blur-reveal"
+      mediaPosition="right"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplit
+      <ContactCTA
-      useInvertedBackground={false}
+      useInvertedBackground={true}
-      background={{
+      background={{ variant: "sparkles-gradient" }}
-        variant: "gradient-bars",
-      }}
       tag="Get In Touch"
       title="Let's Start Your Design Project"
       description="Send us a message or reach out via social channels to get started today."
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=d6hmql"
+      buttons={[{ text: "Start Project", href: "#contact" }]}
-      inputPlaceholder="Enter your email for a consultation"
-      buttonText="Start Project"
-      imageAlt="abstract dark blue light"
-      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterCard
       logoText="Grafik Tee Studio"
-      leftLink={{
+      copyrightText="© 2025 | Grafik Tee Studio"
-        text: "© 2024 Grafik Tee Studio",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
     />
   </div>
       </ReactLenis>