Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -6,7 +6,7 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
@@ -33,33 +33,19 @@ export default function LandingPage() {
       <NavbarLayoutFloatingOverlay
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "#hero"},
-          id: "#hero",
-        },
         {
-          name: "About Us",
+          name: "About Us",          id: "#about"},
-          id: "#about",
-        },
         {
-          name: "Products",
+          name: "Products",          id: "#products"},
-          id: "#products",
-        },
         {
-          name: "Features",
+          name: "Features",          id: "#features"},
-          id: "#features",
-        },
         {
-          name: "Testimonials",
+          name: "Testimonials",          id: "#testimonials"},
-          id: "#testimonials",
-        },
         {
-          name: "FAQ",
+          name: "FAQ",          id: "#faq"},
-          id: "#faq",
-        },
         {
-          name: "Contact",
+          name: "Contact",          id: "#contact"},
-          id: "#contact",
-        },
       ]}
       logoSrc="http://img.b2bpic.net/free-photo/anime-girls-with-guns-cyberpunk-city_23-2151975927.jpg"
       logoAlt="Postiiify Logo"
@@ -68,75 +54,19 @@ export default function LandingPage() {
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplit
+      <HeroBillboardScroll
       background={{
-        variant: "sparkles-gradient",
+        variant: "sparkles-gradient"}}
-      }}
       title="Unleash Your Fandom"
       description="Discover a vast collection of high-quality anime posters and action figures from your favorite series. Bring your passion to life with Postiiify."
       buttons={[
         {
-          text: "Shop Posters",
+          text: "Shop Posters",          href: "#products"},
-          href: "#products",
-        },
         {
-          text: "Explore Figures",
+          text: "Explore Figures",          href: "#products"},
-          href: "#products",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/black-friday-sales_23-2152020727.jpg"
       imageAlt="Dynamic collage of anime characters and action figures"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-anime-character-shopping-cartoon-style_23-2151644462.jpg",
-          alt: "Happy anime fan 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-anime-character-shopping-cartoon-style_23-2151644394.jpg",
-          alt: "Happy anime fan 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/anime-style-boy-girl-couple-love_23-2151451557.jpg",
-          alt: "Happy anime fan 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/comic-book-everyday-lifestyle-scene_23-2151133836.jpg",
-          alt: "Happy anime fan 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839661.jpg",
-          alt: "Happy anime fan 5",
-        },
-      ]}
-      avatarText="Join 10,000+ happy collectors!"
-      marqueeItems={[
-        {
-          type: "text-icon",
-          text: "New Figures Daily!",
-          icon: Award,
-        },
-        {
-          type: "text-icon",
-          text: "Worldwide Shipping",
-          icon: Car,
-        },
-        {
-          type: "text-icon",
-          text: "Collector Grade",
-          icon: ShieldCheck,
-        },
-        {
-          type: "text-icon",
-          text: "Exclusive Drops",
-          icon: Diamond,
-        },
-        {
-          type: "text-icon",
-          text: "Community Picks",
-          icon: Users,
-        },
-      ]}
     />
   </div>
 
