feat: platform-first homepage redesign, abstract lines, full partners grid

src/Footer/Component.tsx

@@ -8,7 +8,7 @@ import type { SiteLocale } from '@/utilities/locales'
 import { CMSLink } from '@/components/Link'
 import { Brand } from '@/components/Logo/Brand'
 import { LanguageSwitcher } from '@/components/LanguageSwitcher'
-import { Rails } from '@/components/brand'
+import { AccentLine } from '@/components/brand'
 import { getFrontendMessages } from '@/utilities/i18n'
 import { getHomeContent } from '@/components/Home/content'
 
@@ -36,7 +36,7 @@ export async function Footer({ locale }: { locale: SiteLocale }) {
         >
           {t.brandName1} {t.brandName2}
         </div>
-        <Rails />
+        <AccentLine />
 
         <div className="grid gap-10 py-9 sm:grid-cols-2 lg:grid-cols-[1.4fr_1fr_1fr_1.2fr]">
           <div>

src/Header/Component.client.tsx

@@ -15,8 +15,8 @@ interface HeaderClientProps {
 export const HeaderClient: React.FC<HeaderClientProps> = ({ data, locale }) => {
   return (
     <header className="sticky top-0 z-40 w-full border-b border-line bg-void/85 shadow-[0_1px_0_rgb(42_84_176/0.25)] backdrop-blur-xl">
-      <div className="container flex h-16 items-center gap-7">
-        <Brand locale={locale} testId="header-logo-link" />
+      <div className="container flex h-20 items-center gap-7">
+        <Brand locale={locale} size="header" className="self-start" testId="header-logo-link" />
         <div className="relative ml-auto flex items-center">
           <HeaderNav data={data} locale={locale} />
         </div>

src/app/(frontend)/[locale]/courses/category/[slug]/page.tsx

@@ -8,7 +8,7 @@ import { ArrowLeft } from 'lucide-react'
 import { locales, type SiteLocale } from '@/utilities/locales'
 import { getFrontendMessages } from '@/utilities/i18n'
 import { CourseGrid } from '@/components/Courses/CourseGrid'
-import { Eyebrow, Rails } from '@/components/brand'
+import { Eyebrow, AccentLine } from '@/components/brand'
 import { getCatalogData } from '@/lib/courses/getCatalogData'
 import { plural } from '@/utilities/plural'
 import type { Media as MediaType } from '@/payload-types'
@@ -95,7 +95,7 @@ export default async function CourseCategoryPage({ params: paramsPromise }: Args
           <h1 className="heading-display mt-2 text-[clamp(34px,4.6vw,54px)] font-bold leading-[1.04]">
             {category.title}
           </h1>
-          <Rails className="mt-4" />
+          <AccentLine className="mt-4" />
           {category.description && (
             <p className="mt-3 max-w-[60ch] text-sm leading-relaxed text-fog">
               {category.description}

src/app/(frontend)/[locale]/search/page.tsx

@@ -8,7 +8,7 @@ import type { SiteLocale } from '@/utilities/locales'
 import { Search } from '@/search/Component'
 import PageClient from './page.client'
 import { CardPostData } from '@/components/Card'
-import { Rails } from '@/components/brand'
+import { AccentLine } from '@/components/brand'
 import { getFrontendMessages } from '@/utilities/i18n'
 import { getCachedCommentsCounts, getCachedLikesCounts } from '@/utilities/contentCounts'
 
@@ -115,7 +115,7 @@ export default async function Page({ params: paramsPromise, searchParams: search
           >
             {t.searchTitle}
           </h1>
-          <Rails className="mx-auto mt-4" />
+          <AccentLine className="mx-auto mt-4" />
           <div className="mt-8 w-full max-w-[50rem]">
             <Search />
           </div>

src/app/(frontend)/globals.css

@@ -255,34 +255,46 @@
     text-wrap: balance;
   }
 
-  /* railway-track motif under headings */
-  .rails {
-    width: 96px;
-    height: 11px;
-    position: relative;
+  /* abstract accent line under headings: a bold orange stroke trailing into a fading blue one */
+  .accent-line {
+    width: 120px;
+    height: 3px;
     flex: none;
+    border-radius: 2px;
+    background: linear-gradient(
+      90deg,
+      var(--orange) 0 34%,
+      transparent 34% 40%,
+      var(--line-2) 40%,
+      transparent
+    );
+  }
+  .on-paper .accent-line {
+    background: linear-gradient(
+      90deg,
+      var(--orange) 0 34%,
+      transparent 34% 40%,
+      #c9c2b2 40%,
+      transparent
+    );
+  }
+
+  /* full-width abstract divider between page sections */
+  .section-divider {
+    position: relative;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
   }
-  .rails::before,
-  .rails::after {
+  .section-divider::after {
     content: '';
     position: absolute;
-    left: 0;
-    right: 0;
-    height: 2.5px;
-    background: var(--orange);
+    left: 50%;
+    top: -1px;
+    width: 72px;
+    height: 3px;
+    transform: translateX(-50%);
     border-radius: 2px;
-  }
-  .rails::before {
-    top: 0;
-  }
-  .rails::after {
-    bottom: 0;
-  }
-  .rails > i {
-    position: absolute;
-    inset: 2.5px 0;
-    background: repeating-linear-gradient(90deg, var(--orange) 0 2.5px, transparent 2.5px 14px);
-    opacity: 0.6;
+    background: var(--orange);
   }
 
   /* diagonal warm-cream band (landing echo) */

src/app/(frontend)/layout.tsx

@@ -25,9 +25,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       suppressHydrationWarning
     >
       <head>
-        <link href="/favicon.ico" rel="icon" sizes="48x48" />
-        <link href="/favicon-192.png" rel="icon" type="image/png" sizes="192x192" />
-        <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
+        <link href="/favicon.ico?v=2" rel="icon" sizes="16x16 32x32 48x48" />
+        <link href="/favicon-192.png?v=2" rel="icon" type="image/png" sizes="192x192" />
+        <link href="/favicon-512.png?v=2" rel="icon" type="image/png" sizes="512x512" />
+        <link href="/apple-touch-icon.png?v=2" rel="apple-touch-icon" sizes="180x180" />
       </head>
       <body>
         <NextTopLoader color="var(--primary)" showSpinner={false} height={3} />

src/app/(frontend)/not-found.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { usePathname } from 'next/navigation'
 
 import { Button } from '@/components/ui/button'
-import { Rails } from '@/components/brand'
+import { AccentLine } from '@/components/brand'
 import { getFrontendMessages, getLocaleFromPathname } from '@/utilities/i18n'
 
 export default function NotFound() {
@@ -22,7 +22,7 @@ export default function NotFound() {
         aria-hidden="true"
       />
       <img
-        src="/illustrations/hero-rails.svg"
+        src="/illustrations/hero-lines.svg"
         alt=""
         className="pointer-events-none absolute -bottom-8 -right-32 w-[560px] max-w-none opacity-50"
         aria-hidden="true"
@@ -31,7 +31,7 @@ export default function NotFound() {
         <h1 className="heading-display num text-[clamp(96px,18vw,220px)] font-bold leading-none text-transparent [-webkit-text-stroke:2px_var(--orange)]">
           404
         </h1>
-        <Rails className="mt-2" />
+        <AccentLine className="mt-2" />
         <p className="mt-5 max-w-[40ch] text-fog">{t.notFoundMessage}</p>
         <Button asChild className="mt-7">
           <Link href={locale === 'en' ? '/en' : '/'}>{t.goHome}</Link>

src/components/Courses/CategoryCarousels.tsx

@@ -85,7 +85,7 @@ export async function CategoryCarousels({
                 <h3 className="heading-display text-[clamp(17px,2.2vw,22px)]">{cat.title}</h3>
                 <ArrowRight className="h-4 w-4 flex-none text-orange transition-transform group-hover:translate-x-1" />
               </Link>
-              <div className="no-scrollbar -mx-4 flex snap-x gap-4 overflow-x-auto px-4 pb-1 md:-mx-8 md:px-8">
+              <div className="no-scrollbar -mx-4 -mt-2 flex snap-x gap-4 overflow-x-auto px-4 pb-1 pt-2 md:-mx-8 md:px-8">
                 {visibleCourses.map((course) => (
                   <CourseCard
                     key={course.id}

src/components/Home/About.tsx

@@ -2,8 +2,8 @@
 
 import { ArrowRight, Check } from 'lucide-react'
 import { FadeIn } from './FadeIn'
-import { Eyebrow, Rails } from '@/components/brand'
-import { LANDING_URL, STORIES_URL } from './content'
+import { Eyebrow, AccentLine } from '@/components/brand'
+import { LANDING_URL } from './content'
 
 type Props = {
   tag: string
@@ -14,7 +14,6 @@ type Props = {
   goals: string[]
   support: string
   cta: string
-  storiesCta: string
 }
 
 export function AboutSection({
@@ -26,7 +25,6 @@ export function AboutSection({
   goals,
   support,
   cta,
-  storiesCta,
 }: Props) {
   return (
     <section id="about" className="relative scroll-mt-24 overflow-hidden py-24">
@@ -38,12 +36,12 @@ export function AboutSection({
         aria-hidden="true"
       />
       <div className="container relative">
-        <div className="grid gap-12 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]">
+        <div className="grid gap-12 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)] lg:items-stretch">
           <div>
             <FadeIn>
               <Eyebrow>{tag}</Eyebrow>
               <h2 className="heading-display mt-2.5 text-[clamp(26px,3.4vw,38px)]">{title}</h2>
-              <Rails className="mt-4" />
+              <AccentLine className="mt-4" />
             </FadeIn>
             <FadeIn delay={150}>
               <p className="mt-7 leading-relaxed text-fog">{description}</p>
@@ -65,21 +63,12 @@ export function AboutSection({
                   {cta}
                   <ArrowRight className="h-3.5 w-3.5" />
                 </a>
-                <a
-                  href={STORIES_URL}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex items-center gap-2 rounded-full px-6 py-2.5 font-display text-xs font-semibold uppercase tracking-[0.1em] text-amber transition-colors hover:text-orange"
-                >
-                  {storiesCta}
-                  <ArrowRight className="h-3.5 w-3.5" />
-                </a>
               </div>
             </FadeIn>
           </div>
 
-          <FadeIn delay={300}>
-            <div className="rounded-2xl border border-line-2 bg-[linear-gradient(150deg,rgb(4_40_113/0.5),var(--navy))] p-7">
+          <FadeIn delay={300} className="h-full">
+            <div className="flex h-full flex-col justify-center rounded-2xl border border-line-2 bg-[linear-gradient(150deg,rgb(4_40_113/0.5),var(--navy))] p-7">
               <h3 className="font-display text-sm font-semibold uppercase tracking-[0.14em] text-amber">
                 {goalsTitle}
               </h3>