Merge version_2 into main

2026-05-07 05:03:41 +00:00
parent cf8eb3cc4a 343fddd9cc
commit ac95d05689
11 changed files with 154 additions and 100 deletions
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -3,21 +3,26 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import MediaAbout from '@/components/sections/about/MediaAbout';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

 export default function AboutPage() {
  return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <ReactLenis root>
-        <NavbarStyleApple brandName="AnimeVerse" navItems={[{ name: "Home", id: "/" }, { name: "About Us", id: "/about" }, { name: "Fitness Programs", id: "/programs" }, { name: "Trainers", id: "/trainers" }]} />
-        <div data-section="about">
-            <InlineImageSplitTextAbout 
-              heading={[{ type: "text", content: "About Our Fitness Community" }]}
+        <div id="nav" data-section="nav">
+           <NavbarStyleApple brandName="AnimeVerse" navItems={[{ name: "Home", id: "/" }, { name: "About Us", id: "/about" }, { name: "Fitness Programs", id: "/programs" }, { name: "Trainers", id: "/trainers" }]} />
+        </div>
+        <div id="about" data-section="about">
+            <MediaAbout 
+              title="About Our Fitness Community"
+              description="Welcome to our fitness sanctuary where we combine anime culture with wellness."
              useInvertedBackground={false}
            />
        </div>
-        <FooterBaseReveal logoText="AnimeVerse" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
+        <div id="footer" data-section="footer">
+           <FooterBaseReveal logoText="AnimeVerse" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
+        </div>
      </ReactLenis>
    </ThemeProvider>
  );
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -2,15 +2,19 @@

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import BlogCardOne from '@/components/sections/blog/BlogCardOne';
+import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';

 export default function BlogPage() {
  return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <ReactLenis root>
-        <NavbarStyleApple navItems={[{ name: "Home", id: "/" }, { name: "Success Stories", id: "/success-stories" }, { name: "Blog", id: "/blog" }, { name: "Gallery", id: "/gallery" }]} brandName="AnimeVerse" />
-        <BlogCardOne title="Our Blog" description="Latest news and insights from the team." animationType="slide-up" textboxLayout="default" blogs={[]} />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple navItems={[{ name: "Home", id: "/" }, { name: "Success Stories", id: "/success-stories" }, { name: "Blog", id: "/blog" }, { name: "Gallery", id: "/gallery" }]} brandName="AnimeVerse" />
+        </div>
+        <div id="blog" data-section="blog">
+          <BlogCardTwo title="Our Blog" description="Latest news and insights from the team." animationType="slide-up" textboxLayout="default" useInvertedBackground={false} blogs={[]} />
+        </div>
      </ReactLenis>
    </ThemeProvider>
  );
--- a/src/app/bmi-calculator/page.tsx
+++ b/src/app/bmi-calculator/page.tsx
@@ -17,11 +17,13 @@ export default function BMICalculator() {
  };

  return (
-    <ThemeProvider>
-      <NavbarStyleApple 
-        navItems={[{name: "Home", id: "/"}, {name: "Pricing", id: "/membership-plans"}, {name: "Nutrition", id: "/diet-nutrition"}, {name: "BMI Calculator", id: "/bmi-calculator"}]}
-        brandName="AnimeVerse" 
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[{name: "Home", id: "/"}, {name: "Pricing", id: "/membership-plans"}, {name: "Nutrition", id: "/diet-nutrition"}, {name: "BMI Calculator", id: "/bmi-calculator"}]}
+          brandName="AnimeVerse" 
+        />
+      </div>
      <div className="pt-32 pb-20 px-6 max-w-2xl mx-auto text-center">
        <h1 className="text-4xl font-bold mb-6">BMI Calculator</h1>
        <div className="flex flex-col gap-4 mb-6">
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -8,25 +8,29 @@ import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

 const navItems = [
  { name: "Home", id: "/" },
-  { name: "Trending", id: "/#trending" },
-  { name: "Movies", id: "/#movies" },
-  { name: "Contact Us", id: "/contact" },
+  { name: "Contact", id: "/contact" },
  { name: "Login", id: "/login" }
 ];

 export default function ContactPage() {
  return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <ReactLenis root>
-        <NavbarStyleApple navItems={navItems} brandName="AnimeVerse" />
-        <ContactCenter 
-            title="Contact Us"
-            description="Reach out for any inquiries or support."
-            tag="Contact"
-            background={{ variant: "sparkles-gradient" }}
-            useInvertedBackground={false}
-        />
-        <FooterBaseReveal logoText="AnimeVerse" columns={[]} />
+        <div id="nav" data-section="nav">
+           <NavbarStyleApple navItems={navItems} brandName="AnimeVerse" />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactCenter 
+              title="Contact Us"
+              description="Reach out for any inquiries or support."
+              tag="Contact"
+              background={{ variant: "sparkles-gradient" }}
+              useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+           <FooterBaseReveal logoText="AnimeVerse" columns={[]} />
+        </div>
      </ReactLenis>
    </ThemeProvider>
  );
