Update src/app/services/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -31,92 +31,43 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Features", id: "features" },
+        { name: "Services", id: "/services" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="Snake Arena"
       button={{
-        text: "Play Now",
-        href: "#game",
-      }}
+        text: "Play Now",        href: "#game"}}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboard
       background={{
-        variant: "sparkles-gradient",
-      }}
+        variant: "sparkles-gradient"}}
       title="Rediscover the Classics: Snake, Reimagined."
       description="Experience the thrill of the ultimate retro game, now with modern graphics, smooth controls, and competitive leaderboards."
       buttons={[
-        {
-          text: "Start Playing",
-          href: "#game",
-        },
+        { text: "Start Playing", href: "#game" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/close-up-crocodile-neon-light_23-2151835029.jpg?_wi=1"
       imageAlt="Modern Snake Game Arena"
       avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/fantasy-snake-illustration_23-2151588900.jpg",
-          alt: "Player 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/digital-art-snake-illustration_23-2151674357.jpg",
-          alt: "Player 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/bright-colorful-neon-background_23-2150689412.jpg",
-          alt: "Player 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-crocodile-neon-light_23-2151835024.jpg",
-          alt: "Player 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/fantasy-snake-illustration_23-2151588911.jpg",
-          alt: "Player 5",
-        },
+        { src: "http://img.b2bpic.net/free-photo/fantasy-snake-illustration_23-2151588900.jpg", alt: "Player 1" },
+        { src: "http://img.b2bpic.net/free-photo/digital-art-snake-illustration_23-2151674357.jpg", alt: "Player 2" },
+        { src: "http://img.b2bpic.net/free-photo/bright-colorful-neon-background_23-2150689412.jpg", alt: "Player 3" },
+        { src: "http://img.b2bpic.net/free-photo/close-up-crocodile-neon-light_23-2151835024.jpg", alt: "Player 4" },
+        { src: "http://img.b2bpic.net/free-photo/fantasy-snake-illustration_23-2151588911.jpg", alt: "Player 5" },
       ]}
       avatarText="Join 150k+ active players"
       marqueeItems={[
-        {
-          type: "text",
-          text: "Retro Vibes",
-        },
-        {
-          type: "text",
-          text: "Modern Engine",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/old-device-studio_23-2150756321.jpg",
-          alt: "Retro",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/old-device-studio_23-2150756319.jpg",
-          alt: "High Speed",
-        },
-        {
-          type: "text",
-          text: "Global Arena",
-        },
+        { type: "text", text: "Retro Vibes" },
+        { type: "text", text: "Modern Engine" },
+        { type: "image", src: "http://img.b2bpic.net/free-photo/old-device-studio_23-2150756321.jpg", alt: "Retro" },
+        { type: "image", src: "http://img.b2bpic.net/free-photo/old-device-studio_23-2150756319.jpg", alt: "High Speed" },
+        { type: "text", text: "Global Arena" },
       ]}
     />
   </div>
@@ -136,21 +87,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       negativeCard={{
         items: [
-          "No annoying ads",
-          "Zero latency lag",
-          "Minimalist visual clutter",
-          "No forced registration",
-          "No battery drain",
-        ],
+          "No annoying ads",          "Zero latency lag",          "Minimalist visual clutter",          "No forced registration",          "No battery drain"],
       }}
       positiveCard={{
         items: [
-          "Smooth 60FPS movement",
-          "Responsive touch controls",
-          "Dynamic difficulty levels",
-          "Customizable skins",
-          "Offline mode support",
-        ],
+          "Smooth 60FPS movement",          "Responsive touch controls",          "Dynamic difficulty levels",          "Customizable skins",          "Offline mode support"],
       }}
       title="Gameplay Experience"
       description="Why our Snake Game stands out among the rest of the classics."
