diff --git a/package-lock.json b/package-lock.json index 279c9ec..c16f69f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5225,4 +5225,4 @@ } } } -} +} \ No newline at end of file diff --git a/package.json b/package.json index 01bc97f..f5ec948 100644 --- a/package.json +++ b/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" } -} +} \ No newline at end of file diff --git a/src/components/HeroSection/HeroSection.css b/src/components/HeroSection/HeroSection.css new file mode 100644 index 0000000..fe5b1b9 --- /dev/null +++ b/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); +} + diff --git a/src/components/HeroSection/HeroSection.jsx b/src/components/HeroSection/HeroSection.jsx new file mode 100644 index 0000000..884b65e --- /dev/null +++ b/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; diff --git a/src/components/HeroSection/image-1.png b/src/components/HeroSection/image-1.png new file mode 100644 index 0000000..e268c68 Binary files /dev/null and b/src/components/HeroSection/image-1.png differ diff --git a/src/components/HeroSection/image-2.png b/src/components/HeroSection/image-2.png new file mode 100644 index 0000000..809b152 Binary files /dev/null and b/src/components/HeroSection/image-2.png differ diff --git a/src/components/HeroSection/output.png b/src/components/HeroSection/output.png new file mode 100644 index 0000000..95999d6 Binary files /dev/null and b/src/components/HeroSection/output.png differ