@@ -147,17 +77,11 @@ export default function LandingPage() {
       description="Postiiify is dedicated to bringing the vibrant world of anime directly to your home. We meticulously curate authentic posters and articulated action figures, ensuring every piece meets the highest standards for true collectors and fans alike."
       metrics={[
         {
-          value: "10,000+",
+          value: "10,000+",          title: "Happy Collectors"},
-          title: "Happy Collectors",
-        },
         {
-          value: "500+",
+          value: "500+",          title: "Unique Figures"},
-          title: "Unique Figures",
-        },
         {
-          value: "1,000+",
+          value: "1,000+",          title: "Stunning Posters"},
-          title: "Stunning Posters",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/portrait-anime-character-shopping-cartoon-style_23-2151644383.jpg"
       imageAlt="A person admiring a curated anime collection on a shelf"
@@ -173,44 +97,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "f1",
+          id: "f1",          title: "Epic Posters & Art Prints",          author: "Postiiify Originals",          description: "Adorn your walls with breathtaking art from your favorite series. Our posters feature crisp details and vibrant colors, printed on high-quality stock.",          tags: [
-          title: "Epic Posters & Art Prints",
+            "Visuals",            "Decor",            "Collectible"],
-          author: "Postiiify Originals",
+          imageSrc: "http://img.b2bpic.net/free-photo/flower-with-psychedelic-painting_23-2149372237.jpg",          imageAlt: "High-quality anime poster detail"},
-          description: "Adorn your walls with breathtaking art from your favorite series. Our posters feature crisp details and vibrant colors, printed on high-quality stock.",
-          tags: [
-            "Visuals",
-            "Decor",
-            "Collectible",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/flower-with-psychedelic-painting_23-2149372237.jpg",
-          imageAlt: "High-quality anime poster detail",
-        },
         {
-          id: "f2",
+          id: "f2",          title: "Dynamic Action Figures",          author: "Articulated Series",          description: "Bring your heroes to life! Explore highly detailed, articulated action figures that capture the essence of iconic characters, perfect for display and play.",          tags: [
-          title: "Dynamic Action Figures",
+            "Figures",            "Poseable",            "Premium"],
-          author: "Articulated Series",
+          imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163137.jpg",          imageAlt: "Articulated anime action figure in a dynamic pose"},
-          description: "Bring your heroes to life! Explore highly detailed, articulated action figures that capture the essence of iconic characters, perfect for display and play.",
-          tags: [
-            "Figures",
-            "Poseable",
-            "Premium",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163137.jpg",
-          imageAlt: "Articulated anime action figure in a dynamic pose",
-        },
         {
-          id: "f3",
+          id: "f3",          title: "Exclusive Drops & Limited Editions",          author: "Rare Finds",          description: "Be the first to get your hands on rare and exclusive anime merchandise. Our limited edition drops are a must-have for serious collectors.",          tags: [
-          title: "Exclusive Drops & Limited Editions",
+            "Limited",            "Exclusive",            "Rare"],
-          author: "Rare Finds",
+          imageSrc: "http://img.b2bpic.net/free-photo/top-view-tampons_23-2148025774.jpg",          imageAlt: "Limited edition anime merchandise box"},
-          description: "Be the first to get your hands on rare and exclusive anime merchandise. Our limited edition drops are a must-have for serious collectors.",
-          tags: [
-            "Limited",
-            "Exclusive",
-            "Rare",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-tampons_23-2148025774.jpg",
-          imageAlt: "Limited edition anime merchandise box",
-        },
       ]}
       title="Collect Beyond Limits"
       description="Dive into our expertly curated selection, featuring rare finds and popular characters across genres. Each item is chosen for its quality and collectible value."
