Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -12,7 +12,6 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import { Archive, Droplets, Leaf, Mountain, Shield, Zap, Star, Award } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -77,8 +76,8 @@ export default function LandingPage() {
       <MetricCardTwo
       animationType="slide-up"
       textboxLayout="split"
+      gridVariant="bento-grid"
       useInvertedBackground={true}
-      gridVariant="uniform-all-items-equal"
       metrics={[
         { id: "m1", value: "1300m", description: "Harvest site altitude" },
         { id: "m2", value: "99%", description: "Extraction concentration" },
@@ -92,6 +91,7 @@ export default function LandingPage() {
   <div id="feature" data-section="feature">
       <FeatureCardSeven
       textboxLayout="split"
+      animationType="slide-up"
       useInvertedBackground={false}
       features={[
         { title: "Wild-Sourced", description: "Authentically wild, non-cultivated harvest sites.", imageSrc: "http://img.b2bpic.net/free-photo/misty-mountain-valley-with-sunlight-breaking-through-clouds_84443-81827.jpg?_wi=1" },
@@ -119,6 +119,8 @@ export default function LandingPage() {
   <div id="faq" data-section="faq">
       <FaqSplitMedia
       useInvertedBackground={false}
+      textboxLayout="split"
+      description="Common technical questions."
       faqs={[
         { id: "q1", title: "Why high altitude?", content: "Higher oxygen-depleted environments force plants to develop stronger secondary metabolites." },
         { id: "q2", title: "Traceability?", content: "Each bottle contains a unique batch code mapped to our database." },
@@ -132,6 +134,7 @@ export default function LandingPage() {
 
   <div id="contact" data-section="contact">
       <ContactSplitForm
+      useInvertedBackground={true}
       title="Request Archival Access"
       description="Join the Kirkit botanical mailing list for upcoming harvest availability."
       inputs={[