V3-hero

src/components/sections/customerCasesEntry/CustomerCasesList.tsx

@@ -24,47 +24,49 @@ const CustomerCaseList = ({
   customerCasePageSlug,
 }: CustomerCasesProps) => {
   const [selectedCustomerCase, setSelectedCustomerCase] =
-    useState<CustomerCaseEntry>(customerCases[0] || null);
+    useState<CustomerCaseEntry>(customerCases[0]);
 
   const deliveryNames = [
-    selectedCustomerCase.projectInfo.deliveries.projectManagement &&
+    selectedCustomerCase?.projectInfo.deliveries.projectManagement &&
       "Project Management",
-    selectedCustomerCase.projectInfo.deliveries.design && "Design",
-    selectedCustomerCase.projectInfo.deliveries.development && "Development",
+    selectedCustomerCase?.projectInfo.deliveries.design && "Design",
+    selectedCustomerCase?.projectInfo.deliveries.development && "Development",
   ].filter(Boolean);
 
   return (
-    <div className={styles.container}>
-      <div className={styles.wrapper}>
-        <div className={styles.info}>
-          <div className={styles.infoInnerMaxWidth}>
-            <TagRow
-              customerCases={customerCases}
-              selectedCustomerCase={selectedCustomerCase}
-              setSelectedCustomerCase={setSelectedCustomerCase}
-            />
-            <Link
-              className={styles.link}
-              href={`/${language}/${customerCasePageSlug}/${selectedCustomerCase.slug}`}
-            >
-              <CardInfo
+    selectedCustomerCase && (
+      <div className={styles.container}>
+        <div className={styles.wrapper}>
+          <div className={styles.info}>
+            <div className={styles.infoInnerMaxWidth}>
+              <TagRow
+                customerCases={customerCases}
                 selectedCustomerCase={selectedCustomerCase}
-                deliveryNames={deliveryNames}
+                setSelectedCustomerCase={setSelectedCustomerCase}
               />
-            </Link>
+              <Link
+                className={styles.link}
+                href={`/${language}/${customerCasePageSlug}/${selectedCustomerCase.slug}`}
+              >
+                <CardInfo
+                  selectedCustomerCase={selectedCustomerCase}
+                  deliveryNames={deliveryNames}
+                />
+              </Link>
+            </div>
           </div>
+          <Link
+            tabIndex={-1}
+            className={styles.imageWrapper}
+            href={`/${language}/${customerCasePageSlug}/${selectedCustomerCase.slug}`}
+          >
+            {selectedCustomerCase.image && (
+              <SanitySharedImage image={selectedCustomerCase.image} />
+            )}
+          </Link>
         </div>
-        <Link
-          tabIndex={-1}
-          className={styles.imageWrapper}
-          href={`/${language}/${customerCasePageSlug}/${selectedCustomerCase.slug}`}
-        >
-          {selectedCustomerCase.image && (
-            <SanitySharedImage image={selectedCustomerCase.image} />
-          )}
-        </Link>
       </div>
-    </div>
+    )
   );
 };
 export default CustomerCaseList;

src/components/sections/hero/Hero.tsx

@@ -1,6 +1,5 @@
-import LinkButton from "src/components/linkButton/LinkButton";
+import { SanityImage } from "src/components/image/SanityImage";
 import Text from "src/components/text/Text";
-import { ILink } from "studio/lib/interfaces/navigation";
 import { HeroSection } from "studio/lib/interfaces/pages";
 
 import styles from "./hero.module.css";
