Hero Section #10

package.json

@@ -18,11 +18,14 @@
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.2",
-    "eslint": "^9.11.1",
-    "eslint-plugin-react": "^7.37.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.12",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.13",
     "globals": "^15.9.0",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
     "vite": "^5.4.8"
   }
-}
+}

src/components/HeroSection/HeroSection.css

@@ -0,0 +1,73 @@
+.hero-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #0a1a2f; 
+    padding: 20px;
+}
+
+.hero-content {
+    color: white; 
+    max-width: 50%; 
+}
+
+.hero-content h1 {
+    font-size: 2.5rem; 
+    font-weight: bold; 
+    margin-bottom: 20px; 
+}
+
+.sign-up-button {
+    background-color: #007bff;
+    color: white;
+    padding: 10px 20px;
+    border: none; 
+    border-radius: 5px;
+    cursor: pointer; 
+    transition: background-color 0.3s; 
+}
+
+.sign-up-button:hover {
+    background-color: #0056b3; 
+}
+
+.social-icons {
+    display: flex; 
+    justify-content: center; 
+    gap: 10px; 
+    margin-top: 10px; 
+}
+
+.social-icons svg {
+    background-color: #2c3e50; 
+    color: white; 
+    padding: 10px; 
+    border-radius: 8px; 
+    font-size: 24px; 
+    display: flex; 
+    align-items: center; 
+    justify-content: center; 
+    width: 30px; 
+    height: 30px; 
+    transition: background-color 0.3s; 
+}
+
+.social-icons svg:hover {
+    background-color: #34495e;
+}
+
+.hero-images {
+    display: flex; 
+}
+
+.hero-images img {
+    border-radius: 10px;
+    margin-left: 15px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.hero-images img:hover {
+    transform: scale(1.02); 
+    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); 
+}
+

src/components/HeroSection/HeroSection.jsx

@@ -0,0 +1,122 @@
+import "./HeroSection.css";
+import casinoImage from "./image-1.png";
+import playersImage from "./image-2.png";
+
+
+function HeroSection() {
+  return (
+    <div className="hero-section">
+      <div className="hero-content">
+        <h1>An unrivalled Online Casino & Sportsbook</h1>
+
+        <button className="sign-up-button">Sign up</button>
+        <p>Or sign up with</p>
+        <div className="social-icons">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="50"
+            height="50"
+            viewBox="0 0 48 48"
+          >
+            <linearGradient
+              id="Ld6sqrtcxMyckEl6xeDdMa_uLWV5A9vXIPu_gr1"
+              x1="9.993"
+              x2="40.615"
+              y1="9.993"
+              y2="40.615"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0" stopColor="#2aa4f4"></stop>
+              <stop offset="1" stopColor="#007ad9"></stop>
+            </linearGradient>
+            <path
+              fill="url(#Ld6sqrtcxMyckEl6xeDdMa_uLWV5A9vXIPu_gr1)"
+              d="M24,4C12.954,4,4,12.954,4,24s8.954,20,20,20s20-8.954,20-20S35.046,4,24,4z"
+            ></path>
+            <path
+              fill="#fff"
+              d="M26.707,29.301h5.176l0.813-5.258h-5.989v-2.874c0-2.184,0.714-4.121,2.757-4.121h3.283V12.46 c-0.577-0.078-1.797-0.248-4.102-0.248c-4.814,0-7.636,2.542-7.636,8.334v3.498H16.06v5.258h4.948v14.452 C21.988,43.9,22.981,44,24,44c0.921,0,1.82-0.084,2.707-0.204V29.301z"
+            ></path>
+          </svg>
+          {/* Custom SVG for Google */}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="50"
+            height="50"
+            viewBox="0 0 48 48"
+          >
+            <path
+              fill="#FFC107"
+              d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"
+            ></path>
+            <path
+              fill="#FF3D00"
+              d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"
+            ></path>
+            <path
+              fill="#4CAF50"
+              d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"
+            ></path>
+            <path
+              fill="#1976D2"
+              d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"
+            ></path>
+          </svg>
+          {/* Custom SVG for Line */}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="50"
+            height="50"
+            viewBox="0 0 48 48"
+          >
+            <path
+              fill="#00c300"
+              d="M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23C6,39.09,8.91,42,12.5,42z"
+            ></path>
+            <path
+              fill="#fff"
+              d="M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z"
+            ></path>
+          </svg>
+          {/* Custom SVG for Twitch */}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="50"
+            height="50"
+            viewBox="0 0 48 48"
+          >
+            <path
+              fill="#FFF"
+              d="M12 32L12 8 39 8 39 26 33 32 24 32 18 38 18 32z"
+            ></path>
+            <path
+              fill="#8E24AA"
+              d="M9,5l-3,7.123V38h9v5h5l5-5h7l10-10V5H9z M38,26l-5,5h-9l-5,5v-5h-6V9h25V26z"
+            ></path>
+            <path
+              fill="#8E24AA"
+              d="M32 25h-5V15h5V25zM24 25h-5V15h5V25z"
+            ></path>
+          </svg>
+        </div>
+      </div>
+      <div className="hero-images">
+      <img 
+  src={casinoImage} 
+  alt="Casino" 
+  className="casino-image" 
+  style={{ boxShadow: "0 -1px 8px #145aa2" }} 
+/>
+<img 
+  src={playersImage} 
+  alt="Players" 
+  className="players-image" 
+  style={{ boxShadow: "0 -1px 8px #139355" }} 
+/>
+
+
+      </div>
+    </div>
+  );
+}
+export default HeroSection;