Skip to content

Commit 70cf0b3

Browse files
siwamsinghsiwamsingh
authored
Merge pull request #28 from yashwanthvarma18/HeroSection-#10
Hero Section #10
2 parents 23e5fe5 + 06cad83 commit 70cf0b3

File tree

7 files changed

+197
-2
lines changed

7 files changed

+197
-2
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,4 @@
2828
"tailwindcss": "^3.4.14",
2929
"vite": "^5.4.8"
3030
}
31-
}
31+
}

‎src/components/HeroSection/HeroSection.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.hero-section {
2+
display: flex;
3+
justify-content: space-between;
4+
align-items: center;
5+
background-color: #0a1a2f;
6+
padding: 20px;
7+
}
8+
9+
.hero-content {
10+
color: white;
11+
max-width: 50%;
12+
}
13+
14+
.hero-content h1 {
15+
font-size: 2.5rem;
16+
font-weight: bold;
17+
margin-bottom: 20px;
18+
}
19+
20+
.sign-up-button {
21+
background-color: #007bff;
22+
color: white;
23+
padding: 10px 20px;
24+
border: none;
25+
border-radius: 5px;
26+
cursor: pointer;
27+
transition: background-color 0.3s;
28+
}
29+
30+
.sign-up-button:hover {
31+
background-color: #0056b3;
32+
}
33+
34+
.social-icons {
35+
display: flex;
36+
justify-content: center;
37+
gap: 10px;
38+
margin-top: 10px;
39+
}
40+
41+
.social-icons svg {
42+
background-color: #2c3e50;
43+
color: white;
44+
padding: 10px;
45+
border-radius: 8px;
46+
font-size: 24px;
47+
display: flex;
48+
align-items: center;
49+
justify-content: center;
50+
width: 30px;
51+
height: 30px;
52+
transition: background-color 0.3s;
53+
}
54+
55+
.social-icons svg:hover {
56+
background-color: #34495e;
57+
}
58+
59+
.hero-images {
60+
display: flex;
61+
}
62+
63+
.hero-images img {
64+
border-radius: 10px;
65+
margin-left: 15px;
66+
transition: transform 0.3s ease, box-shadow 0.3s ease;
67+
}
68+
69+
.hero-images img:hover {
70+
transform: scale(1.02);
71+
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
72+
}
73+

‎src/components/HeroSection/HeroSection.jsx‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import "./HeroSection.css";
2+
import casinoImage from "./image-1.png";
3+
import playersImage from "./image-2.png";
4+
5+
6+
function HeroSection() {
7+
return (
8+
<div className="hero-section">
9+
<div className="hero-content">
10+
<h1>An unrivalled Online Casino & Sportsbook</h1>
11+
12+
<button className="sign-up-button">Sign up</button>
13+
<p>Or sign up with</p>
14+
<div className="social-icons">
15+
<svg
16+
xmlns="http://www.w3.org/2000/svg"
17+
width="50"
18+
height="50"
19+
viewBox="0 0 48 48"
20+
>
21+
<linearGradient
22+
id="Ld6sqrtcxMyckEl6xeDdMa_uLWV5A9vXIPu_gr1"
23+
x1="9.993"
24+
x2="40.615"
25+
y1="9.993"
26+
y2="40.615"
27+
gradientUnits="userSpaceOnUse"
28+
>
29+
<stop offset="0" stopColor="#2aa4f4"></stop>
30+
<stop offset="1" stopColor="#007ad9"></stop>
31+
</linearGradient>
32+
<path
33+
fill="url(#Ld6sqrtcxMyckEl6xeDdMa_uLWV5A9vXIPu_gr1)"
34+
d="M24,4C12.954,4,4,12.954,4,24s8.954,20,20,20s20-8.954,20-20S35.046,4,24,4z"
35+
></path>
36+
<path
37+
fill="#fff"
38+
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"
39+
></path>
40+
</svg>
41+
{/* Custom SVG for Google */}
42+
<svg
43+
xmlns="http://www.w3.org/2000/svg"
44+
width="50"
45+
height="50"
46+
viewBox="0 0 48 48"
47+
>
48+
<path
49+
fill="#FFC107"
50+
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"
51+
></path>
52+
<path
53+
fill="#FF3D00"
54+
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"
55+
></path>
56+
<path
57+
fill="#4CAF50"
58+
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"
59+
></path>
60+
<path
61+
fill="#1976D2"
62+
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"
63+
></path>
64+
</svg>
65+
{/* Custom SVG for Line */}
66+
<svg
67+
xmlns="http://www.w3.org/2000/svg"
68+
width="50"
69+
height="50"
70+
viewBox="0 0 48 48"
71+
>
72+
<path
73+
fill="#00c300"
74+
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"
75+
></path>
76+
<path
77+
fill="#fff"
78+
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"
79+
></path>
80+
</svg>
81+
{/* Custom SVG for Twitch */}
82+
<svg
83+
xmlns="http://www.w3.org/2000/svg"
84+
width="50"
85+
height="50"
86+
viewBox="0 0 48 48"
87+
>
88+
<path
89+
fill="#FFF"
90+
d="M12 32L12 8 39 8 39 26 33 32 24 32 18 38 18 32z"
91+
></path>
92+
<path
93+
fill="#8E24AA"
94+
d="M9,5l-3,7.123V38h9v5h5l5-5h7l10-10V5H9z M38,26l-5,5h-9l-5,5v-5h-6V9h25V26z"
95+
></path>
96+
<path
97+
fill="#8E24AA"
98+
d="M32 25h-5V15h5V25zM24 25h-5V15h5V25z"
99+
></path>
100+
</svg>
101+
</div>
102+
</div>
103+
<div className="hero-images">
104+
<img
105+
src={casinoImage}
106+
alt="Casino"
107+
className="casino-image"
108+
style={{ boxShadow: "0 -1px 8px #145aa2" }}
109+
/>
110+
<img
111+
src={playersImage}
112+
alt="Players"
113+
className="players-image"
114+
style={{ boxShadow: "0 -1px 8px #139355" }}
115+
/>
116+
117+
118+
</div>
119+
</div>
120+
);
121+
}
122+
export default HeroSection;

‎src/components/HeroSection/image-1.png‎

364 KB
Loading

‎src/components/HeroSection/image-2.png‎

351 KB
Loading

‎src/components/HeroSection/output.png‎

789 KB
Loading

0 commit comments

Comments
 (0)