
import { useRef } from 'react'
import { AnimatedSection } from '../../components/AnimatedSection'
import { CallToAction } from './CallToAction'
import { HomeTab } from './HomeTab'
import { HomeMap } from './HomeMap' 
import { HomeAurora } from './HomeAurora'
import { HomeArchitecture } from './HomeArchitecture';
import { HomeDesign } from './HomeDesign';



export default function HomePage() {
  const sliderRef = useRef<HTMLDivElement>(null)

  const handleScrollToSlider = () => {
    sliderRef.current?.scrollIntoView({ behavior: 'smooth' })
  }
  return (
    <div>
      <AnimatedSection>
        <HomeAurora onGetStartedClick={handleScrollToSlider} />
      </AnimatedSection>

      <AnimatedSection>
        <HomeArchitecture/>
      </AnimatedSection>

      <AnimatedSection>
        <HomeTab />
      </AnimatedSection>

      <AnimatedSection>
        <HomeMap />
      </AnimatedSection>

      <AnimatedSection>
        <HomeDesign />
      </AnimatedSection>

      <AnimatedSection>
        <CallToAction />
      </AnimatedSection>
    </div>
  )
}
