fix: preview updates (#540)

* fix: preview updates * fix: add blog section
graasp · Dec 11, 2024 · a5ba38a · a5ba38a
1 parent 5134a1f
commit a5ba38a
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 8 deletions.
diff --git a/public/illustration/graasp-blog.webp b/public/illustration/graasp-blog.webp
diff --git a/src/locales/en/landing.json b/src/locales/en/landing.json
@@ -344,6 +344,12 @@
         "CONTACT_US": "Contact our team to discuss a solution that fits your needs.",
         "GET_A_QUOTE": "Get a quote for your desired services"
       }
+    },
+    "BLOG": {
+      "LEAD_SENTENCE": "Graasp is constantly growing!",
+      "TITLE": "Visit our blog to discover all the latest updates!",
+      "DESCRIPTION": "Discover updates, enrich your Graasp experience",
+      "BUTTON_TEXT": "Visit our Blog"
     }
   },
   "NEWSLETTER": {

diff --git a/src/modules/landing/features/BlogSection.tsx b/src/modules/landing/features/BlogSection.tsx
@@ -0,0 +1,27 @@
+import { useTranslation } from 'react-i18next';
+
+import { Button, Stack, Typography } from '@mui/material';
+
+import { Image } from '@/components/ui/StyledImages';
+import { NS } from '@/config/constants';
+
+import { CallOutSection } from './CallOutSection';
+
+export function BlogSection() {
+  const { t } = useTranslation(NS.Landing, { keyPrefix: 'FEATURES.BLOG' });
+  return (
+    <Stack maxWidth="lg">
+      <CallOutSection
+        lead={t('LEAD_SENTENCE')}
+        title={t('TITLE')}
+        children={<Typography>{t('DESCRIPTION')}</Typography>}
+        actions={
+          <Button variant="contained" href="https://graasp.github.io/blog">
+            {t('BUTTON_TEXT')}
+          </Button>
+        }
+        image={<Image alt="blog cover" src="/illustration/graasp-blog.webp" />}
+      />
+    </Stack>
+  );
+}
diff --git a/src/modules/landing/features/CallOutSection.tsx b/src/modules/landing/features/CallOutSection.tsx
@@ -41,7 +41,7 @@ export function CallOutSection({
         <Typography variant="note" color="textSecondary">
           {lead}
         </Typography>
-        <Typography variant="h2" color="primary">
+        <Typography variant="h2" color="primary" maxWidth="50ch">
           {title}
         </Typography>
         {children}

diff --git a/src/modules/landing/features/pricing/PricingPlansSection.tsx b/src/modules/landing/features/pricing/PricingPlansSection.tsx
@@ -34,7 +34,7 @@ export function PricingPlan({
 export function PricingPlansSection() {
   const { t } = useTranslation(NS.Landing, { keyPrefix: 'FEATURES.PRICING' });
   return (
-    <Stack gap={4} alignItems="center">
+    <Stack maxWidth="lg" gap={4} alignItems="center">
       <Typography color="primary" variant="h2">
         {t('TITLE')}
       </Typography>

diff --git a/src/modules/landing/preview/PreviewModeContext.tsx b/src/modules/landing/preview/PreviewModeContext.tsx
@@ -19,6 +19,8 @@ const PreviewContext = createContext<PreviewContextType>({
 });
 
 const isPreviewEnabled = () => {
+  // only check if the element is present, value is not checked for the moment
+  // maybe if we extend the feature later we will need to
   const isPresent = localStorage.getItem(PREVIEW_STORAGE_KEY) != null;
   return isPresent;
 };

diff --git a/src/routes/_landing.tsx b/src/routes/_landing.tsx
@@ -77,7 +77,7 @@ function RouteComponent() {
             <GraaspLogo height={44} sx={{ fill: primary! }} />
             {!isMobile && (
               <Typography fontWeight="bold" variant="h2" color="primary">
-                Graasp{' '}
+                Graasp
                 {isPreviewEnabled ? (
                   <Typography variant="note">preview</Typography>
                 ) : (

diff --git a/src/routes/_landing/features.tsx b/src/routes/_landing/features.tsx
@@ -1,6 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router';
 
 import { BlendedLearningSection } from '~landing/features/BlendedLearningSection';
+import { BlogSection } from '~landing/features/BlogSection';
 import { GraaspFeaturesSection } from '~landing/features/GraaspFeaturesSection';
 import { PlatformOverviewSection } from '~landing/features/PlatformOverviewSection';
 import { TitleSection } from '~landing/features/TitleSection';
@@ -22,10 +23,12 @@ function RouteComponent() {
       <Preview>
         <PricingPlansSection />
       </Preview>
-      {/* <Preview>
+      <Preview>
         <BlogSection />
-      </Preview> */}
-      <NewsLetter />
+      </Preview>
+      <Preview>
+        <NewsLetter />
+      </Preview>
     </>
   );
 }
diff --git a/src/routes/_landing/index.lazy.tsx b/src/routes/_landing/index.lazy.tsx
@@ -6,6 +6,7 @@ import { OurMissionSection } from '~landing/home/OurMissionSection';
 import { TitleSection } from '~landing/home/TitleSection';
 import { UserStorySection } from '~landing/home/UserStorySection';
 import { UserTestimoniesSection } from '~landing/home/UserTestimoniesSection';
+import { Preview } from '~landing/preview/PreviewModeContext';
 
 export const Route = createLazyFileRoute('/_landing/')({
   component: Index,
@@ -18,8 +19,12 @@ function Index() {
       <PlatformCube />
       <UserStorySection />
       <OurMissionSection />
-      <UserTestimoniesSection />
-      <NewsLetter />
+      <Preview>
+        <UserTestimoniesSection />
+      </Preview>
+      <Preview>
+        <NewsLetter />
+      </Preview>
     </>
   );
 }