-
-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #67 from Abhish7k/master
style: landing page
- Loading branch information
Showing
7 changed files
with
175 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <main className=""> | ||
| <HeroSection /> | ||
| <FeatureSection /> | ||
| <FaqSection /> | ||
| </main> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <motion.div | ||
| className="mt-20 lg:mt-40 px-10 mx-auto max-w-5xl flex flex-col items-center" | ||
| viewport={{ once: true }} | ||
| initial={{ opacity: 0, y: 30 }} | ||
| whileInView={{ opacity: 1, y: 0 }} | ||
| transition={{ type: "easIn", duration: 0.5, delay: 0.6 }} | ||
| > | ||
| <div className="flex flex-col items-center justify-center text-center"> | ||
| <h1 className="text-3xl lg:text-5xl font-medium tracking-tight transition-all"> | ||
| Frequently Asked Questions | ||
| </h1> | ||
| <h6 className="mt-5 text-sm"> | ||
| Need help with something? Here are some of the most common questions | ||
| we get. | ||
| </h6> | ||
| </div> | ||
|
|
||
| <div className="mt-10 max-w-2xl mx-auto"> | ||
| {faqsList.map((item, idx) => ( | ||
| <FaqsCard idx={idx} faqsList={item} /> | ||
| ))} | ||
| </div> | ||
| </motion.div> | ||
| ); | ||
| } | ||
|
|
||
| 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 ( | ||
| <div | ||
| className="space-y-3 mt-5 overflow-hidden border-b" | ||
| key={idx} | ||
| onClick={handleOpenAnswer} | ||
| > | ||
| <h4 className="cursor-pointer pb-5 flex items-center justify-between text-lg font-medium transition-all duration-500"> | ||
| {faqsList.title} | ||
| {state ? <FaMinus /> : <FaPlus />} | ||
| </h4> | ||
| <div | ||
| ref={answerElRef} | ||
| className="duration-500" | ||
| style={state ? { height: answerH } : { height: "0px" }} | ||
| > | ||
| <div> | ||
| <p className="text-gray-500">{faqsList.content}</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| 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.", | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <section> | ||
| <div className="px-10 mx-auto md:px-[8%] xl:px-[15%] my-20 md:my-32 gap-20 transition-all"> | ||
| <div className="space-y-5 max-w-4xl mx-auto text-center"> | ||
| <h4 className="text-sm text-indigo-600 font-medium"> | ||
| Discover new heights | ||
| </h4> | ||
| <motion.section | ||
| className="px-10 mx-auto md:px-[8%] xl:px-[15%] my-20 md:my-32 gap-20" | ||
| initial={{ opacity: 0, y: 50 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ | ||
| duration: 0.8, | ||
| delay: 0.4, | ||
| }} | ||
| > | ||
| <div className="space-y-5 max-w-4xl mx-auto text-center"> | ||
| <h4 className="text-sm text-indigo-600 font-medium"> | ||
| Discover new heights | ||
| </h4> | ||
|
|
||
| <h1 className="text-4xl font-extrabold mx-auto md:text-5xl max-w-3xl"> | ||
| Level Up Your Esports Journey with{" "} | ||
| <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#4F46E5] to-[#E114E5]"> | ||
| Sanity Esports | ||
| </span> | ||
| </h1> | ||
| <h1 className="text-4xl font-extrabold mx-auto md:text-5xl max-w-3xl"> | ||
| Level Up Your Esports Journey with{" "} | ||
| <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#4F46E5] to-[#E114E5]"> | ||
| Sanity Esports | ||
| </span> | ||
| </h1> | ||
|
|
||
| <h6 className="max-w-2xl mx-auto"> | ||
| The Go-To Esports Platform at the intersection of esports and mental | ||
| well-being | ||
| </h6> | ||
| <h6 className="max-w-2xl mx-auto"> | ||
| The Go-To Esports Platform at the intersection of esports and mental | ||
| well-being | ||
| </h6> | ||
|
|
||
| <div className="flex items-center justify-center gap-4"> | ||
| <Link href="/"> | ||
| <Button>Get Started</Button> | ||
| </Link> | ||
| <div className="flex items-center justify-center gap-4"> | ||
| <Link href="/"> | ||
| <Button>Get Started</Button> | ||
| </Link> | ||
|
|
||
| <Link href="/"> | ||
| <Button variant="outline">Learn More</Button> | ||
| </Link> | ||
| </div> | ||
| <Link href="/"> | ||
| <Button variant="outline">Learn More</Button> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="mt-20"> | ||
| <Image | ||
| src="https://sanityesports.live/demo.png" | ||
| height={1000} | ||
| width={1200} | ||
| className="mx-auto shadow-lg rounded-2xl" | ||
| alt="" | ||
| /> | ||
| </div> | ||
| <div className="mt-20"> | ||
| <Image | ||
| src="https://sanityesports.live/demo.png" | ||
| height={1000} | ||
| width={1200} | ||
| className="mx-auto shadow-lg rounded-2xl" | ||
| alt="" | ||
| /> | ||
| </div> | ||
| </section> | ||
| </motion.section> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters