prizes card finished

app/(main)/[page_id]/page.tsx

@@ -36,7 +36,7 @@ const PageItem = ({ params }: IParams) => {
   return (
     <div className="container">
       <div className="flex flex-col gap-8 py-6">
-        <NextSeo title={data!.data.title} description={data!.data.content} />
+        {data && <NextSeo title={data.data.title} description={data.data.content} />}
         <div className="flex flex-col gap-2">
           {data?.data.title ? <PageTitle title={data?.data.title} /> : <Loader />}
         </div>

app/(prizes)/layout.tsx

@@ -3,15 +3,24 @@ import Footer from '@/components/Footer';
 import MobileMenu from '@/components/MobileMenu';
 import Nav from '@/components/Nav';
 import MainProvider from '@/providers/MainProvider';
+import { Roboto } from 'next/font/google';
 import React, { PropsWithChildren } from 'react';
 
+const roboto = Roboto({
+  subsets: ['latin'],
+  weight: ['300', '400', '500', '700'],
+  variable: '--font-roboto',
+});
+
 const layout = ({ children }: PropsWithChildren) => {
   return (
     <MainProvider>
-      <div className="dark:bg-black transition-all h-full">
+      <div className={`dark:bg-black transition-all h-full ${roboto.className}`}>
         <h1 className="hidden">Turkmen TV</h1>
         <Nav />
-        <main>{children}</main>
+        <main className="mt-[64px] mb-[128px] w-full">
+          <div className="container">{children}</div>
+        </main>
         <Footer />
         <MobileMenu />
       </div>

app/(prizes)/prizes/[user_id]/page.tsx

@@ -0,0 +1,35 @@
+'use client';
+import PrizeCard from '@/components/prizes/PrizeCard';
+import { useRouter } from 'next/router';
+
+const page = ({ params }: { params: { user_id: string } }) => {
+  return (
+    <div className="flex flex-col gap-[64px] items-center">
+      <header className="flex flex-col gap-[24px]">
+        <div className="flex flex-col gap-[8px] max-w-[639px] w-full">
+          <h1 className="text-lightOnSurface text-display1 leading-display1 tracking-[-1%] text-center font-medium">
+            Список подарков
+          </h1>
+          <p className="text-center text-textBase leading-textBase tracking-[-1%] text-lightOnSurface">
+            Поздравляю с победой в викторине! Вы стали победителем и получаете возможность выбрать
+            подарок по своему выбору. Пожалуйста, ознакомьтесь с доступными вариантами подарков и
+            сообщите нам ваше предпочтение. С нетерпением ждем вашего выбора, чтобы доставить вам
+            заслуженный приз!
+          </p>
+        </div>
+        <p className="text-center text-textSmall leading-texttext-textSmall tracking-[-1%] text-lightOnSurface">
+          Есть вопросы? Обратись XYXYXY!
+        </p>
+      </header>
+      <div className="flex flex-col gap-[16px] items-center max-w-[832px]">
+        {[
+          new Array(3)
+            .fill(' ')
+            .map((_, i) => <PrizeCard variant={i > 0 ? 'disabled' : 'selected'} key={i} />),
+        ]}
+      </div>
+    </div>
+  );
+};
+
+export default page;

app/(prizes)/prizes/auth/page.tsx

@@ -3,11 +3,9 @@ import React from 'react';
 
 const page = () => {
   return (
-    <div className="container">
+    <div className="">
-      <div className="mt-[64px] mb-[128px] w-full">
+      <div className="flex justify-center items-center min-h-[50vh]">
-        <div className="flex justify-center items-center min-h-[50vh]">
+        <SmsForm />
-          <SmsForm />
-        </div>
       </div>
     </div>
   );

components/prizes/PrizeCard.tsx

@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils';
+import Image from 'next/image';
+
+interface IProps {
+  variant: 'default' | 'selected' | 'disabled';
+}
+
+const PrizeCard = ({ variant }: IProps) => {
+  return (
+    <div
+      className={cn('bg-lightSurfaceContainerHigher flex rounded-[12px] overflow-hidden', {
+        'opacity-50': variant === 'disabled',
+      })}>
+      <div className="flex-1  overflow-hidden">
+        <Image width={416} height={248} src="/prize.jpg" alt="prize" className="h-full w-full" />
+      </div>
+      <div className="flex-1 p-[16px] flex flex-col gap-[16px]">
+        <h2 className="text-heading5 leading-heading5 -tracking-[-1%] font-medium text-lightOnSurface">
+          Новый Cadillac Escalade 2025 Premium Luxury Platinun
+        </h2>
+        <p className="text-textSmall leading-textSmall -tracking-[-1%] text-lightOnSurfaceVariant">
+          Это роскошный полноразмерный SUV, представленный американским производителем Cadillac.
+          Этот автомобиль отличается высоким уровнем комфорта, стиля и технологий.{' '}
+        </p>
+        {variant === 'default' ? (
+          <button className="px-[24px] py-[10px] w-fit text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightPrimary text-lightOnPrimary rounded-[40px]">
+            Выбрать
+          </button>
+        ) : variant === 'disabled' ? (
+          <button
+            disabled
+            className="px-[24px] py-[10px] w-fit text-textSmall leading-textSmall opacity-[0.12] -tracking-[-1%] font-medium bg-lightOnSurfaceDisabled text-lightOnSurface rounded-[40px]">
+            Недоступно
+          </button>
+        ) : variant === 'selected' ? (
+          <button
+            disabled
+            className="px-[24px] py-[10px] w-fit text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightOnSurfaceDisabled text-lightOnSurface rounded-[40px]">
+            Выбрано
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default PrizeCard;

components/prizes/SmsForm.tsx

@@ -1,6 +1,9 @@
-import React from 'react';
+'use client';
+import Link from 'next/link';
+import React, { useState } from 'react';
 
 const SmsForm = () => {
+  const [inputValue, setInputValue] = useState('');
   return (
     <form className="bg-lightSurface rounded-[24px] p-[40px] w-fit flex flex-col gap-[24px] shadow-lightBoxShadow1">
       <h1 className="text-display3 font-[500] leading-display3 ">Вход в «подарошную»</h1>
@@ -8,13 +11,17 @@ const SmsForm = () => {
         <h2 className="text-textBasebase font-medium leading-textBase">Промокод</h2>
         <input
           type="text"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
           className="px-[16px] py-[12px] bg-lightPrimaryContainer rounded-[12px] outline-none text-lightOnSurfaceVariant text-textSmall leading-textSmall"
           placeholder="Введите свой промокод"
         />
       </div>
-      <button className="cursor-pointer text-textLarge leading-textLarge py-[12px] w-full flex justify-center items-center rounded-[12px] bg-lightPrimary font-medium text-lightOnPrimary">
+      <Link href={`${inputValue}`} className="">
-        Войти
+        <button className="cursor-pointer text-textLarge leading-textLarge py-[12px] w-full flex justify-center items-center rounded-[12px] bg-lightPrimary font-medium text-lightOnPrimary">
-      </button>
+          Войти
+        </button>
+      </Link>
     </form>
   );
 };

tailwind.config.js

@@ -71,6 +71,7 @@ export const theme = {
       // Surface
       lightSurface: '#FCF8FF',
       lightOnSurface: '#1B1B21',
+      lightOnSurfaceDisabled: 'rgba(27, 27, 33, 0.12)',
       lightSurfaceVariant: '#E4E1EC',
       lightOnSurfaceVariant: '#46464F',
       lightSurfaceContainerLowest: '#FFFFFF',
@@ -92,6 +93,9 @@ export const theme = {
       heading1: '36px',
       heading2: '32px',
       heading3: '28px',
+      heading4: '26px',
+      heading5: '24px',
+      heading6: '20px',
 
       // Text
       textLarge: '18px',
@@ -101,7 +105,7 @@ export const theme = {
     },
     lineHeight: {
       // Display 1
-      display1: '56px',
+      display1: '64px',
 
       // Display 2
       display2: '56px',
@@ -110,22 +114,22 @@ export const theme = {
       display3: '56px',
 
       // Heading 1
-      heading1: '56px',
+      heading1: '44px',
 
       // Heading 2
-      heading2: '56px',
+      heading2: '40px',
 
       // Heading 3
-      heading3: '56px',
+      heading3: '36px',
 
       // Heading 4
-      heading4: '56px',
+      heading4: '34px',
 
       // Heading 5
-      heading5: '56px',
+      heading5: '32px',
 
       // Heading 6
-      heading6: '56px',
+      heading6: '28px',
 
       // Text large
       textLarge: '27px',