--- a/src/app/diet-nutrition/page.tsx
+++ b/src/app/diet-nutrition/page.tsx
@@ -2,28 +2,30 @@

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import { Apple, Leaf, Utensils } from "lucide-react";

 export default function NutritionPage() {
  return (
-    <ThemeProvider>
-      <NavbarStyleApple 
-        navItems={[{name: "Home", id: "/"}, {name: "Pricing", id: "/membership-plans"}, {name: "Nutrition", id: "/diet-nutrition"}, {name: "BMI Calculator", id: "/bmi-calculator"}]}
-        brandName="AnimeVerse" 
-      />
-      <FeatureCardTwentySix
-        title="Nutrition Guides"
-        description="Fuel your body properly for an active lifestyle."
-        textboxLayout="default"
-        useInvertedBackground={false}
-        features={[
-            { title: "Healthy Eating", description: "Balanced daily meal plans.", buttonIcon: Apple },
-            { title: "Plant-based", description: "Nutrient dense plant guides.", buttonIcon: Leaf },
-            { title: "Performance", description: "Fuel for high energy days.", buttonIcon: Utensils },
-            { title: "Recovery", description: "Post-workout nourishment.", buttonIcon: Utensils }
-        ]}
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[{name: "Home", id: "/"}, {name: "Pricing", id: "/membership-plans"}, {name: "Nutrition", id: "/diet-nutrition"}, {name: "BMI Calculator", id: "/bmi-calculator"}]}
+          brandName="AnimeVerse" 
+        />
+      </div>
+      <div id="nutrition" data-section="nutrition">
+        <FeatureCardSix
+          title="Nutrition Guides"
+          description="Fuel your body properly for an active lifestyle."
+          textboxLayout="default"
+          useInvertedBackground={false}
+          features={[
+              { title: "Healthy Eating", description: "Balanced daily meal plans.", imageSrc: "/placeholder.jpg" },
+              { title: "Plant-based", description: "Nutrient dense plant guides.", imageSrc: "/placeholder.jpg" }
+          ]}
+        />
+      </div>
    </ThemeProvider>
  );
 }
--- a/src/app/gallery/page.tsx
+++ b/src/app/gallery/page.tsx
@@ -7,10 +7,14 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp

 export default function GalleryPage() {
  return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <ReactLenis root>
-        <NavbarStyleApple navItems={[{ name: "Home", id: "/" }, { name: "Success Stories", id: "/success-stories" }, { name: "Blog", id: "/blog" }, { name: "Gallery", id: "/gallery" }]} brandName="AnimeVerse" />
-        <ProductCardTwo title="Gallery" description="Explore our visual collection." gridVariant="bento-grid" animationType="blur-reveal" textboxLayout="default" products={[]} />
+        <div id="nav" data-section="nav">
+           <NavbarStyleApple navItems={[{ name: "Home", id: "/" }, { name: "Success Stories", id: "/success-stories" }, { name: "Blog", id: "/blog" }, { name: "Gallery", id: "/gallery" }]} brandName="AnimeVerse" />
+        </div>
+        <div id="gallery" data-section="gallery">
+          <ProductCardTwo title="Gallery" description="Explore our visual collection." gridVariant="bento-grid" animationType="blur-reveal" textboxLayout="default" useInvertedBackground={false} products={[]} />
+        </div>
      </ReactLenis>
    </ThemeProvider>
  );
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -8,28 +8,29 @@ import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

 const navItems = [
  { name: "Home", id: "/" },
-  { name: "Trending", id: "/#trending" },
-  { name: "Movies", id: "/#movies" },
-  { name: "Contact Us", id: "/contact" },
+  { name: "Contact", id: "/contact" },
  { name: "Login", id: "/login" }
 ];

 export default function LoginPage() {
  return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <ReactLenis root>
-        <NavbarStyleApple navItems={navItems} brandName="AnimeVerse" />
-        <div className="min-h-screen flex items-center justify-center pt-20">
-            <ContactCenter 
-                title="Login"
-                description="Access your account and continue watching."
-                tag="Auth"
-                buttonText="Sign In"
-                background={{ variant: "plain" }}
-                useInvertedBackground={false}
-            />
+        <div id="nav" data-section="nav">
+           <NavbarStyleApple navItems={navItems} brandName="AnimeVerse" />
+        </div>
+        <div id="login" data-section="login">
+          <ContactCenter 
+              title="Login"
+              description="Access your account and continue watching."
+              tag="Auth"
+              background={{ variant: "plain" }}
+              useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+           <FooterBaseReveal logoText="AnimeVerse" columns={[]} />
        </div>
-        <FooterBaseReveal logoText="AnimeVerse" columns={[]} />
      </ReactLenis>
    </ThemeProvider>
  );
