align principles design

Author: wbglaeser

src/screens/landing-page/sections/principles/LandingPagePrinciples.js

@@ -1,18 +1,23 @@
 import React from "react";
 import LandingPageSectionWrapper from "../../components/LandingPageSectionWrapper";
-import LandingPagePrinciplesDesktop from "./views/LandingPagePrinciplesDesktop";
-import LandingPagePrinciplesMobile from "./views/LandingPagePrinciplesMobile";
-import globalStyles from "../../../../styles/styles";
+import LandingPageSectionGrid from "../../components/LandingPageSectionGrid";
 import VStack from "../../../../components/VStack";
-import LandingPageSectionTitle from "../../components/LandingPageSectionTitle";
+import LandingPagePrincipleCardData from "./components/LandingPagePrincipleCardData";
+import LandingPagePrincipleCardPrivacy from "./components/LandingPagePrincipleCardPrivacy";
+import LandingPagePrincipleCardUser from "./components/LandingPagePrincipleCardUser";
 
 const LandingPagePrinciples = ({isDesktop}) => {
     return (
-        <LandingPageSectionWrapper backgroundColor={globalStyles.primaryColor} isDesktop={isDesktop}>
-            <VStack gap={5}>
-                <LandingPageSectionTitle title={'Our principles'}/>
-                {isDesktop ? <LandingPagePrinciplesDesktop/> : <LandingPagePrinciplesMobile/>}
-            </VStack>
+        <LandingPageSectionWrapper isDesktop={isDesktop}>
+            <LandingPageSectionGrid title={'Our principles'}>
+                <VStack gap={5}>
+                    <VStack gap={7} justifyContent={'center'} sx={{width: '100%'}}>
+                        <LandingPagePrincipleCardData isDesktop={isDesktop} gifFirst={false}/>
+                        <LandingPagePrincipleCardPrivacy isDesktop={isDesktop}/>
+                        <LandingPagePrincipleCardUser isDesktop={isDesktop}/>
+                    </VStack>
+                </VStack>
+            </LandingPageSectionGrid>
         </LandingPageSectionWrapper>
     );
 }

src/screens/landing-page/sections/principles/components/LandingPagePrincipleCard.js

@@ -4,18 +4,40 @@ import {Typography} from "@mui/material";
 import React from "react";
 import globalStyles from "../../../../../styles/styles";
 
-const LandingPagePrincipleCard = ({ isDesktop, icon, gif, title, text }) => {
+const LandingPagePrincipleCard = ({isDesktop, icon, gif, title, text, gifFirst=true}) => {
     const padding = isDesktop ? '24px' : '0px';
     const gifUrl = `${process.env.PUBLIC_URL}/assets/images/landing-page/${gif}.gif`; // Construct your GIF URL
 
-    return (
-        <VStack gap={2} sx={{flex: 1}}>
+    const DynamicStacker = ({children}) => {
+        if (isDesktop) {
+            return (
+                <HStack alignItems={'center'}>
+                    {children}
+                </HStack>
+            )
+        }
+
+        return (
+            <VStack gap={2} sx={{flex: 1}}>
+                {children}
+            </VStack>
+        )
+    }
+
+    const GifComponent = () => {
+        return (
             <HStack justifyContent={'center'}>
                 {gif ? (
-                    <img src={gifUrl} alt="gif" style={{ width: '120px', height: '120px', borderRadius: '12px' }} />
+                    <img src={gifUrl} alt="gif" style={{width: '140px', height: '140px'}}/>
                 ) : (
-                    React.createElement(icon, { sx: { fontSize: 120, color: globalStyles.secondaryColor } })
-                )}            </HStack>
+                    React.createElement(icon, {sx: {fontSize: 120, color: globalStyles.secondaryColor}})
+                )}
+            </HStack>
+        )
+    }
+
+    const TextComponent = () => {
+        return (
             <VStack gap={1} sx={{padding: padding}}>
                 <HStack>
                     <Typography sx={styles.itemHeaderText}>
@@ -28,7 +50,25 @@ const LandingPagePrincipleCard = ({ isDesktop, icon, gif, title, text }) => {
                     </Typography>
                 </HStack>
             </VStack>
-        </VStack>
+        )
+    }
+
+    return (
+        <DynamicStacker gap={2} sx={{flex: 1}}>
+            {
+                !isDesktop || gifFirst ? (
+                    <>
+                        <GifComponent/>
+                        <TextComponent/>
+                    </>
+                ) : (
+                    <>
+                        <TextComponent/>
+                        <GifComponent/>
+                    </>
+                )
+            }
+        </DynamicStacker>
     )
 }
 

src/screens/landing-page/sections/principles/components/LandingPagePrincipleCardData.js

@@ -10,7 +10,7 @@ const LandingPagePrincipleCardData = ({isDesktop}) => {
     const gif = 'privacy-by-design';
 
     return (
-        <LandingPagePrincipleCard isDesktop={isDesktop} icon={icon} gif={gif} title={title} text={text}/>
+        <LandingPagePrincipleCard isDesktop={isDesktop} icon={icon} gif={gif} title={title} text={text} gifFirst={false}/>
     )
 }
 

src/screens/landing-page/sections/principles/components/LandingPagePrincipleCardUser.js

@@ -10,7 +10,7 @@ const LandingPagePrincipleCardUser = ({isDesktop}) => {
     const gif = 'user-centered';
 
     return (
-        <LandingPagePrincipleCard isDesktop={isDesktop} icon={icon} gif={gif} title={title} text={text}/>
+        <LandingPagePrincipleCard isDesktop={isDesktop} icon={icon} gif={gif} title={title} text={text} gifFirst={false}/>
     )
 }
 

src/screens/landing-page/sections/principles/views/LandingPagePrinciplesDesktop.js

@@ -1,16 +1,18 @@
 import React from "react";
-import HStack from "../../../../../components/HStack";
 import LandingPagePrincipleCardData from '../components/LandingPagePrincipleCardData';
 import LandingPagePrincipleCardPrivacy from '../components/LandingPagePrincipleCardPrivacy';
 import LandingPagePrincipleCardUser from "../components/LandingPagePrincipleCardUser";
+import VStack from "../../../../../components/VStack";
 
 const LandingPagePrinciplesDesktop = () => {
     return (
-        <HStack justifyContent={'center'} sx={{width: '100%'}}>
-            <LandingPagePrincipleCardData isDesktop={true}/>
-            <LandingPagePrincipleCardPrivacy isDesktop={true}/>
-            <LandingPagePrincipleCardUser isDesktop={true}/>
-        </HStack>
+        <VStack gap={5}>
+            <VStack gap={7} justifyContent={'center'} sx={{width: '100%'}}>
+                <LandingPagePrincipleCardData isDesktop={true} gifFirst={false}/>
+                <LandingPagePrincipleCardPrivacy isDesktop={true}/>
+                <LandingPagePrincipleCardUser isDesktop={true}/>
+            </VStack>
+        </VStack>
     );
 }