@@ -225,47 +122,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "p1",
+          id: "p1",          name: "Crimson Blade Samurai Figure",          price: "$79.99",          imageSrc: "http://img.b2bpic.net/free-photo/conceptual-3d-illustration-basketball-player-dunking-motion-design_183364-124101.jpg",          imageAlt: "Crimson Blade Samurai Figure"},
-          name: "Crimson Blade Samurai Figure",
-          price: "$79.99",
-          imageSrc: "http://img.b2bpic.net/free-photo/conceptual-3d-illustration-basketball-player-dunking-motion-design_183364-124101.jpg",
-          imageAlt: "Crimson Blade Samurai Figure",
-        },
         {
-          id: "p2",
+          id: "p2",          name: "Neon City Guardian Poster",          price: "$29.99",          imageSrc: "http://img.b2bpic.net/free-photo/cityscape-anime-inspired-urban-area_23-2151028712.jpg",          imageAlt: "Neon City Guardian Poster"},
-          name: "Neon City Guardian Poster",
-          price: "$29.99",
-          imageSrc: "http://img.b2bpic.net/free-photo/cityscape-anime-inspired-urban-area_23-2151028712.jpg",
-          imageAlt: "Neon City Guardian Poster",
-        },
         {
-          id: "p3",
+          id: "p3",          name: "Chibi Adventure Squad Set",          price: "$54.99",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-pink-play-dough-monster_23-2149554794.jpg",          imageAlt: "Chibi Adventure Squad Set"},
-          name: "Chibi Adventure Squad Set",
-          price: "$54.99",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-pink-play-dough-monster_23-2149554794.jpg",
-          imageAlt: "Chibi Adventure Squad Set",
-        },
         {
-          id: "p4",
+          id: "p4",          name: "Retro Space Opera Poster",          price: "$24.99",          imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568882.jpg",          imageAlt: "Retro Space Opera Poster"},
-          name: "Retro Space Opera Poster",
-          price: "$24.99",
-          imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568882.jpg",
-          imageAlt: "Retro Space Opera Poster",
-        },
         {
-          id: "p5",
+          id: "p5",          name: "Shadow Scion Action Figure",          price: "$89.99",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-girl-with-spiders-face_23-2147695040.jpg",          imageAlt: "Shadow Scion Action Figure"},
-          name: "Shadow Scion Action Figure",
-          price: "$89.99",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-girl-with-spiders-face_23-2147695040.jpg",
-          imageAlt: "Shadow Scion Action Figure",
-        },
         {
-          id: "p6",
+          id: "p6",          name: "Minimalist Hero Art Print",          price: "$19.99",          imageSrc: "http://img.b2bpic.net/free-photo/digital-art-fire_23-2151104480.jpg",          imageAlt: "Minimalist Hero Art Print"},
-          name: "Minimalist Hero Art Print",
-          price: "$19.99",
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-art-fire_23-2151104480.jpg",
-          imageAlt: "Minimalist Hero Art Print",
-        },
       ]}
       title="Our Top Collections"
       description="Browse our best-selling posters and fan-favorite action figures. Find the perfect addition to your collection or a gift for a fellow enthusiast."
@@ -277,15 +144,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "Crunchyroll",
+        "Crunchyroll",        "Funimation",        "Kodansha",        "Aniplex",        "Bandai Namco",        "Good Smile Company",        "Square Enix",        "Toei Animation"]}
-        "Funimation",
-        "Kodansha",
-        "Aniplex",
-        "Bandai Namco",
-        "Good Smile Company",
-        "Square Enix",
-        "Toei Animation",
-      ]}
       title="Trusted by the Anime Community"
       description="Our collections feature characters and art from the most beloved anime series and acclaimed studios, celebrated by fans worldwide."
       speed={50}