--- a/src/app/membership-plans/page.tsx
+++ b/src/app/membership-plans/page.tsx
@@ -2,24 +2,30 @@

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
+import PricingCardNine from '@/components/sections/pricing/PricingCardNine';

 export default function MembershipPlans() {
  return (
-    <ThemeProvider>
-      <NavbarStyleApple 
-        navItems={[{name: "Home", id: "/"}, {name: "Pricing", id: "/membership-plans"}, {name: "Nutrition", id: "/diet-nutrition"}, {name: "BMI Calculator", id: "/bmi-calculator"}]}
-        brandName="AnimeVerse" 
-      />
-      <PricingCardOne 
-        title="Membership Plans"
-        description="Choose the plan that fits your anime lifestyle."
-        animationType="slide-up"
-        plans={[
-          { id: "free", badge: "Basic", price: "$0", subtitle: "Essential access", features: ["Access to library", "Limited quality"] },
-          { id: "pro", badge: "Premium", price: "$9.99", subtitle: "Unlimited access", features: ["4K streaming", "Offline viewing", "No ads"] }
-        ]}
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[{name: "Home", id: "/"}, {name: "Pricing", id: "/membership-plans"}, {name: "Nutrition", id: "/diet-nutrition"}, {name: "BMI Calculator", id: "/bmi-calculator"}]}
+          brandName="AnimeVerse" 
+        />
+      </div>
+      <div id="pricing" data-section="pricing">
+        <PricingCardNine 
+          title="Membership Plans"
+          description="Choose the plan that fits your anime lifestyle."
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          plans={[
+            { id: "free", title: "Basic", price: "$0", period: "/mo", features: ["Access to library", "Limited quality"], button: { text: "Sign Up" } },
+            { id: "pro", title: "Premium", price: "$9.99", period: "/mo", features: ["4K streaming", "Offline viewing", "No ads"], button: { text: "Go Pro" } }
+          ]}
+        />
+      </div>
    </ThemeProvider>
  );
 }
