continued lottery page

app/(main)/(lottery)/lottery/page.tsx

@@ -1,14 +1,15 @@
+import CountDown from '@/components/lottery/countDown/CountDown';
 import Image from 'next/image';
 import React from 'react';
 
 const page = () => {
   return (
-    <div className="flex flex-col gap-[128px]">
+    <div className="flex flex-col gap-[128px] font-roboto pt-[64px] pb-[128px] text-lightOnSurface">
-      <section className="py-[64px]">
+      <section className="">
         <div className="container">
           <div className="flex flex-col gap-[32px]">
             <h1 className="font-display-1-regular text-center">Bije</h1>
-            <div>
+            <div className="mb-8">
               <Image
                 src="/banner-lottery.jpg"
                 width={1416}
@@ -17,13 +18,66 @@ const page = () => {
                 className="rounded-[12px]"
               />
             </div>
+
+            <CountDown />
           </div>
         </div>
       </section>
 
       <section>
         <div className="container">
-          <div></div>
+          <div className="flex gap-6 bg-lightSurfaceContainer rounded-[12px]">
+            {/* Winners */}
+            <div className="flex flex-col w-full p-8 gap-4">
+              <div className="flex flex-col gap-2 pb-4 border-b border-lightOutlineVariant">
+                <h4 className="font-heading-3-regular">Results</h4>
+                <p className="font-base-medium">The results after each stage will be shown here.</p>
+              </div>
+
+              {[...Array(5)].map((item, index) => (
+                <div className="flex flex-col gap-2 pb-4 last:border-none border-b border-lightOutlineVariant">
+                  <h4 className="font-heading-5-regular">The winner of the {index + 1} stage:</h4>
+                  <p className="font-base-medium">8 XX XX-XX-XX</p>
+                </div>
+              ))}
+            </div>
+
+            {/* Sping the wheel */}
+            <div className="flex justify-center items-center w-full"></div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div className="container">
+          <div className="flex flex-col gap-8">
+            <h2 className="font-heading-1-regular">Lotereýanyň duzgunleri:</h2>
+            <div className="flex gap-6">
+              <div className="flex flex-col gap-4 bg-lightSurfaceContainer py-4 px-8 rounded-[12px] w-full">
+                <h3 className="font-heading-5-regular">Umumy düzgünler:</h3>
+                <ul className="list-disc flex flex-col gap-4 pl-[16px]">
+                  {Array(5)
+                    .fill(' ')
+                    .map((item) => (
+                      <li className="font-small-regular">
+                        Ilkinji we dogry jogap beren sanawda ilkinji ýeri eýelýär
+                      </li>
+                    ))}
+                </ul>
+              </div>
+
+              <div className="flex flex-col gap-4 bg-lightSurfaceContainer py-4 px-8 rounded-[12px] w-full">
+                <h3 className="font-heading-5-regular">Üns beriň:</h3>
+                <ul className="list-disc flex flex-col gap-4 pl-[16px]">
+                  {Array(1)
+                    .fill(' ')
+                    .map((item) => (
+                      <li className="font-small-regular">SMS = 1 manat</li>
+                    ))}
+                </ul>
+              </div>
+            </div>
+          </div>
         </div>
       </section>
     </div>

app/globals.css

@@ -215,3 +215,22 @@ big {
     @apply font-roboto text-[56px] leading-[64px] -tracking-[1%] font-normal;
   }
 }
+
+.font-heading-1-regular {
+  @apply -tracking-[1%] text-[36px] leading-[44px];
+}
+
+.font-heading-3-regular {
+  @apply -tracking-[1%] text-[28px] leading-[36px];
+}
+
+.font-heading-5-regular {
+  @apply -tracking-[1%] text-[24px] leading-[32px];
+}
+
+.font-base-medium {
+  @apply font-medium -tracking-[1%] text-[16px] leading-[24px];
+}
+.font-small-regular {
+  @apply -tracking-[1%] text-[14px] leading-[20px];
+}

components/lottery/countDown/CountDown.tsx

@@ -0,0 +1,57 @@
+const CountDown = () => {
+  return (
+    <div className="bg-lightSurfaceContainer pb-8 flex flex-col w-full gap-2 rounded-[12px]">
+      {/* Countdown */}
+      <div className="flex items-center gap-6">
+        {/* {Array(5)
+          .fill(' ')
+          .map((item, index) =>
+            index % 2 === 0 ? (
+              <div className="flex flex-col items-center justify-center flex-1 p-6">
+                <h3 className="text-[80px] leading-[88px] -tracking-[1%]">12</h3>
+                <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">sagat</h4>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-3">
+                <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+                <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+              </div>
+            ),
+          )} */}
+        <div className="flex flex-col items-center justify-center flex-1 p-6">
+          <h3 className="text-[80px] leading-[88px] -tracking-[1%]">12</h3>
+          <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">sagat</h4>
+        </div>
+
+        <div className="flex flex-col gap-3">
+          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+        </div>
+
+        <div className="flex flex-col items-center justify-center flex-1 p-6">
+          <h3 className="text-[80px] leading-[88px] -tracking-[1%]">44</h3>
+          <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">minut</h4>
+        </div>
+
+        <div className="flex flex-col gap-3">
+          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+        </div>
+
+        <div className="flex flex-col items-center justify-center flex-1 p-6">
+          <h3 className="text-[80px] leading-[88px] -tracking-[1%]">36</h3>
+          <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">sekund</h4>
+        </div>
+      </div>
+
+      {/* Seperator */}
+      <div className="w-full bg-lightOutlineVariant h-[1px]"></div>
+
+      <div className="flex items-center justify-center text-lightOnSurface font-heading-1-regular">
+        <span>-dan başlar</span>
+      </div>
+    </div>
+  );
+};
+
+export default CountDown;

components/lottery/countDown/CountDownCell.tsx

@@ -0,0 +1,15 @@
+interface IProps {
+  number: string;
+  title: string;
+}
+
+const CountDownCell = ({ number, title }: IProps) => {
+  return (
+    <div className="flex flex-col items-center justify-center flex-1 p-6">
+      <h3 className="text-[80px] leading-[88px] -tracking-[1%]">{number}</h3>
+      <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">{title}</h4>
+    </div>
+  );
+};
+
+export default CountDownCell;

components/lottery/countDown/CountDownSemicolmn.tsx

@@ -0,0 +1,10 @@
+const CountDownSemicolmn = () => {
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+      <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+    </div>
+  );
+};
+
+export default CountDownSemicolmn;