feat: added statistics section to landing

Author: Jadapema

package-lock.json

@@ -7,6 +7,8 @@
     "LANDING_MENU_DOCS":"Docs",
     "LANDING_MAIN_TITLE":"Discover Watchit",
     "LANDING_MAIN_SUBTITLE":"A new era for cinema begins here. Filmmakers have total control over their creations and reap the benefits directly through our unique distribution model. Start your journey, get inspired, and transform: Power to the creators, magic for the viewers.",
+    "LANDING_STATISTICS_TITLE":"Master your data",
+    "LANDING_STATISTICS_SUBTITLE":"Explore our statistics dashboard, designed for content creators to monitor the performance of their films. Access detailed audience analysis, performance metrics, real-time revenue and trend comparisons, all in one interface intuitive that simplifies strategic decision making and enhances your success on the platform.",
     "LANDING_JOIN_US":"Join us!",
     "LANDING_JOIN_US_BUTTON":"Watchit Marketplace",
     "LANDING_JOIN_US_1_TITLE":"0xBlockbuster Rental Market",

src/assets/img/watchit_statistics.svg

@@ -7,6 +7,8 @@
     "LANDING_MENU_DOCS":"Documentación",
     "LANDING_MAIN_TITLE":"Descubre Watchit",
     "LANDING_MAIN_SUBTITLE":"Una nueva era para el cine comienza aquí. Los cineastas tienen control total sobre sus creaciones y obtienen beneficios directamente a través de nuestro modelo de distribución único. Empieza tu viaje, inspírate y transforma: Poder para los creadores, magia para los espectadores.",
+    "LANDING_STATISTICS_TITLE":"Domina tus datos",
+    "LANDING_STATISTICS_SUBTITLE":"Explora nuestro dashboard de estadísticas, diseñado para que los creadores de contenido puedan monitorear el rendimiento de sus películas. Accede a análisis de audiencia detallados, métricas de rendimiento, ingresos en tiempo real y comparativas de tendencias, todo en una interfaz intuitiva que simplifica la toma de decisiones estratégicas y potencia tu éxito en la plataforma.",
     "LANDING_JOIN_US":"Únete a nosotros!",
     "LANDING_JOIN_US_BUTTON":"Mercado Watchit",
     "LANDING_JOIN_US_1_TITLE":"Conoce 0xBlockbuster",

src/assets/img/watchit_statistics_white.svg

@@ -10,7 +10,6 @@ import { Helmet } from 'react-helmet'
 import 'animate.css/animate.min.css'
 
 // PROJECT IMPORTS
-import LandingPartners from '@pages/Landing/components/LandingPartners'
 import LandingDistribution from '@pages/Landing/components/LandingDistribution'
 import LandingHeader from '@pages/Landing/components/LandingHeader'
 import LandingCoin from '@pages/Landing/components/LandingCoin'
@@ -20,11 +19,10 @@ import LandingApp from '@pages/Landing/components/LandingApp'
 import Footer from '@components/Footer'
 import LandingSection, { PointsSx } from '@pages/Landing/components/LandingSection'
 import LandingPopCorn from '@pages/Landing/components/LandingPopcorn'
-import LandingAwesome from '@pages/Landing/components/LandingAwesome'
 import LandingMission from '@pages/Landing/components/LandingMission'
-import LandingFAQ from '@pages/Landing/components/LandingFAQ'
 import LandingRoadmap from '@pages/Landing/components/LandingRoadmap'
 import LandingRenting from "@pages/Landing/components/LandingRenting";
+import LandingStatistics from "@pages/Landing/components/LandingStatistics";
 
 // ===========================|| LANDING - VIEW ||=========================== //
 
@@ -62,12 +60,12 @@ export const LandingView: FC = (props): JSX.Element => {
       <LandingSection sx={Background2Sx}>
         <LandingCoin />
       </LandingSection>
+      <LandingSection sx={Background3Sx}>
+        <LandingStatistics />
+      </LandingSection>
       <LandingSection sx={Background1Sx}>
         <LandingRoadmap />
       </LandingSection>
-      {/*<LandingSection sx={Background2Sx}>*/}
-      {/*  <LandingFAQ />*/}
-      {/*</LandingSection>*/}
       <LandingSection sx={Background2Sx}>
         <LandingTeam />
       </LandingSection>
@@ -79,6 +77,15 @@ export const LandingView: FC = (props): JSX.Element => {
   )
 }
 
+const Background3Sx: SxProps<Theme> = {
+  backgroundColor: (theme) => Object.is(theme.palette.mode, 'light')
+    ? theme.palette.background.paper
+    : theme.palette.background.default,
+  backgroundImage: (theme) => Object.is(theme.palette.mode, 'light')
+    ? 'linear-gradient(0deg, #fff 0%, #b8d2e4 0%)'
+    : 'linear-gradient(0deg, rgba(0,25,44,1) 0%, #070113 0%)'
+}
+
 const Background1Sx: SxProps<Theme> = {
   backgroundColor: (theme) => Object.is(theme.palette.mode, 'light')
     ? theme.palette.background.paper

src/i18n/langs/en.json

@@ -0,0 +1,66 @@
+// REACT IMPORTS
+import React, { FC } from 'react'
+
+// MUI IMPORTS
+import { Grid, Container, Box, styled, BoxProps, useTheme } from '@mui/material'
+
+// THIRD PARTY IMPORTS
+import { AnimationOnScroll } from 'react-animation-on-scroll'
+
+// PROJECT IMPORTS
+import LandingStaticsLight from '@assets/img/watchit_statistics_white.svg'
+import LandingStatics from '@assets/img/watchit_statistics.svg'
+import LandingInfo from '@pages/Landing/components/LandingInfo'
+import { Translation } from '@src/i18n'
+
+// ===========================|| LANDING - STATISTICS ||=========================== //
+
+const LandingStatistics: FC = (): JSX.Element => {
+  const theme = useTheme()
+  const isThemeLight = Object.is(theme.palette.mode, 'light')
+
+  return (
+    <Container sx={{ zIndex: 2 }}>
+      <Grid
+        container spacing={3} justifyContent='center' alignItems='center'
+        sx={{ flexDirection: { xs: 'column-reverse', sm: 'row' }, flexWrap: { xs: 'nowrap', sm: 'wrap' } }}
+      >
+        <Grid item width='100%' xs={12} sm={6} zIndex={10}>
+          <AnimationOnScroll animateIn='animate__bounceInLeft' animateOut='animate__fadeOut'>
+            <LandingInfo
+                title={<Translation target='LANDING_STATISTICS_TITLE' />}
+                subTitle={<Translation target='LANDING_STATISTICS_SUBTITLE' />}
+            />
+          </AnimationOnScroll>
+        </Grid>
+        <Grid item xs={12} sm={6} zIndex={10} width='100%'>
+          <AnimationOnScroll
+              animateIn='animate__fadeIn' animateOut='animate__fadeOut'
+              style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+          >
+            <LandingStatisticsImage>
+              {
+                isThemeLight ? <LandingStaticsLight /> : <LandingStatics />
+              }
+            </LandingStatisticsImage>
+          </AnimationOnScroll>
+        </Grid>
+      </Grid>
+    </Container>
+  )
+}
+
+export const LandingStatisticsImage = styled(Box)<BoxProps>(({ theme }) => ({
+  zIndex: 2,
+  width: '100%',
+  maxWidth: '30rem',
+  svg: {
+    width: '100%',
+    height: 'auto'
+  },
+  [theme.breakpoints.down('sm')]: {
+    maxWidth: '19rem'
+  }
+}))
+
+export default LandingStatistics