Gameplay Mobile View

src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/Card/index.css

@@ -0,0 +1,3 @@
+.mob-gameplay-card{
+    @apply w-screen flex flex-col justify-start items-center gap-8
+}

src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/Card/index.tsx

@@ -0,0 +1,22 @@
+import { CardProps } from "../../../landing/gamePlayMechanics/Cards";
+import './index.css';
+
+/**
+ * A Card component that displays a gameplay mechanic.
+ * It includes an image, title, and description.
+ *
+ * @param {CardProps} props - The card properties.
+ * @param {string} props.title - The title of the card.
+ * @param {string} props.description - The description of the gameplay mechanic.
+ * @param {string} props.image - The image URL representing the gameplay mechanic.
+ * @returns {JSX.Element} A styled card with an image, title, and description.
+ */
+export default function Card({ title, description, image }: CardProps): JSX.Element {
+    return (
+        <div aria-roledescription='card' role="region" className="mob-gameplay-card">
+            <img src={image} alt={title} title={title} width={86} height={86} />
+            <h4 className='card-title'>{title}</h4>
+            <p className='card-description'>{description}</p>
+        </div>
+    );
+}

src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/index.css

@@ -0,0 +1,12 @@
+.mob-gameplay-container{
+    @apply min-h-screen h-auto relative;
+}
+
+.mob-gameplay-header{
+    @apply relative h-screen min-h-fit flex flex-col justify-center z-[100];
+    scroll-snap-align:center;
+}
+
+.gameplay-mechanics-cards-list{
+    @apply mt-4 flex justify-between items-center w-[300vw]
+}

src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/index.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useRef } from "react";
+import { CARDS } from "../../landing/gamePlayMechanics";
+import Card from "./Card";
+import './index.css';
+import gsap from "gsap";
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+/**
+ * Renders the header for gameplay mechanics.
+ * @param {Object} props - Component props
+ * @param {React.RefObject<HTMLDivElement>} props.headerRef - Ref for the header container
+ */
+const Header = ({ headerRef }: { headerRef: React.RefObject<HTMLDivElement> }) => {
+  return (
+    <div className='mob-gameplay-header' ref={headerRef}>
+      <h3 className='section-title'>Gameplay Mechanics</h3>
+      <p className='section-caption'>Explore the engaging system of Star Dust Adventures</p>
+    </div>
+  );
+};
+
+/**
+ * Renders a list of gameplay mechanic cards.
+ * @param {Object} props - Component props
+ * @param {React.RefObject<HTMLDivElement>} props.cardsRef - Ref for the cards container
+ */
+const CardList = ({ cardsRef }: { cardsRef: React.RefObject<HTMLDivElement> }) => {
+  return (
+    <div className="gameplay-mechanics-cards-list" ref={cardsRef}>
+      {CARDS.map((card, index) => (
+        <Card {...card} key={index} />
+      ))}
+    </div>
+  );
+};
+
+/**
+ * Renders the Gameplay Mechanics section with GSAP animations and ScrollTrigger.
+ */
+const GameplayMechanics = () => {
+  const headerRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLElement>(null);
+  const cardsRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (headerRef.current && containerRef.current && cardsRef.current) {
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: containerRef.current,
+          start: "top top",
+          end: "bottom bottom",
+          scrub: true,
+          pin: true,
+          anticipatePin: 1,
+        }
+      });
+
+      // Header animation
+      tl.fromTo(headerRef.current, { x: '100%', height: '100vh' }, { x: 0, height: 0, duration: 1 });
+
+      // Cards animation
+      const cards = cardsRef.current.querySelectorAll(".mob-gameplay-card");
+      tl.fromTo(cards, 
+        { opacity: 0.8, scale: 0.8 }, 
+        { xPercent: -100 * (cards.length - 1), ease: "none", opacity: 1, scale: 1 }
+      );
+
+      return () => {
+        ScrollTrigger.getAll().forEach(trigger => trigger.kill());
+      };
+    }
+  }, []);
+
+  return (
+    <section className='mob-gameplay-container' ref={containerRef}>
+      <Header headerRef={headerRef} />
+      <CardList cardsRef={cardsRef} />
+    </section>
+  );
+};
+
+export default GameplayMechanics;

src/StarDustAdventures_frontend/src/components/landing/GradientCover/index.css

