From 2cb9c6b1044e0dac505144a204e2643c058a8b92 Mon Sep 17 00:00:00 2001
From: InnerDesires <vlad.tertyshny@gmail.com>
Date: Tue, 29 Sep 2026 00:46:17 +0300
Subject: [PATCH 1/2] fix: replace hero mock's generic illustration with a
 lesson-player cover [preview]

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 src/components/Home/Hero.tsx   | 28 +++++++++++++++++++++++-----
 src/components/Home/content.ts |  3 +++
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/Home/Hero.tsx b/src/components/Home/Hero.tsx
index e65afce..de84c3a 100644
--- a/src/components/Home/Hero.tsx
+++ b/src/components/Home/Hero.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import Link from 'next/link'
-import { ArrowRight, Award, Check, PlayCircle, Trophy } from 'lucide-react'
+import { ArrowRight, Award, Check, Play, Trophy } from 'lucide-react'
 import { FadeIn } from './FadeIn'
 import { XpChip } from '@/components/brand'
 
@@ -16,6 +16,7 @@ type Props = {
   supportName: string
   features: string[]
   mock: {
+    lesson: string
     course: string
     progress: string
     steps: string[]
@@ -123,15 +124,32 @@ export function HeroSection({
         <FadeIn delay={300}>
           <div className="relative mx-auto w-full max-w-[440px] pb-10 pt-6 lg:mx-0 lg:ml-auto" aria-hidden="true">
             <div className="overflow-hidden rounded-2xl border border-line-2 bg-[linear-gradient(150deg,rgb(4_40_113/0.62),var(--navy))] shadow-[0_30px_60px_-30px_rgb(0_0_0/0.7)]">
-              <div className="relative aspect-[16/9] bg-navy-2">
+              <div
+                className="relative aspect-[16/9] overflow-hidden"
+                style={{
+                  background:
+                    'radial-gradient(360px 220px at 78% 12%, rgb(249 140 31 / 0.28), transparent 62%), radial-gradient(420px 260px at 10% 100%, rgb(42 84 176 / 0.55), transparent 65%), linear-gradient(160deg, #10204a, #0b1327)',
+                }}
+              >
                 <img
-                  src="/illustrations/course-leadership.svg"
+                  src="/illustrations/hero-lines.svg"
                   alt=""
-                  className="h-full w-full object-cover"
+                  className="absolute -bottom-6 -right-10 w-[78%] max-w-none opacity-70"
                 />
+                <span className="absolute left-4 top-4 rounded-full bg-void/70 px-3 py-1 font-display text-[11px] font-semibold uppercase tracking-[0.14em] text-cloud backdrop-blur">
+                  {mock.lesson}
+                </span>
                 <span className="absolute inset-0 grid place-items-center">
-                  <PlayCircle className="h-14 w-14 text-cloud/90 drop-shadow-lg" strokeWidth={1.5} />
+                  <span className="grid h-16 w-16 place-items-center rounded-full bg-orange shadow-[0_0_0_10px_rgb(249_140_31/0.18),0_12px_32px_-8px_rgb(249_140_31/0.7)]">
+                    <Play className="ml-0.5 h-6 w-6 text-[#1B1204]" fill="currentColor" strokeWidth={0} />
+                  </span>
                 </span>
+                <div className="absolute inset-x-4 bottom-3.5 flex items-center gap-3">
+                  <div className="h-1 flex-1 rounded-full bg-cloud/25">
+                    <div className="h-full w-2/5 rounded-full bg-orange" />
+                  </div>
+                  <span className="num text-[11px] font-semibold text-cloud/80">04:12 / 10:30</span>
+                </div>
               </div>
               <div className="p-5">
                 <h3 className="font-display text-lg font-bold uppercase tracking-[0.04em] text-cloud">
diff --git a/src/components/Home/content.ts b/src/components/Home/content.ts
index 25e0957..c964d7a 100644
--- a/src/components/Home/content.ts
+++ b/src/components/Home/content.ts
@@ -20,6 +20,7 @@ type HomeContent = {
     supportName: string
     features: string[]
     mock: {
+      lesson: string
       course: string
       progress: string
       steps: string[]
@@ -111,6 +112,7 @@ const content: Record<SiteLocale, HomeContent> = {
       supportName: 'УКРЗАЛІЗНИЦЯ',
       features: ['Відеоуроки', 'Тести', 'XP та рейтинг', 'Сертифікати'],
       mock: {
+        lesson: 'Урок 3',
         course: 'Лідерство для підлітків',
         progress: '3 із 5 кроків',
         steps: ['Вступ до лідерства', 'Робота в команді', 'Публічний виступ'],
@@ -254,6 +256,7 @@ const content: Record<SiteLocale, HomeContent> = {
       supportName: 'UKRZALIZNYTSIA',
       features: ['Video lessons', 'Quizzes', 'XP & leaderboard', 'Certificates'],
       mock: {
+        lesson: 'Lesson 3',
         course: 'Leadership for teens',
         progress: '3 of 5 steps',
         steps: ['Intro to leadership', 'Teamwork', 'Public speaking'],

From 6ebd383bc67b03baa69b6a9b45b835afdaa9293f Mon Sep 17 00:00:00 2001
From: InnerDesires <vlad.tertyshny@gmail.com>
Date: Tue, 29 Sep 2026 00:57:28 +0300
Subject: [PATCH 2/2] fix: homepage UI audit fixes across breakpoints [preview]

- About goals card no longer stretches to the text column height
- Hero preview: badge no longer covers a step, XP chip is a pill
- Feature cards compact on phones, last card spans the row on tablets
- Stats stay 3 columns on phones
- Partner rows wrap and centre (no orphan tile)
- Header brand text hides between md and lg so the nav fits the 90px logo
- Third course/news card hidden on 2-column layouts to avoid an orphan

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 src/components/Home/About.tsx         |  6 +++---
 src/components/Home/CoursesServer.tsx |  4 ++--
 src/components/Home/Hero.tsx          |  4 ++--
 src/components/Home/News.tsx          |  2 +-
 src/components/Home/NewsServer.tsx    |  2 +-
 src/components/Home/Partners.tsx      |  6 +++---
 src/components/Home/Platform.tsx      | 24 +++++++++++++-----------
 src/components/Logo/Brand.tsx         |  2 +-
 8 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/components/Home/About.tsx b/src/components/Home/About.tsx
index ff889db..e246f7b 100644
--- a/src/components/Home/About.tsx
+++ b/src/components/Home/About.tsx
@@ -36,7 +36,7 @@ export function AboutSection({
         aria-hidden="true"
       />
       <div className="container relative">
-        <div className="grid gap-12 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)] lg:items-stretch">
+        <div className="grid gap-12 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)] lg:items-start">
           <div>
             <FadeIn>
               <Eyebrow>{tag}</Eyebrow>
@@ -67,8 +67,8 @@ export function AboutSection({
             </FadeIn>
           </div>
 
-          <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">
+          <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 md:p-8">
               <h3 className="font-display text-sm font-semibold uppercase tracking-[0.14em] text-amber">
                 {goalsTitle}
               </h3>
diff --git a/src/components/Home/CoursesServer.tsx b/src/components/Home/CoursesServer.tsx
index e43d09d..b671247 100644
--- a/src/components/Home/CoursesServer.tsx
+++ b/src/components/Home/CoursesServer.tsx
@@ -31,7 +31,7 @@ export async function CoursesGridServer({ locale }: Props) {
   if (docs.length === 0) return null
 
   return (
-    <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+    <div className="grid gap-5 sm:grid-cols-2 sm:[&>*:nth-child(3)]:hidden lg:grid-cols-3 lg:[&>*:nth-child(3)]:block">
       {docs.map((course) => (
         <CourseCard key={course.id} course={course} locale={locale} />
       ))}
@@ -41,7 +41,7 @@ export async function CoursesGridServer({ locale }: Props) {
 
 export function CoursesGridSkeleton() {
   return (
-    <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+    <div className="grid gap-5 sm:grid-cols-2 sm:[&>*:nth-child(3)]:hidden lg:grid-cols-3 lg:[&>*:nth-child(3)]:block">
       {[0, 1, 2].map((i) => (
         <div key={i} className="animate-pulse overflow-hidden rounded-[14px] border border-line bg-card">
           <div className="aspect-[16/9] bg-navy-2" />
diff --git a/src/components/Home/Hero.tsx b/src/components/Home/Hero.tsx
index de84c3a..592fb45 100644
--- a/src/components/Home/Hero.tsx
+++ b/src/components/Home/Hero.tsx
@@ -151,7 +151,7 @@ export function HeroSection({
                   <span className="num text-[11px] font-semibold text-cloud/80">04:12 / 10:30</span>
                 </div>
               </div>
-              <div className="p-5">
+              <div className="p-5 pb-11">
                 <h3 className="font-display text-lg font-bold uppercase tracking-[0.04em] text-cloud">
                   {mock.course}
                 </h3>
@@ -182,7 +182,7 @@ export function HeroSection({
 
             <XpChip
               xp={30}
-              className="absolute right-2 top-0 -rotate-3 shadow-[0_10px_24px_-10px_rgb(249_140_31/0.7)] sm:-right-4"
+              className="absolute right-2 top-0 -rotate-3 rounded-full border border-orange/40 bg-void px-3.5 py-1.5 shadow-[0_10px_24px_-10px_rgb(249_140_31/0.7)] sm:-right-4"
             />
 
             <div className="absolute -bottom-0 left-2 flex items-center gap-3 rounded-xl border border-line-2 bg-void px-4 py-3 shadow-[0_18px_36px_-16px_rgb(0_0_0/0.8)] sm:-left-6">
diff --git a/src/components/Home/News.tsx b/src/components/Home/News.tsx
index 02ff2b4..d314d86 100644
--- a/src/components/Home/News.tsx
+++ b/src/components/Home/News.tsx
@@ -60,7 +60,7 @@ export function NewsSection({ tag, title, cta, items, locale }: Props) {
         />
       </FadeIn>
 
-      <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+      <div className="grid gap-5 sm:grid-cols-2 sm:[&>*:nth-child(3)]:hidden lg:grid-cols-3 lg:[&>*:nth-child(3)]:block">
         {items.map((item, i) => (
           <FadeIn key={item.slug} delay={100 + i * 100}>
             <article className="group flex h-full flex-col overflow-hidden rounded-[14px] border border-[#E4DFD2] bg-white text-ink transition-all duration-200 hover:-translate-y-1 hover:border-orange hover:shadow-[0_14px_34px_-18px_rgb(14_27_58/0.4)]">
diff --git a/src/components/Home/NewsServer.tsx b/src/components/Home/NewsServer.tsx
index a61e3f1..005a229 100644
--- a/src/components/Home/NewsServer.tsx
+++ b/src/components/Home/NewsServer.tsx
@@ -59,7 +59,7 @@ export function NewsSectionSkeleton({ locale }: Props) {
           {c.news.title}
         </h2>
       </div>
-      <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+      <div className="grid gap-5 sm:grid-cols-2 sm:[&>*:nth-child(3)]:hidden lg:grid-cols-3 lg:[&>*:nth-child(3)]:block">
         {[0, 1, 2].map((i) => (
           <div
             key={i}
diff --git a/src/components/Home/Partners.tsx b/src/components/Home/Partners.tsx
index 29eb466..8aee3ff 100644
--- a/src/components/Home/Partners.tsx
+++ b/src/components/Home/Partners.tsx
@@ -28,7 +28,7 @@ function PartnerTile({ partner, featured }: { partner: Partner; featured?: boole
       title={partner.name}
       aria-label={partner.name}
       className={`group flex w-full items-center justify-center rounded-2xl border border-line-2 bg-[linear-gradient(150deg,rgb(4_40_113/0.5),var(--navy))] transition-all duration-300 hover:-translate-y-1 hover:border-orange/60 hover:shadow-[0_18px_36px_-18px_rgb(249_140_31/0.45)] focus-visible:outline-2 focus-visible:outline-orange ${
-        featured ? 'h-32 p-6 sm:h-40 sm:p-8' : 'h-24 p-4 sm:h-28 sm:p-5'
+        featured ? 'h-24 p-5 sm:h-40 sm:p-8' : 'h-24 p-4 sm:h-28 sm:p-5'
       }`}
     >
       <img
@@ -72,9 +72,9 @@ export function PartnersSection({ tag, title, description, items }: Props) {
               </li>
             ))}
           </ul>
-          <ul className="mx-auto mt-4 grid max-w-5xl grid-cols-2 gap-4 sm:mt-5 sm:grid-cols-3 sm:gap-5 lg:grid-cols-4">
+          <ul className="mx-auto mt-4 flex max-w-5xl flex-wrap justify-center gap-4 sm:mt-5 sm:gap-5">
             {rest.map((partner) => (
-              <li key={partner.name}>
+              <li key={partner.name} className="w-[calc(50%-8px)] sm:w-[calc(33.333%-14px)] lg:w-[calc(25%-15px)]">
                 <PartnerTile partner={partner} />
               </li>
             ))}
diff --git a/src/components/Home/Platform.tsx b/src/components/Home/Platform.tsx
index a43debc..4dafc1f 100644
--- a/src/components/Home/Platform.tsx
+++ b/src/components/Home/Platform.tsx
@@ -23,19 +23,21 @@ export function PlatformSection({ tag, title, features, statsTag, statsTitle, st
       <FadeIn>
         <SectionHead eyebrow={tag} title={title} />
       </FadeIn>
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5 [&>*:last-child:nth-child(odd)]:sm:col-span-2 lg:[&>*:last-child:nth-child(odd)]:col-span-1">
         {features.map((feature, i) => {
           const Icon = ICONS[i % ICONS.length]
           return (
             <FadeIn key={feature.title} delay={i * 80}>
-              <div className="h-full rounded-2xl border border-line-2 bg-[linear-gradient(150deg,rgb(4_40_113/0.5),var(--navy))] p-5 transition-colors hover:border-orange/55">
-                <span className="grid h-11 w-11 place-items-center rounded-xl bg-orange/16">
+              <div className="flex h-full items-start gap-4 rounded-2xl border border-line-2 bg-[linear-gradient(150deg,rgb(4_40_113/0.5),var(--navy))] p-5 transition-colors hover:border-orange/55 sm:block">
+                <span className="grid h-11 w-11 flex-none place-items-center rounded-xl bg-orange/16">
                   <Icon className="h-5 w-5 text-orange" />
                 </span>
-                <h3 className="mt-4 font-display text-sm font-bold uppercase tracking-[0.1em] text-cloud">
-                  {feature.title}
-                </h3>
-                <p className="mt-2 text-[13px] leading-relaxed text-fog">{feature.text}</p>
+                <div>
+                  <h3 className="sm:mt-4 font-display text-sm font-bold uppercase tracking-[0.1em] text-cloud">
+                    {feature.title}
+                  </h3>
+                  <p className="mt-2 text-[13px] leading-relaxed text-fog">{feature.text}</p>
+                </div>
               </div>
             </FadeIn>
           )
@@ -43,20 +45,20 @@ export function PlatformSection({ tag, title, features, statsTag, statsTitle, st
       </div>
 
       <FadeIn delay={100}>
-        <div className="mt-16 rounded-2xl border border-line-2 bg-navy/50 px-6 py-8 md:px-10 md:py-10">
+        <div className="mt-16 rounded-2xl border border-line-2 bg-navy/50 px-4 py-8 sm:px-6 md:px-10 md:py-10">
           <div className="flex flex-col items-center text-center">
             <span className="eyebrow">{statsTag}</span>
             <h2 className="heading-display mt-2.5 text-[clamp(22px,2.6vw,30px)]">{statsTitle}</h2>
           </div>
-          <dl className="mt-8 grid gap-8 sm:grid-cols-3">
+          <dl className="mt-8 grid grid-cols-3 gap-3 sm:gap-8">
             {stats.map((stat) => (
               <div key={stat.label} className="text-center">
                 <dd className="order-2">
-                  <b className="num block font-display text-[clamp(40px,5vw,60px)] font-extrabold leading-none text-orange">
+                  <b className="num block font-display text-[clamp(28px,7vw,60px)] font-extrabold leading-none text-orange">
                     <StatCounter value={stat.value} />
                   </b>
                 </dd>
-                <dt className="mt-2 text-[12.5px] font-semibold uppercase tracking-[0.1em] text-fog">
+                <dt className="mt-2 text-[10px] font-semibold uppercase tracking-[0.08em] text-fog sm:text-[12.5px] sm:tracking-[0.1em]">
                   {stat.label}
                 </dt>
               </div>
diff --git a/src/components/Logo/Brand.tsx b/src/components/Logo/Brand.tsx
index 45a1291..a239944 100644
--- a/src/components/Logo/Brand.tsx
+++ b/src/components/Logo/Brand.tsx
@@ -32,7 +32,7 @@ export const Brand: React.FC<{
       <span
         className={cn(
           'font-display text-[17px] font-semibold uppercase leading-[1.1] tracking-[0.06em] whitespace-nowrap text-cloud md:text-[19px]',
-          size === 'header' && 'mt-[22px]',
+          size === 'header' && 'mt-[22px] md:hidden lg:block',
         )}
       >
         {t.brandName1} <em className="not-italic text-orange">{t.brandName2}</em>