"use client"

import Navbar from "@/components/Navbar";
import Hero from "@/components/Hero";
import StreakCard from "@/components/StreakCard";
import HowItWorks from "@/components/HowItWorks";
import Rules from "@/components/Rules";
import Outcomes from "@/components/Outcomes";
import ContractCode from "@/components/ContractCode";
import CTA from "@/components/CTA";
import Footer from "@/components/Footer";
import { useRef } from "react";


export default function Home() {

  const workRef = useRef<HTMLDivElement>(null)
  const ruleRef = useRef<HTMLDivElement>(null)
  const contactRef = useRef<HTMLDivElement>(null)

  return (
    <main className="bg-black">
      <Navbar Works={workRef} Rules={ruleRef} Contact={contactRef} />
      <Hero />
      <StreakCard />
     <div ref={workRef}><HowItWorks /></div> 
     <div ref={ruleRef}><Rules /></div> 
      <Outcomes />
      <ContractCode />
      <CTA />
     <div ref={contactRef}><Footer /></div> 
    </main>
  );
}