@@ -163,24 +104,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",
-          icon: Award,
-          title: "High Scores",
-          value: "1.2M+",
-        },
-        {
-          id: "m2",
-          icon: Zap,
-          title: "Total Matches",
-          value: "50M+",
-        },
-        {
-          id: "m3",
-          icon: Users,
-          title: "Active Players",
-          value: "150K+",
-        },
+        { id: "m1", icon: Award, title: "High Scores", value: "1.2M+" },
+        { id: "m2", icon: Zap, title: "Total Matches", value: "50M+" },
+        { id: "m3", icon: Users, title: "Active Players", value: "150K+" },
       ]}
       title="Arena Statistics"
       description="Tracking high scores and player engagement globally."
@@ -192,61 +118,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",
-          name: "Alex R.",
-          date: "2024-05-12",
-          title: "Pro Gamer",
-          quote: "The controls feel so fluid. This is definitely the best version of Snake available right now.",
-          tag: "Game Master",
-          avatarSrc: "http://img.b2bpic.net/free-photo/digital-art-snake-illustration_23-2151674409.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-crocodile-neon-light_23-2151835029.jpg?_wi=2",
-          imageAlt: "neon snake game interface digital art",
-        },
-        {
-          id: "t2",
-          name: "Sarah K.",
-          date: "2024-05-10",
-          title: "Tech Enthusiast",
-          quote: "I love the minimalist design. It's clean, fast, and brings back so many memories.",
-          tag: "Beta Tester",
-          avatarSrc: "http://img.b2bpic.net/free-photo/isolated-cassete-with-copy-space_1194-640077.jpg",
-          imageSrc: "http://img.b2bpic.net/free-vector/futuristic-callouts-titles-scifi-tech-borders-hud-frames_88138-989.jpg",
-          imageAlt: "neon snake game interface digital art",
-        },
-        {
-          id: "t3",
-          name: "Mike B.",
-          date: "2024-05-09",
-          title: "Casual Player",
-          quote: "Perfect for a quick 5-minute break. Highly addictive!",
-          tag: "Casual Gamer",
-          avatarSrc: "http://img.b2bpic.net/free-vector/neon-sign-template_1017-7463.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-with-blank-white-screen-white-background_9975-133657.jpg?_wi=1",
-          imageAlt: "neon snake game interface digital art",
-        },
-        {
-          id: "t4",
-          name: "Jessica L.",
-          date: "2024-05-08",
-          title: "Designer",
-          quote: "Visually stunning. The neon aesthetic really pops on my display.",
-          tag: "Visual Fan",
-          avatarSrc: "http://img.b2bpic.net/free-photo/gradient-technology-background_23-2151895874.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-crocodile-neon-light_23-2151835045.jpg",
-          imageAlt: "neon snake game interface digital art",
-        },
-        {
-          id: "t5",
-          name: "David T.",
-          date: "2024-05-07",
-          title: "Dev",
-          quote: "Optimized to perfection. No frame drops at all.",
-          tag: "Dev Review",
-          avatarSrc: "http://img.b2bpic.net/free-photo/fantasy-snake-illustration_23-2151588900.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-art-snake-illustration_23-2151674357.jpg",
-          imageAlt: "neon snake game interface digital art",
-        },
+        { id: "t1", name: "Alex R.", date: "2024-05-12", title: "Pro Gamer", quote: "The controls feel so fluid. This is definitely the best version of Snake available right now.", tag: "Game Master", avatarSrc: "http://img.b2bpic.net/free-photo/digital-art-snake-illustration_23-2151674409.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-crocodile-neon-light_23-2151835029.jpg?_wi=2", imageAlt: "neon snake game interface digital art" },
+        { id: "t2", name: "Sarah K.", date: "2024-05-10", title: "Tech Enthusiast", quote: "I love the minimalist design. It's clean, fast, and brings back so many memories.", tag: "Beta Tester", avatarSrc: "http://img.b2bpic.net/free-photo/isolated-cassete-with-copy-space_1194-640077.jpg", imageSrc: "http://img.b2bvector/futuristic-callouts-titles-scifi-tech-borders-hud-frames_88138-989.jpg", imageAlt: "neon snake game interface digital art" },
+        { id: "t3", name: "Mike B.", date: "2024-05-09", title: "Casual Player", quote: "Perfect for a quick 5-minute break. Highly addictive!", tag: "Casual Gamer", avatarSrc: "http://img.b2bpic.net/free-vector/neon-sign-template_1017-7463.jpg", imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-with-blank-white-screen-white-background_9975-133657.jpg?_wi=1", imageAlt: "neon snake game interface digital art" },
       ]}
       title="Player Voices"
       description="What our community is saying about the game."
