- {/* To Optimize Background Image Load */}
-
-
-
-
- Star Dust
-
-
- Adventures
-
-
- A Space Exploration Tap-to-Earn Game Powered By Crypto
-
- PLAY
-
-
- {
- window.innerWidth>1024?
-
-
- Overview of Star Dust Adventures
-
-
- A Tap-to-Earn Game Combining Exploration and Blockchain
-
-
- :
- <>
- }
-
+
- )
-}
+ );
+};
-export default Hero
\ No newline at end of file
+export default Hero;
diff --git a/src/StarDustAdventures_frontend/src/components/landing/hero/HeroBackground.jsx b/src/StarDustAdventures_frontend/src/components/landing/hero/HeroBackground.jsx
new file mode 100644
index 0000000..853643d
--- /dev/null
+++ b/src/StarDustAdventures_frontend/src/components/landing/hero/HeroBackground.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import BgOverlay from '../../re-usables/BgOverlay';
+
+const BackgroundSection = ({ image }) => {
+ return (
+
+
+
+
+ );
+};
+
+export default BackgroundSection;
diff --git a/src/StarDustAdventures_frontend/src/components/landing/hero/HeroDescription.jsx b/src/StarDustAdventures_frontend/src/components/landing/hero/HeroDescription.jsx
new file mode 100644
index 0000000..0272261
--- /dev/null
+++ b/src/StarDustAdventures_frontend/src/components/landing/hero/HeroDescription.jsx
@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from 'react';
+
+const AdditionalText = () => {
+ const [isDesktop, setIsDesktop] = useState(window.innerWidth > 1024);
+
+ useEffect(() => {
+ const handleResize = () => setIsDesktop(window.innerWidth > 1024);
+ window.addEventListener('resize', handleResize);
+
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
+ return (
+
+
Overview of Star Dust Adventures
+
+ A Tap-to-Earn Game Combining Exploration and Blockchain
+
+
+ );
+};
+
+export default AdditionalText;
diff --git a/src/StarDustAdventures_frontend/src/components/landing/hero/HeroTitleSection.jsx b/src/StarDustAdventures_frontend/src/components/landing/hero/HeroTitleSection.jsx
new file mode 100644
index 0000000..37f25a0
--- /dev/null
+++ b/src/StarDustAdventures_frontend/src/components/landing/hero/HeroTitleSection.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import Button from '../../re-usables/Button';
+
+const TextContent = () => {
+ return (
+
+ Star Dust
+ Adventures
+
+ A Space Exploration Tap-to-Earn Game Powered By Crypto
+
+ PLAY
+
+ );
+};
+
+export default TextContent;
diff --git a/src/StarDustAdventures_frontend/src/components/landing/hero/HeroVisual.jsx b/src/StarDustAdventures_frontend/src/components/landing/hero/HeroVisual.jsx
new file mode 100644
index 0000000..0199755
--- /dev/null
+++ b/src/StarDustAdventures_frontend/src/components/landing/hero/HeroVisual.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const AstronautAnimation = () => {
+ return (
+
+ );
+};
+
+export default AstronautAnimation;
diff --git a/src/StarDustAdventures_frontend/src/components/landing/hero/hero.css b/src/StarDustAdventures_frontend/src/components/landing/hero/hero.css
index cf635a3..1bdd73b 100644
--- a/src/StarDustAdventures_frontend/src/components/landing/hero/hero.css
+++ b/src/StarDustAdventures_frontend/src/components/landing/hero/hero.css
@@ -1,43 +1,69 @@
-.hero-sec{
- @apply w-screen min-h-screen h-auto relative flex flex-col items-center overflow-x-hidden
+.hero-section {
+ @apply w-screen min-h-screen h-auto relative flex flex-col items-center overflow-x-hidden;
}
-.hs-top-nav{
- @apply z-20 relative bg-[rgb(255,255,255,0.2)] py-8 flex items-center justify-center w-[98%] rounded-2xl
+
+.hero-top-nav {
+ @apply z-20 relative bg-[rgba(255,255,255,0.2)] py-8 flex items-center justify-center w-[98%] rounded-2xl;
}
-.hstp-text{
- @apply text-4xl font-semibold font-coin
+
+.hero-top-nav-text {
+ @apply text-4xl font-semibold font-coin;
}
-.hstp-btn{
- @apply justify-self-end absolute top-[2rem] right-[5vw] text-xl
+
+.hero-top-nav-button {
+ @apply absolute top-[2rem] right-[5vw] text-xl;
}
-.hs-text-cont{
- @apply flex flex-col items-center gap-5 mt-[20vh] z-20
+
+.hero-text-content {
+ @apply flex flex-col items-center gap-5 mt-[20vh] z-20;
}
-.hstc-title{
- @apply lg:text-9xl text-6xl xs:text-6xl sm:text-7xl md:text-8xl lg:w-[50vw] w-full font-medium text-center mb-6 font-coin
+
+.hero-title-main {
+ @apply lg:text-9xl text-6xl xs:text-6xl sm:text-7xl md:text-8xl lg:w-[90vw] w-full font-medium text-center mb-6 font-coin;
}
-.hstc-title1{
- @apply lg:text-9xl text-6xl xs:text-6xl sm:text-7xl md:text-8xl lg:w-[50vw] w-full font-medium text-center mb-0 font-coin
+
+.hero-title-sub {
+ @apply lg:text-9xl text-6xl xs:text-6xl sm:text-7xl md:text-8xl lg:w-[65vw] w-full font-medium text-center mb-0 font-coin;
}
-.play-button{
- @apply !text-2xl !min-w-32 w-20 xs:!min-w-40 xs:w-32 xs:!text-3xl md:!min-w-[185px] md:!text-4xl
+
+.play-button {
+ @apply !text-2xl !min-w-32 w-20 xs:!min-w-40 xs:w-32 xs:!text-3xl md:!min-w-[185px] md:!text-4xl;
}
-.hstc-text{
- @apply lg:text-xl text-xs w-1/2 mx-auto text-center text-wrap lg:mt-6 lg:mb-10 mt-5 mb-5 font-sf-pro-display
+
+.hero-description {
+ @apply lg:text-xl text-xs w-1/2 mx-auto text-center lg:mt-6 lg:mb-10 mt-5 mb-5 font-sf-pro-display;
}
-.hstc-btn{
- @apply text-5xl font-semibold mt-4 border-4 border-white py-3 px-12 bg-btnLight rounded-full
+
+.hero-button {
+ @apply text-5xl font-semibold mt-4 border-4 border-white py-3 px-12 bg-btnLight rounded-full;
}
-.hs-falling-astro{
- @apply z-20 lg:w-[30vw] w-[60vw] my-12
+.astronaut-animation {
+ @apply z-20 lg:w-[30vw] w-[60vw] my-12;
}
-.hs-text-cont2{
- @apply flex flex-col items-center my-4 text-white z-20
+
+.additional-text-section {
+ @apply flex flex-col items-center my-4 text-white z-20;
+}
+
+.additional-text-title {
+ @apply text-6xl font-semibold font-coin mb-7 text-center;
+}
+
+.additional-text-description {
+ @apply text-xl text-center mt-4 mb-7 font-sf-pro-display;
+}
+
+.hero-title-main {
+ background: linear-gradient(90deg, #FFFFFF 0%, #999999 100%);
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
}
-.hstc2-title{
- @apply text-6xl font-semibold font-coin mb-7 text-center
+
+.hero-title-sub {
+ background: linear-gradient(90deg, #FFFFFF 0%, #999999 100%);
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
}
-.hstc2-text{
- @apply text-xl text-center mt-4 mb-7 font-sf-pro-display
-}
\ No newline at end of file
diff --git a/src/StarDustAdventures_frontend/src/components/landing/loreStoryline/Lore.jsx b/src/StarDustAdventures_frontend/src/components/landing/loreStoryline/Lore.jsx
index 3df8b18..1e5a714 100644
--- a/src/StarDustAdventures_frontend/src/components/landing/loreStoryline/Lore.jsx
+++ b/src/StarDustAdventures_frontend/src/components/landing/loreStoryline/Lore.jsx
@@ -1,52 +1,151 @@
-import React from 'react'
-import './lore.css'
-import { loreText } from '../../../constants/text'
+import React, { useEffect } from 'react';
+import './lore.css';
+import { loreText } from '../../../constants/text';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
const Lore = () => {
+
+ useEffect(() => {
+ const applyAnimations = () => {
+ if (window.innerWidth <= 768) {
+
+
+ gsap.fromTo('.ls-title, .ls-text',
+ { opacity: 1, y: 0 },
+ {
+ scrollTrigger: {
+ trigger: '.ls-rotating-astro',
+ start: 'top-=100 top',
+ end: '+=200',
+ pin: '.ls-title, .ls-text',
+ pinSpacing: false,
+ scrub: true,
+ }
+ }
+ );
+
+
+ gsap.fromTo('.ls-rotating-astro',
+ { opacity: 1, scale: 1 },
+ {
+ scrollTrigger: {
+ trigger: '.lsm-first',
+ start: 'top center-=100',
+ end: '+=300',
+ pin: '.ls-rotating-astro',
+ pinSpacing: false,
+ scrub: true,
+ }
+ }
+ );
+
+ const sections = gsap.utils.toArray('.lsm-text-item');
+
+ sections.forEach((section, index) => {
+
+
+ gsap.fromTo(section,
+ { opacity: 0, y: 100 },
+ {
+ opacity: 1,
+ y: 0,
+ scrollTrigger: {
+ trigger: section,
+ start: 'top 80%',
+ end: 'bottom 60%',
+ toggleActions: 'play none none none',
+ scrub: true,
+ }
+ }
+ );
+
+
+ gsap.to('.ls-rotating-astro', {
+ opacity: 0.2,
+ scrollTrigger: {
+ trigger: section,
+ start: 'top 80%',
+ end: 'bottom 60%',
+ scrub: true,
+ }
+ });
+
+
+ if (index > 1) {
+ gsap.to(sections[index - 2], {
+ opacity: 0,
+ y: -100,
+ scrollTrigger: {
+ trigger: section,
+ start: 'top 80%',
+ end: 'top 60%',
+ scrub: true,
+ }
+ });
+ }
+ });
+ }
+ };
+
+ applyAnimations();
+ window.addEventListener('resize', applyAnimations);
+
+ return () => {
+ window.removeEventListener('resize', applyAnimations);
+ };
+ }, []);
+
return (
-
- {loreText.title}
-
-
- {loreText.subHeading}
-
-
-
+
+ {loreText.title}
+
+
+ {loreText.subHeading}
+
+
+
-
-
-
{loreText.data[0].title}
-
{loreText.data[0].text}
-
-
-
-
-
{loreText.data[1].title}
-
{loreText.data[1].text}
-
-
-
{loreText.data[2].title}
-
{loreText.data[2].text}
-
-
-
-
-
{loreText.data[3].title}
-
{loreText.data[3].text}
-
-
-
{loreText.data[4].title}
-
{loreText.data[4].text}
-
-
+
+
+
+
{loreText.data[0].title}
+
{loreText.data[0].text}
+
+
+
+
+
+
{loreText.data[1].title}
+
{loreText.data[1].text}
+
+
+
{loreText.data[2].title}
+
{loreText.data[2].text}
+
+
+
+
+
+
{loreText.data[3].title}
+
{loreText.data[3].text}
+
+
+
{loreText.data[4].title}
+
{loreText.data[4].text}
+
+
+
- )
+ );
}
-export default Lore
\ No newline at end of file
+export default Lore;
diff --git a/src/StarDustAdventures_frontend/src/components/landing/loreStoryline/lore.css b/src/StarDustAdventures_frontend/src/components/landing/loreStoryline/lore.css
index 8476911..b56732a 100644
--- a/src/StarDustAdventures_frontend/src/components/landing/loreStoryline/lore.css
+++ b/src/StarDustAdventures_frontend/src/components/landing/loreStoryline/lore.css
@@ -25,9 +25,53 @@
.lsm-text-item{
@apply flex flex-col items-center w-[300px]
}
-.lsm-ti-title{
- @apply mb-3 text-3xl font-semibold text-center
+.lsm-ti-title {
+ @apply mb-3 text-3xl font-semibold text-center text-white;
}
+
.lsm-ti-text{
- @apply w-[250px] text-center font-medium text-lg
-}
\ No newline at end of file
+ @apply w-[250px] text-center font-medium text-lg text-white;
+}
+
+@media screen and (max-width: 800px) {
+ .lsm-first , .lsm-second , .lsm-third {
+ display: block ;
+ position: sticky;
+ margin-left : auto ;
+ margin-right: auto ;
+ width: 100%;
+
+ }
+ .ls-main{
+ display: grid;
+
+ }
+ .ls-main img{
+ /* position: absolute ; */
+ width: 100vw;
+
+ }
+ .lsm-text-item{
+ margin-top: 100px;
+ }
+ .lore-sec{
+ text-align: center;
+ transform: translateY(-60px)
+ }
+ .ls-text{
+ width: 80%;
+ }
+ .lsm-second{
+ margin-bottom: 100px;
+ }
+ .lsm-side-right{
+ transform: translateX(20px);
+ }
+ .lsm-side-left{
+ transform: translateX(-1px);
+ }
+ .left-blue-pattern{
+ display:none;
+}
+
+}
diff --git a/src/StarDustAdventures_frontend/src/components/re-usables/Button/Button.tsx b/src/StarDustAdventures_frontend/src/components/re-usables/Button/Button.tsx
index b1edf85..28c79a4 100644
--- a/src/StarDustAdventures_frontend/src/components/re-usables/Button/Button.tsx
+++ b/src/StarDustAdventures_frontend/src/components/re-usables/Button/Button.tsx
@@ -1,66 +1,78 @@
-/*
- * Button Component for StarDust Adventures
- * This is a re-usable button component for the StarDust Adventures project
- * The button component has the following props:
- * variant: 'primary' | 'secondary'
- * size: 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
- * className: string
- * The button component is styled using Tailwind CSS
- * The button component is exported as default
- * clsx is used to combine multiple classes
- * @param {ButtonProps} props
- * @returns {JSX.Element}
- * @author @ArjunQBTech
- * @version 1.0
-*/
-
import clsx from "clsx";
import './index.css';
interface ButtonProps extends React.ButtonHTMLAttributes
{
- variant?: 'primary' | 'secondary';
- size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
- className?: string;
+ variant?: 'primary' | 'secondary';
+ size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+ className?: string;
}
+/**
+ * Reusable Button Component for StarDust Adventures
+ *
+ * This is a reusable button component that can be used across the StarDust Adventures project.
+ * It accepts various props to control its styling and behavior.
+ * The button uses Tailwind CSS classes, and `clsx` is used to combine the styles dynamically.
+ *
+ * @component
+ * @param {ButtonProps} props - The props for the Button component
+ * @param {'primary' | 'secondary'} [props.variant='primary'] - Defines the button variant (color scheme)
+ * @param {'sm' | 'md' | 'lg' | 'xl' | 'xxl'} [props.size='md'] - Defines the size of the button
+ * @param {string} [props.className] - Additional class names to apply custom styles
+ * @param {React.ReactNode} props.children - The content to be rendered inside the button
+ * @returns {JSX.Element} The rendered button component
+ *
+ * @example
+ * // Example usage of the Button component
+ *
+ * Click Me
+ *
+ *
+ * @example
+ *
+ * Submit
+ *
+ *
+ * @version 1.0
+ * @author @ArjunQBTech
+ */
+export default function Button({
+ children,
+ variant = 'primary',
+ size = 'md',
+ className = '',
+ ...props
+}: ButtonProps): JSX.Element {
-export default function Button(
- {
- children,
- variant = 'primary',
- size = 'md',
- className = '',
- ...props
- }: ButtonProps) {
+ const sizes = {
+ 'sm': 'text-sm min-w-[100px] text-[20px]',
+ 'md': 'min-w-[185px] text-[30px]',
+ 'lg': 'text-base px-6 py-2',
+ 'xl': 'text-lg px-8 py-3',
+ 'xxl': 'text-xl px-10 py-3'
+ };
- const sizes = {
- 'sm': 'text-sm min-w-[100px] text-[20px]',
- 'md': 'min-w-[185px] text-[30px]',
- 'lg': 'text-base px-6 py-2',
- 'xl' : 'text-lg px-8 py-3',
- 'xxl' : 'text-xl px-10 py-3'
- }
+ const vSpacing = {
+ 'sm': 'my-1',
+ 'md': 'my-2',
+ 'lg': 'my-3',
+ 'xl': 'my-4',
+ 'xxl': 'my-5'
+ };
- const vSpacing = {
- 'sm': 'my-1',
- 'md': 'my-2',
- 'lg': 'my-3',
- 'xl': 'my-4',
- 'xxl': 'my-5'
- }
-
- return (
-
-
- {children}
-
-
- )
-}
\ No newline at end of file
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/StarDustAdventures_frontend/src/index.css b/src/StarDustAdventures_frontend/src/index.css
index 9d0ba16..61b4033 100644
--- a/src/StarDustAdventures_frontend/src/index.css
+++ b/src/StarDustAdventures_frontend/src/index.css
@@ -22,13 +22,14 @@
html{
scroll-behavior: smooth;
+ scrollbar-width: none;
}
body {
overflow-x: hidden;
min-height: 100vh;
font-family: 'SF-Pro-Display', sans-serif;
-}
+ }
.app{
@apply min-h-screen bg-red-200
}
@@ -37,4 +38,4 @@ body {
}
.overlay-black{
@apply z-10 w-screen h-[100%] bg-[rgb(0,0,0,0.65)] absolute top-0 min-h-screen
-}
\ No newline at end of file
+}
diff --git a/src/StarDustAdventures_frontend/src/pages/Landing.jsx b/src/StarDustAdventures_frontend/src/pages/Landing.jsx
index 299ba66..da61ebc 100644
--- a/src/StarDustAdventures_frontend/src/pages/Landing.jsx
+++ b/src/StarDustAdventures_frontend/src/pages/Landing.jsx
@@ -1,38 +1,65 @@
-import React, { useEffect, useState } from 'react'
-import '../components/landing/landing.css'
-import Hero from '../components/landing/hero/Hero'
-import Footer from '../components/landing/footer'
-import GamePlayMechanics from '../components/landing/gamePlayMechanics'
-import GameConcept from '../components/landing/gameConcept/GameConcept'
-import Lore from '../components/landing/loreStoryline/Lore'
-import GradientCover from '../components/landing/GradientCover'
-import GameConceptM from '../components/landing-mobile/gameConcept/GameConceptM'
-
-const PatternCover = () => {
- return(
+import React, { lazy, Suspense, useEffect, useState } from 'react';
+import '../components/landing/landing.css';
+import Hero from '../components/landing/hero/Hero';
+import Footer from '../components/landing/footer';
+import GameConcept from '../components/landing/gameConcept/GameConcept';
+import Lore from '../components/landing/loreStoryline/Lore';
+import GradientCover from '../components/landing/GradientCover';
+import GameConceptM from '../components/landing-mobile/gameConcept/GameConceptM';
+
+const GamePlayMechanics = lazy(() => import('../components/landing/gamePlayMechanics'));
+const MobileGameplayView = lazy(() => import('../components/landing-mobile/gameplayMechanics'));
+
+/**
+ * PatternCover component dynamically renders gameplay mechanics based on screen width,
+ * displaying a mobile or desktop view inside a gradient cover. It also includes the Lore component.
+ *
+ * @returns {JSX.Element} The PatternCover component wrapped in a GradientCover with dynamic content.
+ */
+const PatternCover = ()=> {
+ const [width, setWidth] = useState(window.innerWidth);
+
+ useEffect(() => {
+ const handleResize = () => setWidth(window.innerWidth);
+ window.addEventListener('resize', handleResize);
+
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
+ return (
- Loading...}>
+ {width > 768 ?
- )
-}
+ );
+};
+
+/**
+ * Landing component renders the main landing page, including the Hero, Game Concept, and Footer sections.
+ * It dynamically switches between mobile and desktop versions of the GameConcept component based on screen width.
+ *
+ * @returns {JSX.Element} The complete landing page layout.
+ */
+const Landing = ()=>{
+ const [width, setWidth] = useState(window.innerWidth);
-const Landing = () => {
- const [width,setWidth]=useState(window.innerWidth)
+ useEffect(() => {
+ const handleResize = () => setWidth(window.innerWidth);
+ window.addEventListener('resize', handleResize);
- useEffect(()=>{
- window.addEventListener("resize", ()=>setWidth(window.innerWidth));
- return () => window.removeEventListener("resize", ()=>setWidth(window.innerWidth));
- },[])
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
return (
-
-
- {width>1024?
:
}
-
-
+
+
+ {width > 1024 ?
:
}
+
+
- )
-}
+ );
+};
-export default Landing
\ No newline at end of file
+export default Landing;
-
+ 
-
+ 
- 
-