feat: improve landing section (#833)

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Author: anyulled

src/views/Home/components/ActionButtons/ActionButtons.tsx

@@ -1,15 +1,16 @@
 import { useCallback } from "react";
 import { styled } from "styled-components";
 
-import { gaEventTracker } from "../../../../components/analytics/Analytics";
-import { formatDateWithOrdinal } from "../../../../components/date/dateUtils";
-import Button from "../../../../components/UI/Button";
-import { BIG_BREAKPOINT } from "../../../../constants/BreakPoints";
-import { useUrlBuilder } from "../../../../services/urlBuilder";
+import { gaEventTracker } from "@components/analytics/Analytics";
+import { formatDateWithOrdinal } from "@components/date/dateUtils";
+import Button from "@components/UI/Button";
+import { BIG_BREAKPOINT } from "@constants/BreakPoints";
+import { useUrlBuilder } from "@services/urlBuilder";
 
 import type { FC } from "react";
 
 const StyledActionDiv = styled.div`
+  margin-top: 2rem;
   display: flex;
   text-align: center;
 

src/views/Home/components/HomeWTC/HomeWTC.tsx

@@ -12,10 +12,11 @@ import edition from "@data/2026.json";
 import { useDateInterval } from "@hooks/useDateInterval";
 
 // @ts-expect-error some quirky import
-
 import { Color } from "@styles/colors";
 import { formatDateRange } from "@utils/dateUtils";
 
+import ActionButtons from "../ActionButtons/ActionButtons";
+import InfoButtons from "../InfoButtons/InfoButtons";
 import {
   StyledDevBcnLogo,
   StyledHomeImage,
@@ -25,8 +26,6 @@ import {
   StyledTitleContainer,
   StyleHomeContainer,
 } from "./Style.Home";
-import ActionButtons from "../ActionButtons/ActionButtons";
-import InfoButtons from "../InfoButtons/InfoButtons";
 
 import type { FC } from "react";
 
@@ -59,33 +58,31 @@ const HomeWTC: FC<React.PropsWithChildren<unknown>> = () => {
               The Barcelona Developers Conference {edition?.edition}
             </StyledTitle>
             <StyledSubtitle
-              fontWeight={600}
+              fontWeight={700}
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
-              transition={{ duration: 0.5, delay: 0.8 }}
+              transition={{ duration: 0.5, delay: 0.7 }}
             >
-              {edition?.trackNumber} tracks with the following topics: <br />
-              {edition?.tracks}
+              {edition?.startDay &&
+                edition.endDay &&
+                formatDateRange(
+                  new Date(edition.startDay),
+                  new Date(edition.endDay),
+                )}
             </StyledSubtitle>
             <StyledSubtitle
-              shadow={true}
+              fontWeight={700}
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
-              transition={{ duration: 0.5, delay: 1 }}
+              transition={{ duration: 0.5, delay: 0.8 }}
             >
-              <small>
-                Past events: <Link to="/2025">2025 edition</Link> |{" "}
-                <Link to="/2024">2024 edition</Link> |{" "}
-                <Link to="/2023">2023 edition</Link>
-              </small>
+              World Trade Center, Barcelona
             </StyledSubtitle>
           </StyledTitleContainer>
           <motion.img
             src="/images/devBcn-sponsorship.png"
             alt="DevBcn sponsorship value"
-            width="635"
-            height="125"
-            style={{ aspectRatio: "127:25", maxWidth: "100%" }}
+            style={{ maxWidth: "100%", marginTop: "8rem" }}
             initial={{ opacity: 0, x: -50 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.7, delay: 1.2 }}
@@ -96,16 +93,25 @@ const HomeWTC: FC<React.PropsWithChildren<unknown>> = () => {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 1.5 }}
           >
-            <StyledSubtitle fontWeight={600}>
-              {edition?.startDay &&
-                edition.endDay &&
-                formatDateRange(
-                  new Date(edition.startDay),
-                  new Date(edition.endDay),
-                )}
+            <StyledSubtitle fontWeight={700}>
+              {edition?.trackNumber} tracks with the following topics:
             </StyledSubtitle>
             <StyledSubtitle fontWeight={600}>
-              World Trade Center, Barcelona
+              {edition?.tracks}
+            </StyledSubtitle>
+          </StyledTitleContainer>
+          <StyledTitleContainer
+            color={Color.TRANSPARENT}
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 1.7 }}
+          >
+            <StyledSubtitle shadow={true}>
+              <small>
+                Past events: <Link to="/2025">2025 edition</Link> |{" "}
+                <Link to="/2024">2024 edition</Link> |{" "}
+                <Link to="/2023">2023 edition</Link>
+              </small>
             </StyledSubtitle>
           </StyledTitleContainer>
           <motion.div

src/views/Home/components/HomeWTC/Style.Home.tsx

@@ -1,11 +1,10 @@
+// @ts-expect-error some quirky import
 import { motion } from "motion/react";
 import { styled } from "styled-components";
 
 import { BIG_BREAKPOINT, BIGGER_BREAKPOINT } from "@constants/BreakPoints";
 import { Color } from "@styles/colors";
 
-// @ts-expect-error some quirky import
-
 // By © Alice Wiegand / CC-BY-SA-3.0 (via Wikimedia Commons), CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=30463612
 // By © Felix König / CC-BY-3.0 (via Wikimedia Commons), CC BY-SA 3.0, https://commons.wikimedia.org/wiki/File:World_Trade_Center_Barcelona_2013_1.jpg
 // By © Felix König / CC-BY-SA-3.0 (via Wikimedia Commons), CC BY-SA 4.0, https://commons.wikimedia.org/wiki/File:015_Port_Vell_%28Barcelona%29,_World_Trade_Center,_torre_de_Jaume_I_i_cobert_de_l%27America%27s_Cup.jpg
@@ -54,6 +53,23 @@ export const StyledHomeImage = styled.div`
     animation: gradient 15s ease infinite;
   }
 