@@ -1,5 +1,6 @@
 .gradient-cover{
-    @apply  md:min-h-screen h-auto w-screen relative bg-black flex flex-col justify-between lg:gap-32
+    @apply  md:min-h-screen h-auto w-screen relative bg-black flex flex-col justify-between lg:gap-32;
+    scroll-snap-type: y mandatory;
 }
 
 .right-purple-pattern{

src/StarDustAdventures_frontend/src/components/landing/GradientCover/index.tsx

@@ -1,17 +1,25 @@
 import React from 'react';
-import './index.css'
-export default function Cover({children} : React.PropsWithChildren<{}>){
-    return(
+import './index.css';
+
+/**
+ * A Cover component that wraps its children with a gradient background and patterned decorations.
+ *
+ * @param {React.PropsWithChildren<{}>} props - The props containing children elements.
+ * @param {React.ReactNode} props.children - The content to be rendered inside the cover.
+ * @returns {JSX.Element} A styled cover with children content.
+ */
+export default function Cover({ children }: React.PropsWithChildren<{}>): JSX.Element {
+    return (
         <div className="gradient-cover">
             <div className="right-purple-pattern">
-                <img src="/assets/images/square.svg" alt="purple-pattern" style={{display:'none'}} />
-                <div className="square-purple" style={{background:"url('/assets/images/square.svg')"}}></div>
+                <img src="/assets/images/square.svg" alt="purple-pattern" style={{ display: 'none' }} />
+                <div className="square-purple" style={{ background: "url('/assets/images/square.svg')" }}></div>
             </div>
             <div className="left-blue-pattern">
-                <img src="/assets/images/squares-left.svg" alt="blue-pattern" style={{display:'none'}} />
-                <div className="square-blue" style={{background:"url('/assets/images/squares-left.svg')"}}></div>
+                <img src="/assets/images/squares-left.svg" alt="blue-pattern" style={{ display: 'none' }} />
+                <div className="square-blue" style={{ background: "url('/assets/images/squares-left.svg')" }}></div>
             </div>
             {children}
         </div>
-    )
-}
+    );
+}

src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/Cards/index.css

@@ -1,6 +1,6 @@
 .gameplay-card{
     @apply relative flex flex-col lg:px-3 lg:py-4 justify-start items-center 
-    bg-transparent lg:gap-7 text-white lg:h-[50vh] z-[1] md:w-auto w-screen 
+    bg-transparent lg:gap-7 text-white lg:h-[50vh] z-[1] w-auto
 }
 
 .card-title{

src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/Cards/index.tsx

@@ -6,16 +6,19 @@ export type CardProps = {
     image : string;
 }
 
-/*
-    * Card Component
-    * - Component that renders a card with an image, title, and description
-    * - Returns a div with an image, title, and description
-    * - Used in Landing Page
-*/
-
+/**
+ * A Card component that displays a gameplay mechanic for desktop view. 
+ * It includes an image, title, and description.
+ *
+ * @param {CardProps} props - The card properties.
+ * @param {string} props.title - The title of the card.
+ * @param {string} props.description - The description of the gameplay mechanic.
+ * @param {string} props.image - The image URL representing the gameplay mechanic.
+ * @returns {JSX.Element} A styled card with an image, title, and description for large screen sizes ( > 768px).
+ */
 const Card = ({title, description,image}:CardProps)=>{
     return(
-        <div aria-roledescription='Gameplay Card' className="gameplay-card">
+        <div aria-roledescription='card' role='section' className="gameplay-card">
             <img src={image} alt={title} title={title} width={86} height={86}/>
             <h4 className='card-title'>{title}</h4>
             <p className='card-description'>{description}</p>

src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.css

@@ -1,6 +1,5 @@
 .gameplay-mechanics {
-    @apply w-full bg-transparent lg:mt-24 mt-12 text-white flex flex-col items-center justify-center py-3 md:min-h-min min-h-screen md:max-h-screen h-auto relative
-
+    @apply w-full bg-transparent lg:mt-24 mt-12 text-white flex flex-col items-center justify-center py-3 max-h-screen h-auto relative
     ;
 }
 
@@ -9,7 +8,7 @@
 }
 
 .gameplay-mechanics-cards {
-    @apply flex  md:flex-1 flex-row md:justify-between justify-center md:items-center items-center gap-6 relative mt-2 md:w-full w-[300vw] md:h-auto h-screen
+    @apply flex  md:flex-1 flex-row md:justify-between justify-center md:items-center items-center gap-6 relative mt-2 w-full h-auto
     overflow-x-hidden px-2 ;
 }