feat(home): update hero typography + locations slider layout

- Hero: larger title (clamp to 120px), wider text block, adjusted padding - LocationsSlider: overlay moved to left side, white text color, larger description Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-28 14:33:06 +01:00 · 2026-05-28 14:33:06 +01:00 · 492f7934b6
commit 492f7934b6
parent 4cc6586366
4 changed files with 202 additions and 48 deletions
--- a/next-env.d.ts
+++ b/next-env.d.ts
@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import './.next/types/routes.d.ts'
+import './.next/dev/types/routes.d.ts'

 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
--- a/src/components/sections/Hero.tsx
+++ b/src/components/sections/Hero.tsx
@ -76,17 +76,16 @@ export function Hero({ hero }: HeroProps) {
      />

      {/* ── Text content (above T-Rex z-[20]) ── */}
-      <div className="relative z-[25] flex flex-col px-6 pt-[100px] pb-[60px] lg:px-0 lg:pt-[200px] lg:pb-[80px]">
-        {/* Align with header: max-w-[1204px] + px-[30px] mirrors HeaderClient inner container */}
-        <div className="lg:mx-auto lg:w-full lg:max-w-[1204px] lg:px-[30px]">
-          <div className="flex max-w-[85vw] flex-col gap-5 md:gap-6 lg:max-w-[46vw] xl:max-w-[44vw]">
+      <div className="relative z-[25] flex flex-col px-6 pt-[100px] pb-[60px] lg:px-0 lg:pt-[228px] lg:pb-[80px]">
+        <div className="lg:mx-auto lg:w-full lg:max-w-[1504px] lg:px-0">
+          <div className="flex max-w-[85vw] flex-col gap-5 md:gap-6 lg:max-w-[1032px] lg:pl-[154px]">
            {title && (
              <h1
                className="font-bold text-white uppercase"
                style={{
                  fontFamily: 'var(--font-montserrat, Montserrat), sans-serif',
-                  fontSize: 'clamp(28px, 4.8vw, 82px)',
-                  lineHeight: 1.05,
+                  fontSize: 'clamp(28px, 6.25vw, 120px)',
+                  lineHeight: 1.2,
                  fontWeight: 700,
                  whiteSpace: 'pre-line',
                }}
@ -99,10 +98,10 @@ export function Hero({ hero }: HeroProps) {
                className="text-white"
                style={{
                  fontFamily: 'var(--font-montserrat, Montserrat), sans-serif',
-                  fontSize: 'clamp(14px, 1.25vw, 20px)',
+                  fontSize: 'clamp(14px, 1.25vw, 24px)',
                  fontWeight: 500,
                  lineHeight: 1.5,
-                  maxWidth: '440px',
+                  maxWidth: '629px',
                }}
              >
                {subtitle}
--- a/src/components/sections/LocationsSlider.tsx
+++ b/src/components/sections/LocationsSlider.tsx
@ -98,22 +98,22 @@ export function LocationsSlider({ locations }: { locations: LocationData[] }) {
                className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
                priority={idx < 2}
              />
-              <div className="absolute top-0 right-0 flex h-full w-[327px] max-w-[60%] flex-col justify-center gap-[28px] bg-[rgba(57,104,23,0.8)] px-[30px]">
+              <div className="absolute top-0 left-[57px] flex h-full w-[327px] max-w-[calc(100%-57px)] flex-col justify-center gap-[28px] bg-[rgba(57,104,23,0.8)] px-[30px]">
                <div className="flex flex-col gap-3 text-white">
                  <h3
-                    className="text-[24px] leading-[1.1] font-bold uppercase"
+                    className="text-[24px] leading-[1.1] font-bold"
                    style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
                  >
                    {loc.name}
                  </h3>
                  <p
-                    className="text-[20px] leading-[1.5] font-medium text-[#fdcf54]"
+                    className="text-[20px] leading-[1.5] font-normal text-white"
                    style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
                  >
                    {loc.tagline}
                  </p>
                  <p
-                    className="line-clamp-5 text-[15px] leading-[1.5] font-normal text-white/90"
+                    className="line-clamp-6 text-[16px] leading-[1.5] font-normal text-white"
                    style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
                  >
                    {loc.description}
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@ -81,6 +81,7 @@ export interface Config {
    'tickets-page': TicketsPage
    'locations-page': LocationsPage
    'blog-index-page': BlogIndexPage
+    'dinosaur-page': DinosaurPage
  }
  globalsSelect: {
    'home-page': HomePageSelect<false> | HomePageSelect<true>
@ -95,6 +96,7 @@ export interface Config {
    'tickets-page': TicketsPageSelect<false> | TicketsPageSelect<true>
    'locations-page': LocationsPageSelect<false> | LocationsPageSelect<true>
    'blog-index-page': BlogIndexPageSelect<false> | BlogIndexPageSelect<true>
+    'dinosaur-page': DinosaurPageSelect<false> | DinosaurPageSelect<true>
  }
  locale: null
  widgets: {
@ -753,23 +755,6 @@ export interface Form {
            blockName?: string | null
            blockType: 'textarea'
          }
-        | {
-            name: string
-            label?: string | null
-            width?: number | null
-            defaultValue?: string | null
-            options?:
-              | {
-                  label: string
-                  value: string
-                  id?: string | null
-                }[]
-              | null
-            required?: boolean | null
-            id?: string | null
-            blockName?: string | null
-            blockType: 'radio'
-          }
        | {
            name: string
            label?: string | null
@ -1508,24 +1493,6 @@ export interface FormsSelect<T extends boolean = true> {
              id?: T
              blockName?: T
            }
-        radio?:
-          | T
-          | {
-              name?: T
-              label?: T
-              width?: T
-              defaultValue?: T
-              options?:
-                | T
-                | {
-                    label?: T
-                    value?: T
-                    id?: T
-                  }
-              required?: T
-              id?: T
-              blockName?: T
-            }
        date?:
          | T
          | {
@ -2117,6 +2084,120 @@ export interface BlogIndexPage {
  updatedAt?: string | null
  createdAt?: string | null
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "dinosaur-page".
+ */
+export interface DinosaurPage {
+  id: number
+  heroTitle?: string | null
+  heroDescription?: string | null
+  /**
+   * Число у круглому бейджі (наприклад "26")
+   */
+  heroStat?: string | null
+  heroStatLabel?: string | null
+  /**
+   * Головне зображення героя (T-Rex / динозавр)
+   */
+  heroImage?: (number | null) | Media
+  heroFeatures?:
+    | {
+        text: string
+        id?: string | null
+      }[]
+    | null
+  /**
+   * 8 видів для інтерактивного колеса
+   */
+  dinosaurs?:
+    | {
+        /**
+         * Назва виду
+         */
+        name: string
+        /**
+         * Наприклад: Крейдяний
+         */
+        epoch?: string | null
+        /**
+         * Наприклад: 12 м
+         */
+        length?: string | null
+        /**
+         * Наприклад: 7 т
+         */
+        weight?: string | null
+        /**
+         * Велике зображення (центр колеса)
+         */
+        image?: (number | null) | Media
+        /**
+         * Мініатюра для дуги колеса
+         */
+        thumbnailImage?: (number | null) | Media
+        id?: string | null
+      }[]
+    | null
+  /**
+   * Фото з динопарку
+   */
+  galleryImages?:
+    | {
+        image: number | Media
+        id?: string | null
+      }[]
+    | null
+  activitiesTitle?: string | null
+  activitiesDescription?: string | null
+  activities?:
+    | {
+        name: string
+        /**
+         * Наприклад: 150 грн
+         */
+        price?: string | null
+        description?: string | null
+        image?: (number | null) | Media
+        href?: string | null
+        id?: string | null
+      }[]
+    | null
+  whyVisitTitle?: string | null
+  whyVisitItems?:
+    | {
+        title: string
+        description: string
+        id?: string | null
+      }[]
+    | null
+  /**
+   * Якщо порожньо — секція приховується
+   */
+  reviewVideos?:
+    | {
+        src: string
+        poster?: string | null
+        label?: string | null
+        id?: string | null
+      }[]
+    | null
+  /**
+   * Час роботи
+   */
+  workingHours?: string | null
+  comboDescription?: string | null
+  meta?: {
+    title?: string | null
+    description?: string | null
+    /**
+     * Maximum upload file size: 12MB. Recommended file size for images is <500KB.
+     */
+    image?: (number | null) | Media
+  }
+  updatedAt?: string | null
+  createdAt?: string | null
+}
 /**
 * This interface was referenced by `Config`'s JSON-Schema
 * via the `definition` "home-page_select".
@ -2503,6 +2584,80 @@ export interface BlogIndexPageSelect<T extends boolean = true> {
  createdAt?: T
  globalType?: T
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "dinosaur-page_select".
+ */
+export interface DinosaurPageSelect<T extends boolean = true> {
+  heroTitle?: T
+  heroDescription?: T
+  heroStat?: T
+  heroStatLabel?: T
+  heroImage?: T
+  heroFeatures?:
+    | T
+    | {
+        text?: T
+        id?: T
+      }
+  dinosaurs?:
+    | T
+    | {
+        name?: T
+        epoch?: T
+        length?: T
+        weight?: T
+        image?: T
+        thumbnailImage?: T
+        id?: T
+      }
+  galleryImages?:
+    | T
+    | {
+        image?: T
+        id?: T
+      }
+  activitiesTitle?: T
+  activitiesDescription?: T
+  activities?:
+    | T
+    | {
+        name?: T
+        price?: T
+        description?: T
+        image?: T
+        href?: T
+        id?: T
+      }
+  whyVisitTitle?: T
+  whyVisitItems?:
+    | T
+    | {
+        title?: T
+        description?: T
+        id?: T
+      }
+  reviewVideos?:
+    | T
+    | {
+        src?: T
+        poster?: T
+        label?: T
+        id?: T
+      }
+  workingHours?: T
+  comboDescription?: T
+  meta?:
+    | T
+    | {
+        title?: T
+        description?: T
+        image?: T
+      }
+  updatedAt?: T
+  createdAt?: T
+  globalType?: T
+}
 /**
 * This interface was referenced by `Config`'s JSON-Schema
 * via the `definition` "collections_widget".