modal location updated

src/widgets/home/components/Hero.tsx

@@ -1,5 +1,10 @@
-import type { FC } from 'react';
-import { motion, type MotionStyle, type MotionValue } from 'framer-motion';
+'use client';
+import {
+  motion,
+  useScroll,
+  useTransform,
+  type MotionStyle,
+} from 'framer-motion';
 import { fadeUp, stagger } from '../animations';
 import { C } from '../tokens';
 import { STATS } from '../constants';
@@ -10,16 +15,15 @@ import Section from './Section';
 import Stat from './Stat';
 import StartButton from './StartButton';
 import { useTranslations } from 'next-intl';
+import { useLoginModal } from '@/shared/zustand/auth';
 
-interface HeroProps {
-  onStart: () => void;
-  blobY: MotionValue<number>;
-}
-
-const Hero: FC<HeroProps> = ({ onStart, blobY }) => {
+const Hero = () => {
   const isMobile = useIsMobile();
   const t = useTranslations('Hero');
   const tStats = useTranslations('Stats');
+  const { scrollY } = useScroll();
+  const blobY = useTransform(scrollY, [0, 600], [0, 80]);
+  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
 
   const getTranslatedLabel = (label: string) => {
     switch (label) {
@@ -149,7 +153,7 @@ const Hero: FC<HeroProps> = ({ onStart, blobY }) => {
                 flexWrap: 'wrap',
               }}
             >
-              <StartButton onClick={onStart} />
+              <StartButton onClick={() => toggleLoginModal()} />
               <span
                 style={{
                   color: C.textMuted,

src/widgets/home/components/StepsSection.tsx

@@ -1,4 +1,5 @@
-import type { FC } from 'react';
+'use client';
+import { useRef } from 'react';
 import { motion } from 'framer-motion';
 import { fadeUp } from '../animations';
 import { C } from '../tokens';
@@ -8,15 +9,13 @@ import Section from './Section';
 import StartButton from './StartButton';
 import StepCard from './StepCard';
 import { useTranslations } from 'next-intl';
+import { useLoginModal } from '@/shared/zustand/auth';
 
-interface StepsSectionProps {
-  stepsRef: React.RefObject<HTMLDivElement | null>;
-  onScrollTop: () => void;
-}
-
-const StepsSection: FC<StepsSectionProps> = ({ stepsRef, onScrollTop }) => {
+const StepsSection = () => {
   const isMobile = useIsMobile();
   const t = useTranslations('StepsSection');
+  const stepsRef = useRef<HTMLDivElement>(null);
+  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
 
   return (
     <div
@@ -120,7 +119,7 @@ const StepsSection: FC<StepsSectionProps> = ({ stepsRef, onScrollTop }) => {
                 {t('ctaDescription')}
               </p>
             </div>
-            <StartButton onClick={onScrollTop} />
+            <StartButton onClick={() => toggleLoginModal()} />
           </motion.div>
         </div>
       </Section>

src/widgets/home/index.tsx

@@ -1,27 +1,16 @@
 'use client';
-import { useRef, type FC } from 'react';
-import { useScroll, useTransform } from 'framer-motion';
 import Hero from './components/Hero';
 import InfoSection from './components/InfoSection';
 import StepsSection from './components/StepsSection';
 import Ticker from './components/Ticker';
 
-const PlagiarismLanding: FC = () => {
-  const stepsRef = useRef<HTMLDivElement>(null);
-  const { scrollY } = useScroll();
-  const blobY = useTransform(scrollY, [0, 600], [0, 80]);
-
-  const scrollToSteps = () =>
-    stepsRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-
-  const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
-
+const PlagiarismLanding = () => {
   return (
     <>
-      <Hero onStart={scrollToSteps} blobY={blobY} />
+      <Hero />
       <Ticker />
       <InfoSection />
-      <StepsSection stepsRef={stepsRef} onScrollTop={scrollToTop} />
+      <StepsSection />
     </>
   );
 };