Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -7,11 +7,103 @@ import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { Award, Crown, Sparkles, Target, TrendingUp, Zap, Clock, Flame } from 'lucide-react';
+import { Award, Crown, Sparkles, Target, TrendingUp, Zap, Clock, Flame, Quote, ChevronLeft, ChevronRight } from 'lucide-react';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [currentTestimonialIndex, setCurrentTestimonialIndex] = useState(0);
+  const [currentFooterPage, setCurrentFooterPage] = useState(0);
+
+  const testimonialData = [
+    {
+      id: "1",      name: "Alex Chen",      handle: "@alexchen",      testimonial: "AuraRaffle transformed my Web3 experience. The VRF-powered draws are truly fair and transparent. I've already won twice!",      rating: 5,
+      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AitAjL9fbSoaIbn1RTQ8DfPTmS/professional-headshot-portrait-of-a-succ-1773335612698-87db7823.png",      imageAlt: "Alex Chen"
+    },
+    {
+      id: "2",      name: "Maya Patel",      handle: "@mayapatel",      testimonial: "The quest system is addictive in the best way. I've earned so many free tickets just by engaging with partner projects. Love the gamification!",      rating: 5,
+      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AitAjL9fbSoaIbn1RTQ8DfPTmS/professional-headshot-portrait-of-a-raff-1773335612681-90f02a56.png",      imageAlt: "Maya Patel"
+    },
+    {
+      id: "3",      name: "Marcus Johnson",      handle: "@marcusj",      testimonial: "The Premium rank was worth every penny. Priority support and exclusive raffles have made my portfolio growth strategy much clearer.",      rating: 5,
+      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AitAjL9fbSoaIbn1RTQ8DfPTmS/professional-headshot-of-winner-marcus-j-1773335612783-5879e36d.png",      imageAlt: "Marcus Johnson"
+    },
+    {
+      id: "4",      name: "Sofia Rodriguez",      handle: "@sofiar",      testimonial: "Best raffle platform I've used in crypto. The transparency and fairness metrics are impressive. Already convinced my friends to join!",      rating: 5,
+      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AitAjL9fbSoaIbn1RTQ8DfPTmS/professional-headshot-of-sofia-rodriguez-1773335612381-d82c2d44.png",      imageAlt: "Sofia Rodriguez"
+    },
+    {
+      id: "5",      name: "James Kim",      handle: "@jamesk",      testimonial: "The chest opening mechanic is so satisfying. Combined with the real prizes, AuraRaffle keeps me engaged daily.",      rating: 5,
+      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AitAjL9fbSoaIbn1RTQ8DfPTmS/professional-portrait-of-james-kim-a-suc-1773335612990-1c5b0349.png",      imageAlt: "James Kim"
+    },
+    {
+      id: "6",      name: "Emma Wilson",      handle: "@emmaw",      testimonial: "Finally, a raffle platform that actually delivers. Payouts are fast, support is responsive, and everything feels legit.",      rating: 5,
+      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AitAjL9fbSoaIbn1RTQ8DfPTmS/professional-headshot-of-emma-wilson-raf-1773335612811-5ef89886.png",      imageAlt: "Emma Wilson"
+    }
+  ];
+
+  const footerLinks = [
+    {
+      items: [
+        { label: "Home", href: "/" },
+        { label: "Raffles", href: "#raffles" },
+        { label: "Ranks", href: "#ranks" }
+      ]
+    },
+    {
+      items: [
+        { label: "Quests", href: "#quests" },
+        { label: "Dashboard", href: "/dashboard" },
+        { label: "Referrals", href: "/referrals" }
+      ]
+    },
+    {
+      items: [
+        { label: "Terms of Service", href: "#" },
+        { label: "Privacy Policy", href: "#" },
+        { label: "Smart Contract Audits", href: "#" }
+      ]
+    },
+    {
+      items: [
+        { label: "Help Center", href: "#" },
+        { label: "Partner With Us", href: "#" },
+        { label: "Contact", href: "#" }
+      ]
+    },
+    {
+      items: [
+        { label: "Twitter / X", href: "https://twitter.com" },
+        { label: "Discord", href: "https://discord.com" },
+        { label: "Telegram", href: "https://telegram.org" }
+      ]
+    }
+  ];
+
+  const itemsPerPage = 3;
+  const totalPages = Math.ceil(footerLinks.length / itemsPerPage);
+  const currentFooterLinks = footerLinks.slice(
+    currentFooterPage * itemsPerPage,
+    (currentFooterPage + 1) * itemsPerPage
+  );
+
+  const handlePrevFooter = () => {
+    setCurrentFooterPage((prev) => (prev - 1 + totalPages) % totalPages);
+  };
+
+  const handleNextFooter = () => {
+    setCurrentFooterPage((prev) => (prev + 1) % totalPages);
+  };
+
+  const handlePrevTestimonial = () => {
+    setCurrentTestimonialIndex((prev) => (prev - 1 + testimonialData.length) % testimonialData.length);
+  };
+
+  const handleNextTestimonial = () => {
+    setCurrentTestimonialIndex((prev) => (prev + 1) % testimonialData.length);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="directional-hover"
@@ -241,77 +333,81 @@ export default function LandingPage() {
       </div>
 
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwelve
-          testimonials={[
-            {
-              id: "1",              name: "Alex Chen",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AitAjL9fbSoaIbn1RTQ8DfPTmS/professional-headshot-portrait-of-a-succ-1773335612698-87db7823.png",              imageAlt: "Alex Chen"
-            },
-            {
-              id: "2",              name: "Maya Patel",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AitAjL9fbSoaIbn1RTQ8DfPTmS/professional-headshot-portrait-of-a-raff-1773335612681-90f02a56.png",              imageAlt: "Maya Patel"
-            },
-            {
-              id: "3",              name: "Marcus Johnson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AitAjL9fbSoaIbn1RTQ8DfPTmS/professional-headshot-of-winner-marcus-j-1773335612783-5879e36d.png",              imageAlt: "Marcus Johnson"
-            },
-            {
-              id: "4",              name: "Sofia Rodriguez",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AitAjL9fbSoaIbn1RTQ8DfPTmS/professional-headshot-of-sofia-rodriguez-1773335612381-d82c2d44.png",              imageAlt: "Sofia Rodriguez"
-            },
-            {
-              id: "5",              name: "James Kim",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AitAjL9fbSoaIbn1RTQ8DfPTmS/professional-portrait-of-james-kim-a-suc-1773335612990-1c5b0349.png",              imageAlt: "James Kim"
-            },
-            {
-              id: "6",              name: "Emma Wilson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AitAjL9fbSoaIbn1RTQ8DfPTmS/professional-headshot-of-emma-wilson-raf-1773335612811-5ef89886.png",              imageAlt: "Emma Wilson"
-            }
-          ]}
-          cardTitle="Over 50,000 winners have cashed out through AuraRaffle with verified fair draws and transparent payouts."
-          cardTag="Recent Winners"
-          cardTagIcon={Award}
-          cardAnimation="blur-reveal"
-          useInvertedBackground={false}
-        />
+        <div className="relative">
+          <TestimonialCardThirteen
+            testimonials={[testimonialData[currentTestimonialIndex]]}
+            showRating={true}
+            title="What Our Winning Community Says"
+            description="Real stories from verified winners and active players in the AuraRaffle ecosystem."
+            tag="Player Testimonials"
+            tagIcon={Award}
+            tagAnimation="blur-reveal"
+            textboxLayout="default"
+            animationType="blur-reveal"
+            useInvertedBackground={false}
+          />
+          <div className="flex justify-center items-center gap-4 mt-8">
+            <button
+              onClick={handlePrevTestimonial}
+              className="p-2 rounded-full border border-accent/30 hover:bg-accent/10 transition-all"
+              aria-label="Previous testimonial"
+            >
+              <ChevronLeft className="w-5 h-5" />
+            </button>
+            <div className="flex gap-2">
+              {testimonialData.map((_, index) => (
+                <button
+                  key={index}
+                  onClick={() => setCurrentTestimonialIndex(index)}
+                  className={`w-2 h-2 rounded-full transition-all ${
+                    index === currentTestimonialIndex
+                      ? 'bg-primary-cta w-6'
+                      : 'bg-accent/30 hover:bg-accent/50'
+                  }`}
+                  aria-label={`Go to testimonial ${index + 1}`}
+                />
+              ))}
+            </div>
+            <button
+              onClick={handleNextTestimonial}
+              className="p-2 rounded-full border border-accent/30 hover:bg-accent/10 transition-all"
+              aria-label="Next testimonial"
+            >
+              <ChevronRight className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterLogoEmphasis
-          logoText="AuraRaffle"
-          columns={[
-            {
-              items: [
-                { label: "Home", href: "/" },
-                { label: "Raffles", href: "#raffles" },
-                { label: "Ranks", href: "#ranks" }
-              ]
-            },
-            {
-              items: [
-                { label: "Quests", href: "#quests" },
-                { label: "Dashboard", href: "/dashboard" },
-                { label: "Referrals", href: "/referrals" }
-              ]
-            },
-            {
-              items: [
-                { label: "Terms of Service", href: "#" },
-                { label: "Privacy Policy", href: "#" },
-                { label: "Smart Contract Audits", href: "#" }
-              ]
-            },
-            {
-              items: [
-                { label: "Help Center", href: "#" },
-                { label: "Partner With Us", href: "#" },
-                { label: "Contact", href: "#" }
-              ]
-            },
-            {
-              items: [
-                { label: "Twitter / X", href: "https://twitter.com" },
-                { label: "Discord", href: "https://discord.com" },
-                { label: "Telegram", href: "https://telegram.org" }
-              ]
-            }
-          ]}
-        />
+        <div className="relative">
+          <FooterLogoEmphasis
+            logoText="AuraRaffle"
+            columns={currentFooterLinks}
+          />
+          {totalPages > 1 && (
+            <div className="flex justify-center items-center gap-4 mt-8 pb-8">
+              <button
+                onClick={handlePrevFooter}
+                className="p-2 rounded-full border border-accent/30 hover:bg-accent/10 transition-all"
+                aria-label="Previous footer links"
+              >
+                <ChevronLeft className="w-5 h-5" />
+              </button>
+              <div className="text-sm text-accent/60">
+                {currentFooterPage + 1} / {totalPages}
+              </div>
+              <button
+                onClick={handleNextFooter}
+                className="p-2 rounded-full border border-accent/30 hover:bg-accent/10 transition-all"
+                aria-label="Next footer links"
+              >
+                <ChevronRight className="w-5 h-5" />
+              </button>
+            </div>
+          )}
+        </div>
       </div>
     </ThemeProvider>
   );
-}
+}