@@ -257,21 +131,9 @@ export default function LandingPage() {
       <FaqSplitText
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "f1",
-          title: "Is the game free?",
-          content: "Yes, our game is completely free to play.",
-        },
-        {
-          id: "f2",
-          title: "Can I play on mobile?",
-          content: "Absolutely, our game is fully optimized for touch devices.",
-        },
-        {
-          id: "f3",
-          title: "Will there be leaderboards?",
-          content: "Global leaderboards are coming in the next major update!",
-        },
+        { id: "f1", title: "Is the game free?", content: "Yes, our game is completely free to play." },
+        { id: "f2", title: "Can I play on mobile?", content: "Absolutely, our game is fully optimized for touch devices." },
+        { id: "f3", title: "Will there be leaderboards?", content: "Global leaderboards are coming in the next major update!" },
       ]}
       sideTitle="Frequently Asked Questions"
       faqsAnimation="blur-reveal"
@@ -284,22 +146,10 @@ export default function LandingPage() {
       title="Get in Touch"
       description="Have feedback or suggestions? We'd love to hear from our players."
       inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Your Email",
-        },
+        { name: "name", type: "text", placeholder: "Your Name" },
+        { name: "email", type: "email", placeholder: "Your Email" },
       ]}
-      textarea={{
-        name: "message",
-        placeholder: "What's on your mind?",
-        rows: 4,
-      }}
+      textarea={{ name: "message", placeholder: "What's on your mind?", rows: 4 }}
       imageSrc="http://img.b2bpic.net/free-photo/modern-smartphone-with-blank-white-screen-white-background_9975-133657.jpg?_wi=2"
       imageAlt="Get in touch"
     />
@@ -308,14 +158,8 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="Snake Arena"
-      leftLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Terms of Service",
-        href: "#",
-      }}
+      leftLink={{ text: "Privacy Policy", href: "#" }}
+      rightLink={{ text: "Terms of Service", href: "#" }}
     />
   </div>
       </ReactLenis>

src/app/services/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="mediumLargeSizeMediumTitles"
+        background="fluid"
+        cardStyle="glass-depth"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingInline
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "About", id: "/#about" },
+                { name: "Features", id: "/#features" },
+                { name: "Services", id: "/services" },
+                { name: "Contact", id: "/#contact" },
+            ]}
+            brandName="Snake Arena"
+            button={{
+                text: "Play Now",                href: "/#game"}}
+            />
+        </div>
+
+        <div id="services" data-section="services">
+            <FeatureCardSeven
+                animationType="slide-up"
+                textboxLayout="split"
+                title="Our Services"
+                description="Explore the various professional gaming and development services we offer."
+                useInvertedBackground={false}
+                features={[
+                    { title: "Game Development", description: "High-performance custom game solutions for web and mobile.", imageSrc: "http://img.b2bpic.net/free-photo/digital-art-snake-illustration_23-2151674357.jpg" },
+                    { title: "UI/UX Design", description: "Modern, user-centric interfaces designed for maximum engagement.", imageSrc: "http://img.b2bpic.net/free-photo/gradient-technology-background_23-2151895874.jpg" },
+                    { title: "Performance Consulting", description: "Expert optimization to ensure your apps run at 60FPS on any device.", imageSrc: "http://img.b2bpic.net/free-photo/old-device-studio_23-2150756319.jpg" },
+                ]}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterLogoReveal
+                logoText="Snake Arena"
+                leftLink={{ text: "Privacy Policy", href: "#" }}
+                rightLink={{ text: "Terms of Service", href: "#" }}
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}