Update src/app/page.tsx

Merge version_3 into main

src/app/features/page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
+
+export default function FeaturesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Features", id: "features" }
+            ]}
+            brandName="SpideyWeb"
+          />
+        </div>
+
+        <div id="features" data-section="features">
+          <FeatureCardTwentyEight
+            title="Unleashing Spider-Powers"
+            description="A deep dive into the unique abilities and technologies of the Spider-Verse characters."
+            textboxLayout="split"
+            useInvertedBackground={false}
+            animationType="blur-reveal"
+            features={[
+              { id: "f1", title: "Wall-Crawling", subtitle: "Physics-defying movement", category: "Movement", value: "98% Success", buttons: [{ text: "Explore" }] },
+              { id: "f2", title: "Web-Shooting", subtitle: "Custom web tech", category: "Gadgets", value: "High-Speed", buttons: [{ text: "Explore" }] },
+              { id: "f3", title: "Spider-Sense", subtitle: "Intuitive awareness", category: "Sensory", value: "Instant", buttons: [{ text: "Explore" }] }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="SpideyWeb"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Terms of Service", href: "#" }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -2,16 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import ContactText from '@/components/sections/contact/ContactText';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import { Award, Star, Zap } from "lucide-react";
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import { Award, Star, Zap, ChevronRight } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -19,13 +19,13 @@ export default function LandingPage() {
       defaultButtonVariant="icon-arrow"
       defaultTextAnimation="reveal-blur"
       borderRadius="rounded"
-      contentWidth="small"
-      sizing="mediumLargeSizeLargeTitles"
-      background="noiseDiagonalGradient"
-      cardStyle="gradient-mesh"
-      primaryButtonStyle="gradient"
+      contentWidth="medium"
+      sizing="largeSizeMediumTitles"
+      background="noise"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="primary-glow"
       secondaryButtonStyle="glass"
-      headingFontWeight="semibold"
+      headingFontWeight="bold"
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
@@ -44,110 +44,106 @@ export default function LandingPage() {
         </div>
 
         <div id="hero" data-section="hero">
-          <HeroSplitDualMedia
-            background={{ variant: "gradient-bars" }}
+          <HeroBillboardScroll
+            background={{ variant: "rotated-rays-animated" }}
             title="Enter the Spider-Verse"
             description="Discover a collection of breathtaking imagery featuring your neighborhood wall-crawler in action."
             tag="New Collection"
-            mediaItems={[
-              { imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-mystical-other-worldly-sky_23-2150946920.jpg", imageAlt: "Spiderman Night" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/close-up-spider-web_127675-2736.jpg", imageAlt: "Spiderman Action" }
-            ]}
-            mediaAnimation="blur-reveal"
-            rating={5}
-            ratingText="Rated 5 stars by over 10,000 fans"
+            imageSrc="http://img.b2bpic.net/free-photo/view-futuristic-mystical-other-worldly-sky_23-2150946920.jpg"
+            buttons={[{ text: "Explore Now", href: "#products" }]}
           />
         </div>
 
         <div id="about" data-section="about">
-          <AboutMetric
-            useInvertedBackground={true}
+          <SplitAbout
             title="Universe Insights"
-            metrics={[
-              { icon: Star, label: "Images Captured", value: "500+" },
-              { icon: Zap, label: "Active Users", value: "1.2M" },
-              { icon: Award, label: "Fan Favorites", value: "85k" }
+            description="Dive deep into the legacy of the most iconic web-slinger through our curated gallery."
+            bulletPoints={[
+              { title: "High Definition", description: "Crystal clear imagery of every web-pattern.", icon: Star },
+              { title: "Fan Community", description: "Join millions of fans worldwide.", icon: Zap },
+              { title: "Official Gear", description: "Authentic memorabilia authenticated by fans.", icon: Award }
             ]}
-            metricsAnimation="slide-up"
+            imageSrc="http://img.b2bpic.net/free-photo/close-up-spider-web_127675-2736.jpg"
+            textboxLayout="split"
+            useInvertedBackground={false}
           />
         </div>
 
         <div id="features" data-section="features">
-          <FeatureCardSix
-            textboxLayout="default"
-            useInvertedBackground={false}
-            features={[
-              { title: "Suit Evolution", description: "From classic red/blue to high-tech metallic gear.", imageSrc: "http://img.b2bpic.net/free-photo/detailed-structure-marble-natural-pattern-background-design_1258-79115.jpg", imageAlt: "Mask" },
-              { title: "Iconic Poses", description: "Capturing the grace and strength of Spiderman.", imageSrc: "http://img.b2bpic.net/free-photo/terrible-fantasy-scenes-digital-illustrations_456031-57.jpg", imageAlt: "Action" },
-              { title: "Web Technology", description: "Innovative designs integrated into every wall-crawl.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-spider-web-halloween-texture-design_23-2151853386.jpg", imageAlt: "Tech" }
-            ]}
+          <FeatureCardTwentySix
             title="Why Spidey Matters"
-            description="Exploring the legend, the suits, and the stories."
+            description="Explore the legend through our unique features."
+            useInvertedBackground={true}
+            features={[
+              { title: "Suit Evolution", description: "A look at every major suit design.", buttonIcon: ChevronRight },
+              { title: "Iconic Poses", description: "Capturing grace in motion.", buttonIcon: ChevronRight },
+              { title: "Web Tech", description: "Innovation behind the wall-crawl.", buttonIcon: ChevronRight },
+              { title: "Story Arcs", description: "Moments that defined a generation.", buttonIcon: ChevronRight }
+            ]}
+            textboxLayout="default"
           />
         </div>
 
         <div id="products" data-section="products">
-          <ProductCardThree
-            animationType="slide-up"
-            textboxLayout="default"
-            gridVariant="three-columns-all-equal-width"
-            useInvertedBackground={true}
-            products={[
-              { id: "p1", name: "Collector Figurine", price: "$49", imageSrc: "http://img.b2bpic.net/free-photo/portrait-fantasy-male-creature-from-sea_23-2151609066.jpg" },
-              { id: "p2", name: "Hero Case", price: "$29", imageSrc: "http://img.b2bpic.net/free-photo/three-dimensional-spider-with-poly-effect_23-2150963788.jpg" },
-              { id: "p3", name: "Comic Set", price: "$199", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-cool-superhero-suit_23-2150944772.jpg" }
-            ]}
+          <ProductCardTwo
             title="Spidey Collection"
-            description="Exclusive gear and memorabilia for every fan."
+            description="Exclusive fan-favorite gear."
+            gridVariant="four-items-2x2-equal-grid"
+            animationType="slide-up"
+            products={[
+              { id: "1", brand: "Official", name: "Collector Figurine", price: "$49", rating: 5, reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/portrait-fantasy-male-creature-from-sea_23-2151609066.jpg" },
+              { id: "2", brand: "Official", name: "Hero Case", price: "$29", rating: 5, reviewCount: "850", imageSrc: "http://img.b2bpic.net/free-photo/three-dimensional-spider-with-poly-effect_23-2150963788.jpg" }
+            ]}
+            textboxLayout="default"
+            useInvertedBackground={false}
           />
         </div>
 
         <div id="testimonials" data-section="testimonials">
-          <TestimonialCardFive
-            textboxLayout="default"
+          <TestimonialCardTwelve
+            cardTitle="Fan Stories"
+            cardTag="Testimonials"
+            cardAnimation="blur-reveal"
             useInvertedBackground={false}
             testimonials={[
-              { id: "1", name: "Sarah J.", date: "2023", title: "Top Fan", quote: "The imagery is absolutely cinematic!", tag: "Fan", avatarSrc: "http://img.b2bpic.net/free-photo/angry-young-superhero-guy-showing-thumbs-up-isolated-green_141793-94867.jpg" },
-              { id: "2", name: "Mike L.", date: "2024", title: "Collector", quote: "Incredible details in every shot.", tag: "Pro", avatarSrc: "http://img.b2bpic.net/free-photo/confident-young-blonde-superwoman-red-cape-looking-front-isolated-white-wall_141793-74227.jpg" }
+              { id: "t1", name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/angry-young-superhero-guy-showing-thumbs-up-isolated-green_141793-94867.jpg" },
+              { id: "t2", name: "Mike L.", imageSrc: "http://img.b2bpic.net/free-photo/confident-young-blonde-superwoman-red-cape-looking-front-isolated-white-wall_141793-74227.jpg" }
             ]}
-            title="Fan Stories"
-            description="Hear what others say about the Spider-Verse."
           />
         </div>
 
         <div id="faq" data-section="faq">
-          <FaqDouble
-            textboxLayout="default"
-            useInvertedBackground={true}
+          <FaqSplitText
+            sideTitle="Frequently Asked"
             faqs={[
-              { id: "q1", title: "Is the gallery updated?", content: "Yes, new shots are added weekly." },
-              { id: "q2", title: "Are products licensed?", content: "All items are 100% official merchandise." }
+              { id: "1", title: "Is the gallery updated?", content: "Yes, our team updates the collection every week." },
+              { id: "2", title: "Are items licensed?", content: "Everything in our collection is 100% officially licensed."}
             ]}
-            title="Got Questions?"
-            description="Common questions about our gallery and collection."
-            faqsAnimation="opacity"
+            faqsAnimation="slide-up"
+            useInvertedBackground={false}
           />
         </div>
 
         <div id="contact" data-section="contact">
-          <ContactCTA
+          <ContactText
+            text="Join the Spider-Team today and never miss an update"
+            background={{ variant: "radial-gradient" }}
+            buttons={[{ text: "Contact Us", href: "#" }]}
             useInvertedBackground={false}
-            background={{ variant: "sparkles-gradient" }}
-            tag="Contact"
-            title="Join the Spider-Team"
-            description="Get latest news and exclusive drop alerts."
-            buttons={[{ text: "Contact Support", href: "#" }]}
           />
         </div>
 
         <div id="footer" data-section="footer">
-          <FooterLogoReveal
-            logoText="SpideyWeb"
-            leftLink={{ text: "Privacy Policy", href: "#" }}
-            rightLink={{ text: "Terms of Service", href: "#" }}
+          <FooterSimple
+            columns={[
+              { title: "Links", items: [{ label: "Home", href: "#" }, { label: "Gallery", href: "#" }] },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
+            ]}
+            bottomLeftText="© 2024 SpideyWeb"
+            bottomRightText="Designed for true fans."
           />
         </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -17,8 +17,8 @@
   --primary-cta-text: #ffffff;
   --secondary-cta: #010101;
   --secondary-cta-text: #ffffff;
-  --accent: #1f7cff;
-  --background-accent: #f96b2f;
+  --accent: #535353;
+  --background-accent: #1f7cff;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);