--- a/src/app/programs/page.tsx
+++ b/src/app/programs/page.tsx
@@ -3,26 +3,38 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

 export default function ProgramsPage() {
  return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <ReactLenis root>
-        <NavbarStyleApple brandName="AnimeVerse" navItems={[{ name: "Home", id: "/" }, { name: "About Us", id: "/about" }, { name: "Fitness Programs", id: "/programs" }, { name: "Trainers", id: "/trainers" }]} />
-        <div data-section="programs">
-            <ProductCardThree 
+        <div id="nav" data-section="nav">
+           <NavbarStyleApple brandName="AnimeVerse" navItems={[{ name: "Home", id: "/" }, { name: "About Us", id: "/about" }, { name: "Fitness Programs", id: "/programs" }, { name: "Trainers", id: "/trainers" }]} />
+        </div>
+        <div id="programs" data-section="programs">
+            <TeamCardEleven 
              title="Our Fitness Programs"
              animationType="slide-up"
-              gridVariant="bento-grid"
-              products={[
-                { id: "p1", name: "Yoga Flow", price: "$49", imageSrc: "/placeholder.jpg" },
-                { id: "p2", name: "High Intensity", price: "$89", imageSrc: "/placeholder.jpg" }
+              textboxLayout="default"
+              useInvertedBackground={false}
+              description="Explore our curated fitness programs designed for all levels."
+              groups={[
+                { 
+                    id: "g1", 
+                    groupTitle: "Fitness Classes", 
+                    members: [
+                        { id: "p1", title: "Yoga Flow", subtitle: "Flexibility", detail: "Join for daily balance.", imageSrc: "/placeholder.jpg" },
+                        { id: "p2", title: "HIIT", subtitle: "Cardio", detail: "Burn energy fast.", imageSrc: "/placeholder.jpg" }
+                    ]
+                }
              ]}
            />
        </div>
-        <FooterBaseReveal logoText="AnimeVerse" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
+        <div id="footer" data-section="footer">
+           <FooterBaseReveal logoText="AnimeVerse" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
+        </div>
      </ReactLenis>
    </ThemeProvider>
  );
--- a/src/app/success-stories/page.tsx
+++ b/src/app/success-stories/page.tsx
@@ -2,17 +2,23 @@

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';

 export default function SuccessStoriesPage() {
  return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <ReactLenis root>
-        <NavbarStyleApple navItems={[{ name: "Home", id: "/" }, { name: "Success Stories", id: "/success-stories" }, { name: "Blog", id: "/blog" }, { name: "Gallery", id: "/gallery" }]} brandName="AnimeVerse" />
-        <MetricCardFourteen title="Transformations" tag="Impact" metrics={[{ id: '1', value: '10k+', description: 'Stories Shared' }, { id: '2', value: '500+', description: 'Community Events' }]} />
-        <TestimonialCardFive title="Success Stories" description="See how our community has evolved." textboxLayout="default" testimonials={[]} />
+        <div id="nav" data-section="nav">
+           <NavbarStyleApple navItems={[{ name: "Home", id: "/" }, { name: "Success Stories", id: "/success-stories" }, { name: "Blog", id: "/blog" }, { name: "Gallery", id: "/gallery" }]} brandName="AnimeVerse" />
+        </div>
+        <div id="metrics" data-section="metrics">
+           <MetricCardFourteen title="Transformations" tag="Impact" metrics={[{ id: '1', value: '10k+', description: 'Stories Shared' }, { id: '2', value: '500+', description: 'Community Events' }]} useInvertedBackground={false} />
+        </div>
+        <div id="testimonials" data-section="testimonials">
+           <TestimonialCardFifteen testimonial="This community changed my life!" rating={5} author="Alex" avatars={[]} ratingAnimation="slide-up" avatarsAnimation="slide-up" useInvertedBackground={false} />
+        </div>
      </ReactLenis>
    </ThemeProvider>
  );
--- a/src/app/trainers/page.tsx
+++ b/src/app/trainers/page.tsx
@@ -8,22 +8,30 @@ import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

 export default function TrainersPage() {
  return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <ReactLenis root>
-        <NavbarStyleApple brandName="AnimeVerse" navItems={[{ name: "Home", id: "/" }, { name: "About Us", id: "/about" }, { name: "Fitness Programs", id: "/programs" }, { name: "Trainers", id: "/trainers" }]} />
-        <div data-section="trainers">
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple brandName="AnimeVerse" navItems={[{ name: "Home", id: "/" }, { name: "About Us", id: "/about" }, { name: "Fitness Programs", id: "/programs" }, { name: "Trainers", id: "/trainers" }]} />
+        </div>
+        <div id="trainers" data-section="trainers">
            <TeamCardEleven 
              title="Meet Our Expert Trainers"
              animationType="slide-up"
              textboxLayout="default"
+              useInvertedBackground={false}
+              description="Learn from the best in the industry."
              groups={[
                {
-                  id: "g1",                  groupTitle: "Core Team",                  members: [{ id: "m1", title: "Coach Alex", subtitle: "Expertise: Cardio", detail: "10+ years experience", imageSrc: "/placeholder.jpg" }]
+                  id: "g1", 
+                  groupTitle: "Core Team", 
+                  members: [{ id: "m1", title: "Coach Alex", subtitle: "Expertise: Cardio", detail: "10+ years experience", imageSrc: "/placeholder.jpg" }]
                }
              ]}
            />
        </div>
-        <FooterBaseReveal logoText="AnimeVerse" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal logoText="AnimeVerse" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
+        </div>
      </ReactLenis>
    </ThemeProvider>
  );