diff --git a/app/page.js b/app/page.js index 248c5ed..3f91269 100644 --- a/app/page.js +++ b/app/page.js @@ -1,11 +1,13 @@ import HeroSection from "../components/HeroSection"; import FeatureSection from "../components/FeatureSection/FeatureSection"; +import FaqSection from "../components/FaqSection"; export default function Home() { return (
+
); } diff --git a/components/FaqSection.jsx b/components/FaqSection.jsx new file mode 100644 index 0000000..068b606 --- /dev/null +++ b/components/FaqSection.jsx @@ -0,0 +1,91 @@ +"use client"; + +import React, { useRef, useState } from "react"; +import { FaPlus, FaMinus } from "react-icons/fa6"; +import { motion } from "framer-motion"; + +export default function FaqSection() { + return ( + +
+

+ Frequently Asked Questions +

+
+ Need help with something? Here are some of the most common questions + we get. +
+
+ +
+ {faqsList.map((item, idx) => ( + + ))} +
+ + ); +} + +const FaqsCard = (props) => { + const answerElRef = useRef(); + const [state, setState] = useState(false); + const [answerH, setAnswerH] = useState("0px"); + const { faqsList, idx } = props; + + const handleOpenAnswer = () => { + const answerElH = answerElRef.current.childNodes[0].offsetHeight; + setState(!state); + setAnswerH(`${answerElH + 20}px`); + }; + + return ( +
+

+ {faqsList.title} + {state ? : } +

+
+
+

{faqsList.content}

+
+
+
+ ); +}; + +const faqsList = [ + { + title: "What is Sanity Gaming", + content: + "Sanity Gaming is an emerging esports platform that focuses on delivering high-quality content, community engagement, and inclusive experiences for gamers and esports enthusiasts. Our mission is to foster a positive and mentally healthy gaming environment.", + }, + { + title: "What services does Sanity Gaming offer", + content: + "We provide a range of services, including esports highlights, gaming insights, community updates, game reviews, and live tournament coverage. Our goal is to connect gamers, enthusiasts, and organizers in a vibrant community.", + }, + { + title: "How is Sanity Gaming different from other esports platforms", + content: + "Sanity Gaming distinguishes itself by prioritizing inclusivity and mental well-being within the gaming community. We aim to create a space where every gamer feels welcome, regardless of their skill level.", + }, + { + title: "Is Sanity Gaming limited to a specific region or audience", + content: + "While we're an Indian-based company, our vision extends globally. We're dedicated to making a positive impact on the global esports community and welcome enthusiasts from around the world.", + }, +]; diff --git a/components/FeatureSection/FeatureSection.jsx b/components/FeatureSection/FeatureSection.jsx index 48de2e9..e686725 100644 --- a/components/FeatureSection/FeatureSection.jsx +++ b/components/FeatureSection/FeatureSection.jsx @@ -3,12 +3,19 @@ import React from "react"; import FeaturesSectionGrid from "./FeatureSectionGrid"; import FeaturesSectionList from "./FeatureSectionList"; +import { motion } from "framer-motion"; export default function FeatureSection() { return ( -
+ -
+ ); } diff --git a/components/FeatureSection/FeatureSectionGrid.jsx b/components/FeatureSection/FeatureSectionGrid.jsx index 3db16f5..0d53333 100644 --- a/components/FeatureSection/FeatureSectionGrid.jsx +++ b/components/FeatureSection/FeatureSectionGrid.jsx @@ -127,7 +127,7 @@ export const SkeletonThree = () => { return ( diff --git a/components/Footer.jsx b/components/Footer.jsx index d7b048a..fe57563 100644 --- a/components/Footer.jsx +++ b/components/Footer.jsx @@ -74,7 +74,7 @@ export default function Footer() { {/* Important links */} -
+

Important Links

diff --git a/components/HeroSection.jsx b/components/HeroSection.jsx index 8235ea6..e667b0f 100644 --- a/components/HeroSection.jsx +++ b/components/HeroSection.jsx @@ -1,49 +1,58 @@ +"use client"; + import Link from "next/link"; import { Button } from "./ui/button"; import Image from "next/image"; +import { motion } from "framer-motion"; export default function HeroSection() { return ( -
-
-
-

- Discover new heights -

+ +
+

+ Discover new heights +

-

- Level Up Your Esports Journey with{" "} - - Sanity Esports - -

+

+ Level Up Your Esports Journey with{" "} + + Sanity Esports + +

-
- The Go-To Esports Platform at the intersection of esports and mental - well-being -
+
+ The Go-To Esports Platform at the intersection of esports and mental + well-being +
-
- - - +
+ + + - - - -
+ + +
+
-
- -
+
+
-
+ ); } diff --git a/components/Navbar.jsx b/components/Navbar.jsx index 9891ee5..5bdd10b 100644 --- a/components/Navbar.jsx +++ b/components/Navbar.jsx @@ -1,5 +1,7 @@ +"use client"; + import Link from "next/link"; -import React from "react"; +import React, { useEffect, useState } from "react"; import Image from "next/image"; import { ModeToggle } from "./ModeToggle"; import { Button } from "../components/ui/button"; @@ -15,8 +17,32 @@ import { import { AlignJustify } from "lucide-react"; const Navbar = () => { + const [scrolled, setScrolled] = useState(false); + + useEffect(() => { + const handleScroll = () => { + const offset = window.scrollY; + if (offset > 50) { + setScrolled(true); + } else { + setScrolled(false); + } + }; + + window.addEventListener("scroll", handleScroll); + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, []); + + if (scrolled) console.log("scroll triggered"); + return ( -
+
{/* Logo */}