From 23c8165df89c26a58d1e1379d85dbc3569c3f182 Mon Sep 17 00:00:00 2001
From: "theo.pector" <theo.pector05@gmail.com>
Date: Mon, 10 Mar 2025 14:35:04 +0100
Subject: [PATCH] Enhance main page component with new styling and layout

---
 app/app.css   |  5 +++++
 app/index.tsx | 27 ++++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/app/app.css b/app/app.css
index 99345d8..f20c92b 100644
--- a/app/app.css
+++ b/app/app.css
@@ -13,3 +13,8 @@ body {
     color-scheme: dark;
   }
 }
+
+.glow-text {
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
+    0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4);
+}
diff --git a/app/index.tsx b/app/index.tsx
index 98cd548..9469682 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,8 +1,29 @@
+import "./app.css";
+
 export function Welcome() {
   return (
-    <div>
-      <h1 className="text-3xl text-center">Welcome to Aindustries' casino</h1>
-      <p className="text-center">Mind that gambling isn't that dangerous</p>
+    <div className="bg-gray-800">
+      <h1 className="text-white text-3xl text-center">
+        Welcome to Aindustries' casino
+      </h1>
+      <p className="text-center text-white">
+        Mind that gambling isn't that dangerous
+      </p>
+
+      <div className="w-full h-100 bg-gray-500 mx-auto flex items-center justify-center mt-10">
+        <div className="w-35 h-18 bg-purple-500 rounded-lg flex items-center justify-center mt-60 mx-1.25">
+          <h1 className="text-white text-2xl glow-text">PRICE-</h1>
+        </div>
+
+        <div className="w-40 h-20 bg-green-500 rounded-lg flex items-center justify-center mt-60 mx-1.25">
+          <h1 className="text-white text-4xl glow-text">ROLL</h1>
+        </div>
+
+        <div className="w-35 h-18 bg-blue-500 rounded-lg flex items-center justify-center mt-60 mx-1.25">
+          <h1 className="text-white text-2xl glow-text">CHANCE+</h1>
+        </div>
+        <h1 className="text-white text-xl">Cost per roll :</h1>
+      </div>
     </div>
   );
 }