@@ -300,53 +159,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "t1",
+          id: "t1",          name: "Sarah J.",          handle: "@AnimeFanatic88",          testimonial: "Postiiify has the best selection of anime posters! The quality is amazing, and they look fantastic in my room. Highly recommend for any serious collector!",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-anime-character-shopping-cartoon-style_23-2151644421.jpg",          imageAlt: "Happy young woman anime fan"},
-          name: "Sarah J.",
-          handle: "@AnimeFanatic88",
-          testimonial: "Postiiify has the best selection of anime posters! The quality is amazing, and they look fantastic in my room. Highly recommend for any serious collector!",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-anime-character-shopping-cartoon-style_23-2151644421.jpg",
-          imageAlt: "Happy young woman anime fan",
-        },
         {
-          id: "t2",
+          id: "t2",          name: "Mark D.",          handle: "@FigureCollector",          testimonial: "The action figures from Postiiify are top-notch. Incredible detail and articulation. My favorite shop for expanding my collection!",          imageSrc: "http://img.b2bpic.net/free-photo/anime-style-characters-space_23-2151134243.jpg",          imageAlt: "Man proudly showing off action figure"},
-          name: "Mark D.",
-          handle: "@FigureCollector",
-          testimonial: "The action figures from Postiiify are top-notch. Incredible detail and articulation. My favorite shop for expanding my collection!",
-          imageSrc: "http://img.b2bpic.net/free-photo/anime-style-characters-space_23-2151134243.jpg",
-          imageAlt: "Man proudly showing off action figure",
-        },
         {
-          id: "t3",
+          id: "t3",          name: "Emily R.",          handle: "@MangaLover22",          testimonial: "I always find unique pieces here. The exclusive drops are a game-changer! Postiiify truly understands what collectors want.",          imageSrc: "http://img.b2bpic.net/free-photo/unpleased-young-student-girl-wearing-bandana-sunglasses-headphones-around-neck-showing-large-note-pad-looking-camera-showing-thumb-down-isolated-blue-background_141793-138962.jpg",          imageAlt: "Teenager posing with favorite anime poster"},
-          name: "Emily R.",
-          handle: "@MangaLover22",
-          testimonial: "I always find unique pieces here. The exclusive drops are a game-changer! Postiiify truly understands what collectors want.",
-          imageSrc: "http://img.b2bpic.net/free-photo/unpleased-young-student-girl-wearing-bandana-sunglasses-headphones-around-neck-showing-large-note-pad-looking-camera-showing-thumb-down-isolated-blue-background_141793-138962.jpg",
-          imageAlt: "Teenager posing with favorite anime poster",
-        },
         {
-          id: "t4",
+          id: "t4",          name: "David K.",          handle: "@OtakuGamer",          testimonial: "Fast shipping and perfect packaging. My figures arrived in pristine condition. Postiiify is my go-to for all things anime collectibles.",          imageSrc: "http://img.b2bpic.net/free-photo/happy-man-celebrating-manifesting-himself-after-being-victorious-videogame_482257-121663.jpg",          imageAlt: "Gamer with anime figures setup"},
-          name: "David K.",
-          handle: "@OtakuGamer",
-          testimonial: "Fast shipping and perfect packaging. My figures arrived in pristine condition. Postiiify is my go-to for all things anime collectibles.",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-man-celebrating-manifesting-himself-after-being-victorious-videogame_482257-121663.jpg",
-          imageAlt: "Gamer with anime figures setup",
-        },
         {
-          id: "t5",
+          id: "t5",          name: "Jessica L.",          handle: "@CosplayQueen",          testimonial: "The artwork on their posters is stunning! It adds so much character to my cosplay studio. Postiiify makes my space feel more alive.",          imageSrc: "http://img.b2bpic.net/free-photo/man-wear-cheongsam-is-standing-respect-customer-who-come-shop-chinese-new-year_1150-35828.jpg",          imageAlt: "Female cosplayer with anime accessories"},
-          name: "Jessica L.",
-          handle: "@CosplayQueen",
-          testimonial: "The artwork on their posters is stunning! It adds so much character to my cosplay studio. Postiiify makes my space feel more alive.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-wear-cheongsam-is-standing-respect-customer-who-come-shop-chinese-new-year_1150-35828.jpg",
-          imageAlt: "Female cosplayer with anime accessories",
-        },
         {
-          id: "t6",
+          id: "t6",          name: "Alex P.",          handle: "@FigurineFan",          testimonial: "Absolutely thrilled with my recent purchase! The detail on the action figure is phenomenal, and it arrived super fast. Postiiify is a gem.",          imageSrc: "http://img.b2bpic.net/free-photo/view-cartoon-character-shopping_23-2151656752.jpg",          imageAlt: "View of cartoon character shopping"},
-          name: "Alex P.",
-          handle: "@FigurineFan",
-          testimonial: "Absolutely thrilled with my recent purchase! The detail on the action figure is phenomenal, and it arrived super fast. Postiiify is a gem.",
-          imageSrc: "http://img.b2bpic.net/free-photo/view-cartoon-character-shopping_23-2151656752.jpg",
-          imageAlt: "View of cartoon character shopping",
-        },
       ]}
       title="What Our Collectors Say"
       description="Hear directly from our passionate community about their Postiiify experience and treasured finds."
