From ee1eb75bdf3de654fb2c6e3a2993c17c18bd962c Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Sun, 31 Mar 2024 16:41:50 +0530
Subject: [PATCH] Extract component

---
 web/apps/photos/src/pages/index.tsx | 82 ++++++++++++++---------------
 1 file changed, 41 insertions(+), 41 deletions(-)

diff --git a/web/apps/photos/src/pages/index.tsx b/web/apps/photos/src/pages/index.tsx
index fc888af83e..863af3a648 100644
--- a/web/apps/photos/src/pages/index.tsx
+++ b/web/apps/photos/src/pages/index.tsx
@@ -186,47 +186,7 @@ export default function LandingPage() {
                 <>
                     <SlideContainer>
                         <EnteLogo height={24} sx={{ mb: 8 }} />
-                        <Carousel controls={false}>
-                            <Carousel.Item>
-                                <Img
-                                    src="/images/onboarding-lock/1x.png"
-                                    srcSet="/images/onboarding-lock/2x.png 2x,
-                                        /images/onboarding-lock/3x.png 3x"
-                                />
-                                <FeatureText>
-                                    <Trans i18nKey={"HERO_SLIDE_1_TITLE"} />
-                                </FeatureText>
-                                <TextContainer>
-                                    {t("HERO_SLIDE_1")}
-                                </TextContainer>
-                            </Carousel.Item>
-                            <Carousel.Item>
-                                <Img
-                                    src="/images/onboarding-safe/1x.png"
-                                    srcSet="/images/onboarding-safe/2x.png 2x,
-                                        /images/onboarding-safe/3x.png 3x"
-                                />
-                                <FeatureText>
-                                    <Trans i18nKey={"HERO_SLIDE_2_TITLE"} />
-                                </FeatureText>
-                                <TextContainer>
-                                    {t("HERO_SLIDE_2")}
-                                </TextContainer>
-                            </Carousel.Item>
-                            <Carousel.Item>
-                                <Img
-                                    src="/images/onboarding-sync/1x.png"
-                                    srcSet="/images/onboarding-sync/2x.png 2x,
-                                        /images/onboarding-sync/3x.png 3x"
-                                />
-                                <FeatureText>
-                                    <Trans i18nKey={"HERO_SLIDE_3_TITLE"} />
-                                </FeatureText>
-                                <TextContainer>
-                                    {t("HERO_SLIDE_3")}
-                                </TextContainer>
-                            </Carousel.Item>
-                        </Carousel>
+                        <Slideshow />
                     </SlideContainer>
                     <MobileBox>
                         <Button
@@ -258,3 +218,43 @@ export default function LandingPage() {
         </Container>
     );
 }
+
+const Slideshow: React.FC = () => {
+    return (
+        <Carousel controls={false}>
+            <Carousel.Item>
+                <Img
+                    src="/images/onboarding-lock/1x.png"
+                    srcSet="/images/onboarding-lock/2x.png 2x,
+                /images/onboarding-lock/3x.png 3x"
+                />
+                <FeatureText>
+                    <Trans i18nKey={"HERO_SLIDE_1_TITLE"} />
+                </FeatureText>
+                <TextContainer>{t("HERO_SLIDE_1")}</TextContainer>
+            </Carousel.Item>
+            <Carousel.Item>
+                <Img
+                    src="/images/onboarding-safe/1x.png"
+                    srcSet="/images/onboarding-safe/2x.png 2x,
+                /images/onboarding-safe/3x.png 3x"
+                />
+                <FeatureText>
+                    <Trans i18nKey={"HERO_SLIDE_2_TITLE"} />
+                </FeatureText>
+                <TextContainer>{t("HERO_SLIDE_2")}</TextContainer>
+            </Carousel.Item>
+            <Carousel.Item>
+                <Img
+                    src="/images/onboarding-sync/1x.png"
+                    srcSet="/images/onboarding-sync/2x.png 2x,
+                /images/onboarding-sync/3x.png 3x"
+                />
+                <FeatureText>
+                    <Trans i18nKey={"HERO_SLIDE_3_TITLE"} />
+                </FeatureText>
+                <TextContainer>{t("HERO_SLIDE_3")}</TextContainer>
+            </Carousel.Item>
+        </Carousel>
+    );
+};