Upgrade new theme style

.vscode/settings.json

@@ -22,8 +22,8 @@
     }
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.organizeImports": true
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[typescriptreact]": {

data/blogs/startup-2024.yml

@@ -4,7 +4,7 @@ key: startup-2024
 image: devfest
 date: 2024-02-03
 content: |-
-  ## C'est parti pour une nouvelle année de folie sous le thème des films !
+  ## C'est parti pour une nouvelle année de folie, venez prendre une dose de frayeur au devfest !
 
   <div style="text-align: center">
     <!--img src="/images/logo_extraordinaire_blanc.svg" alt="logo devfest" style="width: 500px; max-width: 100%" /-->

locales/en/translation.json

@@ -1,7 +1,7 @@
 {
   "site": {
     "description": "The Devfest (i.e Developers Festival), is a technical conference destined to developers. It's meant for students, professionals, or any curious techie",
-    "theme": "This year's edition will shine light on the movie industry !"
+    "theme": "This year's edition be scary !"
   },
   "pages": {
     "home": {
@@ -40,8 +40,8 @@
         "seeAll": "See all speakers"
       },
       "photos": {
-        "p1": "Some pictures of the 2022 DevFest Nantes",
-        "p2": "on the Jules Verne theme 🎨",
+        "p1": "Some pictures of the 2023 DevFest Nantes",
+        "p2": "on the film theme 🎨",
         "button": "See all photos"
       }
     },

locales/fr/translation.json

@@ -1,7 +1,7 @@
 {
   "site": {
     "description": "Le DevFest, ou 'Developers Festival', est une conférence technique destinée aux développeuses et développeurs. Elle s'adresse aussi bien aux étudiantes et étudiants, aux professionnels ou tout simplement aux curieuses et curieux technophiles.",
-    "theme": "Cette année le Devfest Nantes met la lumière sur les films !"
+    "theme": "Cette année le Devfest Nantes sera un évènement effrayant !"
   },
   "pages": {
     "home": {

src/components/commun/jumbo/jumbo.scss

@@ -4,6 +4,10 @@
   font-size: 3rem;
   background-size: contain;
   background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   background: transparent;
   position: relative;
   // background: var(--primary);

src/components/home/home.scss

@@ -1,9 +1,13 @@
 .jumbo {
 
-  .logo-jumbo-home {
+  .jumbo-home-blood {
     width: 100%;
     height: 50%;
+    position: absolute;
+    left: 0;
+    top: 0;
     flex-grow: 1;
+    z-index: -1;
     img {
       height: auto;
       width: 100%;
@@ -12,6 +16,17 @@
     }
   }
 
+  .logo-jumbo-home {
+    width: 100%;
+    margin-top: 10%;
+    img {
+      height: auto;
+      width: 75%;
+      margin: auto;
+      display: block;
+    }
+  }
+
   h1 {
     margin: 1rem 0 1rem;
   }

src/components/home/jumbo.tsx

@@ -11,10 +11,13 @@ export const HomeJumbo = () => {
 
   return (
     <>
+      <div className="jumbo-home-blood">
+        <img src="/images/jumbo-blood.png" alt="" />
+      </div>
       <div className="logo-jumbo-home">
         <img
           alt="logo"
-          src="/images/jumbo-image.jpg"
+          src="/images/logo-long.png"
         />
       </div>
 

src/layout/footer.tsx

@@ -134,7 +134,7 @@ export const Footer: React.FC = () => {
           <FooterItem size="full">
             <div>
               <img
-                src="/images/logo-long-orange.svg"
+                src="/images/logo-long.png"
                 alt="logo devfest"
                 height="50"
                 width="150"