@@ -361,30 +184,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "q1",
+          id: "q1",          title: "What payment methods do you accept?",          content: "We accept all major credit cards (Visa, MasterCard, Amex), PayPal, and other secure payment options. All transactions are encrypted for your safety."},
-          title: "What payment methods do you accept?",
-          content: "We accept all major credit cards (Visa, MasterCard, Amex), PayPal, and other secure payment options. All transactions are encrypted for your safety.",
-        },
         {
-          id: "q2",
+          id: "q2",          title: "How long does shipping take?",          content: "Shipping times vary based on your location and the product. Standard shipping typically takes 5-7 business days within the US, while international shipping can take 10-20 business days."},
-          title: "How long does shipping take?",
-          content: "Shipping times vary based on your location and the product. Standard shipping typically takes 5-7 business days within the US, while international shipping can take 10-20 business days.",
-        },
         {
-          id: "q3",
+          id: "q3",          title: "Do you offer international shipping?",          content: "Yes, we proudly ship our anime posters and action figures worldwide! Shipping costs and delivery times will be calculated at checkout."},
-          title: "Do you offer international shipping?",
-          content: "Yes, we proudly ship our anime posters and action figures worldwide! Shipping costs and delivery times will be calculated at checkout.",
-        },
         {
-          id: "q4",
+          id: "q4",          title: "What is your return policy?",          content: "We offer a 30-day return policy on all unopened and undamaged items. If you're not satisfied, please contact our support team for assistance."},
-          title: "What is your return policy?",
-          content: "We offer a 30-day return policy on all unopened and undamaged items. If you're not satisfied, please contact our support team for assistance.",
-        },
         {
-          id: "q5",
+          id: "q5",          title: "How do I track my order?",          content: "Once your order has shipped, you will receive a confirmation email with a tracking number. You can use this number on our website's 'Track Order' page or the carrier's website."},
-          title: "How do I track my order?",
-          content: "Once your order has shipped, you will receive a confirmation email with a tracking number. You can use this number on our website's 'Track Order' page or the carrier's website.",
-        },
       ]}
       title="Your Questions Answered"
       description="Find quick answers to common questions about our products, shipping, and order process. We're here to help you enjoy your collection."
@@ -399,22 +207,14 @@ export default function LandingPage() {
       description="Have a question about an order, a specific product, or just want to share your passion? We'd love to hear from you. Fill out the form below or reach out directly."
       inputs={[
         {
-          name: "name",
+          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
         },
         {
-          name: "email",
+          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
-          type: "email",
-          placeholder: "Your Email",
-          required: true,
         },
       ]}
       textarea={{
-        name: "message",
+        name: "message",        placeholder: "Your Message",        rows: 5,
-        placeholder: "Your Message",
-        rows: 5,
         required: true,
       }}
       imageSrc="http://img.b2bpic.net/free-photo/mystical-canyon-vista-with-stargazing_23-2152016851.jpg"
@@ -434,33 +234,23 @@ export default function LandingPage() {
       socialLinks={[
         {
           icon: Instagram,
-          href: "#",
+          href: "#",          ariaLabel: "Instagram"},
-          ariaLabel: "Instagram",
-        },
         {
           icon: Facebook,
-          href: "#",
+          href: "#",          ariaLabel: "Facebook"},
-          ariaLabel: "Facebook",
-        },
         {
           icon: Twitter,
-          href: "#",
+          href: "#",          ariaLabel: "Twitter"},
-          ariaLabel: "Twitter",
-        },
         {
           icon: Film,
-          href: "#",
+          href: "#",          ariaLabel: "YouTube"},
-          ariaLabel: "YouTube",
-        },
         {
           icon: Bell,
-          href: "#",
+          href: "#",          ariaLabel: "Discord"},
-          ariaLabel: "Discord",
-        },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
+  --background: #080000;
-  --card: #dad6cd;
+  --card: #1e0d0d;
-  --foreground: #2a2928;
+  --foreground: #ffe6e6;
-  --primary-cta: #2a2928;
+  --primary-cta: #ff7a7a;
-  --primary-cta-text: #f5f4ef;
+  --primary-cta-text: #080000;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #1e0909;
-  --secondary-cta-text: #2a2928;
+  --secondary-cta-text: #ffe6e6;
-  --accent: #ffffff;
+  --accent: #7b4242;
-  --background-accent: #c6b180;
+  --background-accent: #65292c;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);