@@ -15,38 +14,19 @@ export const Hero = ({ hero, isLanding = false }: HeroProps) => {
     return;
   }
   return (
-    <div
-      className={`${styles.wrapper} ${isLanding ? styles.secondaryColor : styles.primaryColor}`}
-    >
+    <div className={styles.wrapper}>
       {isLanding ? (
         <div className={styles.secondary}>
-          <Text type="h1" className={styles.title}>
-            {hero.basicTitle}
-          </Text>
-          {hero.description && (
-            <div className={styles.description}>
-              <Text type="bodyBig">{hero.description}</Text>
-            </div>
-          )}
-          <ul className={styles.cta}>
-            {hero.callToActions?.map((cta: ILink, index) => (
-              <li key={cta._key}>
-                <LinkButton
-                  link={cta}
-                  type={
-                    hero.callToActions.length > 1 && index === 0
-                      ? "secondary"
-                      : "primary"
-                  }
-                />
-              </li>
-            ))}
-          </ul>
+          <Text type="bodyBig"> {hero.title}</Text>
+          <Text type="h1">{hero.description}</Text>
+          <div className={styles.image}>
+            <SanityImage image={hero.image} />
+          </div>
         </div>
       ) : (
+        // If splashy segments are added to the hero section in the landing page, this serves as a great fallback option.
         <div className={styles.primary}>
-          <Text type="h1">{hero.basicTitle}</Text>
-          {hero.description && <Text type="bodyXl">{hero.description}</Text>}
+          <Text type="h1">{hero.description}</Text>
         </div>
       )}
     </div>

src/components/sections/hero/hero.module.css

@@ -1,84 +1,66 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  align-items: center;
   overflow: hidden;
-}
-
-.secondaryColor {
-  padding: 7.5rem 2rem;
+  padding: var(--padding-l) 0rem;
 
-  @media (min-width: 640px) {
-    text-align: center;
-    padding: 7.5rem 3rem;
+  @media (max-width: 834px) {
+    padding: var(--padding-l) 0rem;
   }
 
-  @media (min-width: 1024px) {
-    padding: 15rem 7.5rem;
-  }
-}
-
-.primaryColor {
-  background-color: var(--background-bg-light-primary);
-  padding: 7.5rem 2rem 5rem 2rem;
-
-  @media (min-width: 640px) {
-    padding: 7.5rem 3rem 5rem 3rem;
-  }
-
-  @media (min-width: 1024px) {
-    padding: 7.5rem 2rem 5rem 2rem;
+  @media (max-width: 425px) {
+    padding: 0rem;
   }
 }
 
 .shared {
   width: 100%;
-  max-width: 1200px;
+  max-width: 70.125rem;
   display: flex;
   flex-direction: column;
-  gap: 3rem;
 }
 
 .secondary {
   composes: shared;
-  align-items: center;
-}
-
-.primary {
-  composes: shared;
-  align-items: flex-start;
-}
+  align-self: center;
+  padding: var(--padding-xl) var(--padding-rem);
+  gap: var(--padding-rem);
 
-.title {
-  font-weight: 700;
-  text-align: center;
-}
+  @media (max-width: 834px) {
+    padding: var(--padding-l) var(--padding-s);
+  }
 
-.description {
-  margin: auto;
-  align-self: stretch;
+  @media (max-width: 425px) {
+    padding: var(--padding-l) var(--padding-s);
+  }
 }
 
-.cta {
-  margin: 0;
-  padding: 0;
+.image {
   width: 100%;
-  list-style-type: none;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 1.5rem;
+  /* max-width: 30rem; */
+  justify-content: flex-end;
+  display: flex !important;
+  padding: var(--padding-xl) var(--padding-rem) var(--padding-rem)
+    var(--padding-rem);
 
-  @media (min-width: 640px) {
-    flex-direction: row;
-    justify-content: center;
-    gap: 1.5rem;
+  @media (max-width: 834px) {
+    padding: var(--padding-l) var(--padding-rem) var(--padding-rem)
+      var(--padding-rem);
   }
 
-  & > li {
-    @media (max-width: 640px) {
-      width: 100%;
-    }
+  @media (max-width: 425px) {
+    padding: var(--padding-s) var(--padding-rem) var(--padding-rem)
+      var(--padding-rem);
   }
 }
+
+.image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: 42rem !important;
+}
+
+.primary {
+  composes: shared;
+}

src/styles/global.css

@@ -142,6 +142,15 @@ html {
   --radius-medium: 12px;
   --radius-large: 24px;
 
+  /* Padding */
+  --padding-xs: 0.25rem;
+  --padding-s: 0.75rem;
+  --padding-rem: 1rem;
+  --padding-m: 1.5rem;
+  --padding-l: 3rem;
+  --padding-xl: 6rem;
+  --padding-xxl: 9rem;
+
   font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
 }
 

studio/lib/interfaces/pages.ts

@@ -10,9 +10,9 @@ import { ILink } from "./navigation";
 export interface HeroSection {
   _type: "hero";
   _key: string;
-  basicTitle: string;
-  callToActions: ILink[];
+  title: string;
   description: string;
+  image: IImage;
 }
 
 export interface LogoSaladSection {

studio/lib/queries/pages.ts

@@ -8,10 +8,8 @@ const SECTIONS_FRAGMENT = groq`
     ...,
     _type == "hero" => {
       ...,
-      callToActions[] {
-        ...,
-        ${TRANSLATED_LINK_FRAGMENT}
-      }
+      "title": ${translatedFieldFragment("title")},
+      "description": ${translatedFieldFragment("description")},
     },
     _type == "article" => {
       ...,