-
-
Notifications
You must be signed in to change notification settings - Fork 1
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 #48 from unmonk/v0.2
chunking matchups
- Loading branch information
Showing
14 changed files
with
1,010 additions
and
404 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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,54 +1,107 @@ | ||
| "use client"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { buttonVariants } from "@/components/ui/button"; | ||
| import { HeroCards } from "./hero-cards"; | ||
| import { DiscordLogoIcon } from "@radix-ui/react-icons"; | ||
| import { useRouter } from "next/navigation"; | ||
| import { Badge } from "../ui/badge"; | ||
| import { useEffect, useState } from "react"; | ||
| import { ArrowRight } from "lucide-react"; | ||
| import { LandingLeagues } from "./landing-leagues"; | ||
| import Link from "next/link"; | ||
| import { motion } from "framer-motion"; | ||
| import GetStartedButton from "@/components/ui/get-started-button"; | ||
|
|
||
| export const Hero = () => { | ||
| const [currentVideo, setCurrentVideo] = useState(1); | ||
|
|
||
| useEffect(() => { | ||
| const interval = setInterval(() => { | ||
| setCurrentVideo((prev) => (prev >= 4 ? 1 : prev + 1)); | ||
| }, 4000); // Change video every 4 seconds | ||
|
|
||
| return () => clearInterval(interval); | ||
| }, []); | ||
|
|
||
| const scrollToNextSection = () => { | ||
| const nextSection = document.getElementById("howItWorks"); | ||
| nextSection?.scrollIntoView({ behavior: "smooth" }); | ||
| }; | ||
|
|
||
| return ( | ||
| <section className="container grid lg:grid-cols-2 place-items-center pt-16 md:pt-24"> | ||
| <div className="text-center lg:text-start space-y-6"> | ||
| <main className="text-5xl md:text-6xl font-bold"> | ||
| <h1 className="inline"> | ||
| <span className="inline bg-gradient-to-r from-black to-green-400 dark:from-white dark:to-green-700 text-transparent bg-clip-text"> | ||
| ChainLink | ||
| </span> | ||
| </h1> | ||
| </main> | ||
|
|
||
| <p className="text-xl text-muted-foreground md:w-10/12 mx-auto lg:mx-0"> | ||
| Pick the winner on matchups drawn from different sports and events | ||
| from around the world, including NFL, MLB, NBA, Soccer, UFL, Lacrosse, | ||
| College Football, and College Basketball | ||
| </p> | ||
|
|
||
| <div className="space-y-4 md:space-y-0 md:space-x-4"> | ||
| <Link href="/dashboard" passHref> | ||
| <Button className="w-full md:w-1/3">Play Now</Button> | ||
| </Link> | ||
| <section className="relative min-h-screen overflow-hidden"> | ||
| <video | ||
| key={currentVideo} | ||
| autoPlay | ||
| loop | ||
| muted | ||
| playsInline | ||
| className="absolute inset-0 h-full w-full object-cover" | ||
| aria-hidden="true" | ||
| > | ||
| <source src={`/videos/clip${currentVideo}.mp4`} type="video/mp4" /> | ||
| Your browser does not support the video tag. | ||
| </video> | ||
| <div className="absolute inset-0 bg-black/60" />{" "} | ||
| {/* Overlay to ensure text readability */} | ||
| <div className="container relative mx-auto flex min-h-screen flex-col items-center justify-center px-4 py-24 text-center sm:px-6 lg:px-8 "> | ||
| <motion.div | ||
| initial={{ opacity: 0, y: 20 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.5 }} | ||
| > | ||
| <Badge className="mb-4 bg-emerald-500/10 text-emerald-500 animate-pulse"> | ||
| CHAINBUILDER | ||
| </Badge> | ||
| </motion.div> | ||
|
|
||
| <a | ||
| href={process.env.NEXT_PUBLIC_DISCORD_URL} | ||
| target="_blank" | ||
| className={`w-full md:w-1/3 ${buttonVariants({ | ||
| variant: "outline", | ||
| })}`} | ||
| <motion.h1 | ||
| className="mb-6 text-5xl font-bold tracking-tight text-white sm:text-7xl lg:text-8xl" | ||
| initial={{ opacity: 0, y: 20 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.5, delay: 0.2 }} | ||
| > | ||
| Predict. Win.{" "} | ||
| <span className="bg-gradient-to-r from-emerald-400 to-emerald-500 bg-clip-text text-transparent"> | ||
| Build Your Chain. | ||
| </span> | ||
| </motion.h1> | ||
|
|
||
| <motion.p | ||
| className="mb-8 max-w-2xl text-xl text-gray-300" | ||
| initial={{ opacity: 0, y: 20 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.5, delay: 0.4 }} | ||
| > | ||
| Join sports fans building their chains across NFL, NBA, MLB, NHL, MLS, | ||
| College Basketball, College Football, and more. Build your chain | ||
| today. | ||
| </motion.p> | ||
|
|
||
| <motion.div | ||
| className="flex flex-row gap-4 w-full mx-auto max-w-2xl" | ||
| initial={{ opacity: 0, y: 20 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.5, delay: 0.6 }} | ||
| > | ||
| <Link href="/dashboard" passHref className="w-full"> | ||
| <GetStartedButton text="Play Now" /> | ||
| </Link> | ||
| <Button | ||
| size="lg" | ||
| variant="outline" | ||
| className="border-gray-400 text-lg text-white hover:bg-white/10 w-full" | ||
| onClick={scrollToNextSection} | ||
| > | ||
| Discord | ||
| <DiscordLogoIcon className="ml-2 w-5 h-5" /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| Learn More | ||
| </Button> | ||
| </motion.div> | ||
|
|
||
| {/* Hero cards sections */} | ||
| <div className="z-10 mr-20"> | ||
| {" "} | ||
| <HeroCards /> | ||
| <motion.div | ||
| initial={{ opacity: 0, y: 20 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.5, delay: 0.8 }} | ||
| className="w-full" | ||
| > | ||
| <LandingLeagues /> | ||
| </motion.div> | ||
| </div> | ||
|
|
||
| {/* Shadow effect */} | ||
| <div className="shadow"></div> | ||
| </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
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 |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import { ArrowRight } from "lucide-react"; | ||
| import { cn } from "@/lib/utils"; | ||
| import { Button } from "./button"; | ||
|
|
||
| interface IGetStartedButtonProps { | ||
| text: string; | ||
| className?: string; | ||
| } | ||
|
|
||
| export default function GetStartedButton({ | ||
| text = "Get started", | ||
| className, | ||
| }: IGetStartedButtonProps) { | ||
| return ( | ||
| <Button | ||
| size="lg" | ||
| variant="outline" | ||
| className={cn( | ||
| "group flex items-center justify-center gap-3 rounded-lg bg-gradient-to-br from-green-900 via-green-600 to-green-300 p-2 font-bold w-full h-full", | ||
| className | ||
| )} | ||
| > | ||
| <span className="text-white group-hover:text-green-100">{text}</span> | ||
| <div className="relative flex h-7 w-7 items-center justify-center overflow-hidden rounded-full bg-white/10"> | ||
| <div className="absolute left-0 flex h-7 w-14 -translate-x-1/2 items-center justify-center transition-all duration-200 ease-in-out group-hover:translate-x-0 group-hover:bg-green-800"> | ||
| <ArrowRight | ||
| size={16} | ||
| className="size-7 transform p-1 text-green-100 opacity-0 group-hover:opacity-100" | ||
| /> | ||
| <ArrowRight | ||
| size={16} | ||
| className="size-7 transform p-1 text-green-800 opacity-100 transition-transform duration-300 ease-in-out group-hover:opacity-0" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </Button> | ||
| ); | ||
| } |
Oops, something went wrong.