+  /* Static dark vignette overlay on top of animated gradient */
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    backdrop-filter: blur(2px);
+    background: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.3),
+      rgba(0, 0, 0, 0.6)
+    );
+    pointer-events: none;
+  }
+
   @keyframes gradient {
     0% {
       background-position: 0 50%;
@@ -82,32 +98,71 @@ export const StyledTitleContainer = styled(motion.div)`
   border-radius: 10px;
   width: 70%;
   margin-bottom: 1rem;
-  padding: 10px 5px;
+  padding: 5px 20px;
 
   @media (max-width: ${BIG_BREAKPOINT}px) {
     width: 80%;
+    padding: 5px 10px;
+  }
+
+  @media (max-width: 480px) {
+    width: 90%;
+    padding: 5px 8px;
   }
 `;
 
 export const StyledTitle = styled(motion.h1)`
   padding: 0.5rem 1rem;
   color: ${Color.WHITE};
   font-family: "Square 721 Regular", sans-serif;
+  font-weight: 800;
+  font-size: 3rem;
+  letter-spacing: 0.03em;
+  line-height: 1.2;
+  text-shadow: 
+    0 2px 4px rgba(0, 0, 0, 0.9),
+    0 4px 8px rgba(0, 0, 0, 0.7),
+    0 8px 16px rgba(0, 0, 0, 0.5);
+
+  @media (max-width: ${BIG_BREAKPOINT}px) {
+    font-size: 2rem;
+    letter-spacing: 0.02em;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 1.5rem;
+  }
 `;
 
 export const StyledSubtitle = styled(motion.h2) <StyledSubtitleProps>`
   color: ${(props) => props.color ?? Color.WHITE};
   font-family: "DejaVu Sans ExtraLight", sans-serif;
-  font-size: 1.25rem;
-  font-weight: ${(props) => props.fontWeight ?? 400};
+  font-size: 1.5rem;
+  font-weight: ${(props) => props.fontWeight ?? 600};
+  letter-spacing: 0.02em;
   text-shadow: ${(props) =>
-    props.shadow ? "2px 2px 2px rgba(0, 0, 0, 0.5)" : "none"};
+    props.shadow
+      ? `0 1px 2px rgba(0, 0, 0, 0.9),
+         0 2px 4px rgba(0, 0, 0, 0.6),
+         0 4px 8px rgba(0, 0, 0, 0.4)`
+      : `0 1px 2px rgba(0, 0, 0, 0.8),
+         0 2px 4px rgba(0, 0, 0, 0.5)`};
 
-  padding: 0.25rem;
 
   a {
     text-decoration: none;
     color: ${Color.LIGHT_BLUE};
+    text-shadow: 
+      0 1px 2px rgba(0, 0, 0, 0.9),
+      0 2px 4px rgba(0, 0, 0, 0.6);
+  }
+
+  @media (max-width: ${BIG_BREAKPOINT}px) {
+    font-size: 1.1rem;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 1rem;
   }
 `;
 
@@ -166,7 +221,7 @@ export const StyledBlueSlash = styled(motion.p)`
   height: 100%;
 `;
 export const StyledDevBcnLogo = styled.img`
-  margin: 20px;
+  margin-top: 20px;
   height: 13rem;
   aspect-ratio: 800/327;
   transition: height 0.2s ease-in-out;
@@ -214,15 +269,17 @@ export const StyledPlusSign = styled.span`
   }
 `;
 export const StyledLogoDiv = styled(motion.div)`
-  padding-top: 4rem;
-  padding-bottom: 2rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   display: flex;
 
   @media (max-width: ${BIGGER_BREAKPOINT}px) {
+    padding-top: 2rem;
     flex-direction: column;
   }
 
   @media (max-width: ${BIG_BREAKPOINT}px) {
+    padding-top: 1rem;
     flex-direction: column;
   }
 `;

wordlist.txt

@@ -1,9 +1,12 @@
 APIs
 Axios
 BvU
+camelCase
 CFP
 CRA's
 Cfp
+DevTools
+DNS
 DOM
 DevBCN
 DevBcn
@@ -54,6 +57,8 @@ ico
 icougil
 incimages
 integrations
+io
+JobsData
 jonathanvila
 jpg
 js
@@ -64,28 +69,39 @@ linkedin
 localhost
 Lucide
 matchers
+metatags
 minified
 nd
 npm
+OG
 onChange
 param
 pbs
 png
+PageMetadata
+Preconnect
 predeploy
+Prefetch
+Preload
+preloaded
 PrimeIcons
 px
 pwa
 queryKey
 rd
 robotstxt
+SEO
 selectedGroupId
+sessionize
+SSR
 st
 svg
 TanStack
 th
 toHaveTextContent
 tsconfig
 twimg
+typeof
 txt
 urlOrId
 urlOrYear
@@ -103,4 +119,5 @@ wikipedia
 www
 xSBqFVCYSpsyuO
 YAGNI
-youtube
+youtube
+YYYY