Skip to content

Commit 42f7479

Browse files
ajay-dhangarajay-dhangar
committed
update UI of main page
1 parent 6d293c8 commit 42f7479

File tree

6 files changed

+336
-17
lines changed

6 files changed

+336
-17
lines changed

‎docusaurus.config.js

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -314,11 +314,6 @@ const config = {
314314
],
315315
},
316316
],
317-
logo: {
318-
alt: "Copyright © CodeHarborHub Made with ❤️ by Ajay-Dhangar",
319-
src: "/img/main-logo.jpg",
320-
href: "https://github.com/ajay-dhangar",
321-
},
322317
copyright: `Copyright © ${new Date().getFullYear()} CodeHarborHub, Made by <a href="https://github.com/Ajay-Dhangar/">Ajay Dhangar</a>`,
323318
},
324319
prism: {

‎src/components/HomePage/Header.jsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from "react";
2+
import "./header.css";
3+
import Link from "@docusaurus/Link";
4+
5+
const Header = () => {
6+
return (
7+
<div className="chh__header--body">
8+
<div className="section__padding" id="home">
9+
<div className="chh__header">
10+
<div className="chh__header-content">
11+
<h1 className="gradient__text">
12+
Level Up Skills with CodeHarborHub
13+
</h1>
14+
<p>
15+
Tired of limitations? CodeHarborHub shatters them. We're the
16+
exclusive platform offering a comprehensive tech curriculum,
17+
taught by industry masters, completely free. Join our vibrant
18+
community, master in-demand skills, and launch your dream tech
19+
career.
20+
</p>
21+
22+
<div className="chh__header-content__input">
23+
<button type="button">
24+
<Link to="/docs" className="chh__header-content__input--link">
25+
Get Started
26+
</Link>
27+
</button>
28+
<button>
29+
<Link
30+
to="/courses"
31+
className="chh__header-content__input--link"
32+
>
33+
Courses
34+
</Link>
35+
</button>
36+
</div>
37+
</div>
38+
<div className="chh__header-image">
39+
<img src="/img/img-5.png" alt="ai" />
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
);
45+
};
46+
47+
export default Header;

‎src/components/HomePage/header.css

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
.chh__header--body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
transform-style: preserve-3d;
6+
overflow: hidden;
7+
padding: 3rem 1.5rem;
8+
}
9+
10+
.chh__header {
11+
display: flex;
12+
flex-direction: row;
13+
position: relative;
14+
}
15+
16+
.chh__header-content {
17+
flex: 1;
18+
display: flex;
19+
justify-content: center;
20+
align-items: flex-start;
21+
flex-direction: column;
22+
margin-right: 5rem;
23+
}
24+
25+
.chh__header-content h1 {
26+
font-weight: 700;
27+
font-size: 62px;
28+
line-height: 75px;
29+
letter-spacing: -0.04em;
30+
background: linear-gradient(
31+
30deg,
32+
rgba(206, 86, 174, 0.972) 0%,
33+
rgb(253 29 29 / 100%) 50%,
34+
rgb(252 176 69 / 100%) 100%
35+
);
36+
background-clip: text;
37+
-webkit-text-fill-color: transparent;
38+
}
39+
40+
.chh__header-content p {
41+
font-weight: 400;
42+
font-size: 22px;
43+
line-height: 30px;
44+
margin-top: 1.5rem;
45+
}
46+
47+
.chh__header-content__input {
48+
width: 100%;
49+
margin: 2rem 0 1rem;
50+
51+
display: flex;
52+
flex-direction: row;
53+
}
54+
55+
.chh__header-content__input--link {
56+
text-decoration: none;
57+
font-size: 20px;
58+
line-height: 28px;
59+
font-weight: 600;
60+
}
61+
62+
.chh__header-content__input--link:hover {
63+
text-decoration: none;
64+
}
65+
66+
.chh__header-content__input button {
67+
flex: 0.6;
68+
width: 100%;
69+
min-height: 50px;
70+
font-weight: 400;
71+
font-size: 20px;
72+
line-height: 28px;
73+
border: 2px solid #ff4820;
74+
padding: 0 0.8rem;
75+
cursor: pointer;
76+
outline: none;
77+
border-radius: 5px;
78+
margin: 0 1rem 0 0;
79+
}
80+
81+
.chh__header-content__input button:last-child {
82+
background: transparent;
83+
}
84+
85+
.chh__header-content__input button:hover {
86+
background: linear-gradient(90deg, #f0a90fd0 0%, transparent 100%);
87+
}
88+
89+
.chh__header-image {
90+
width: 400px;
91+
height: 400px;
92+
flex: 1 0 0%;
93+
display: flex;
94+
justify-content: center;
95+
align-items: center;
96+
padding: 0.5rem;
97+
background: linear-gradient(
98+
90deg,
99+
#ff49208d 0%,
100+
#ffc80097 25%,
101+
#20e3a28d 50%,
102+
#ff49208b 75%,
103+
#ffc8008a 100%
104+
);
105+
background-image: url("/bg-img.gif");
106+
border-radius: 10% 40%;
107+
border: 1px solid #20e3a2;
108+
}
109+
110+
.chh__header-image:hover {
111+
background-image: url("/bg.gif");
112+
}
113+
114+
.chh__header-image img {
115+
width: 100%;
116+
height: 100%;
117+
border: 1px solid #20e3a2;
118+
border-radius: 10% 40%;
119+
}
120+
121+
@media screen and (max-width: 1050px) {
122+
.chh__header {
123+
flex-direction: column;
124+
}
125+
126+
.chh__header-content {
127+
margin: 0 0 3rem;
128+
}
129+
}
130+
131+
@media screen and (max-width: 650px) {
132+
.chh__header-content h1 {
133+
font-size: 48px;
134+
line-height: 60px;
135+
}
136+
137+
.chh__header-content p {
138+
font-size: 16px;
139+
line-height: 24px;
140+
}
141+
142+
.chh__header-content__input input,
143+
.chh__header-content__input button {
144+
font-size: 16px;
145+
line-height: 24px;
146+
}
147+
}
148+
149+
@media screen and (max-width: 490px) {
150+
.chh__header-content h1 {
151+
font-size: 36px;
152+
line-height: 48px;
153+
}
154+
155+
.chh__header-content p {
156+
font-size: 14px;
157+
line-height: 24px;
158+
}
159+
160+
.chh__header-content__input input,
161+
.chh__header-content__input button {
162+
font-size: 12px;
163+
line-height: 16px;
164+
}
165+
}
166+
.chh__header {
167+
display: flex;
168+
flex-direction: row;
169+
}
170+
171+
.chh__header-content {
172+
flex: 1;
173+
display: flex;
174+
justify-content: center;
175+
align-items: flex-start;
176+
flex-direction: column;
177+
178+
margin-right: 5rem;
179+
}
180+
181+
.chh__header-content h1 {
182+
line-height: 75px;
183+
letter-spacing: -0.04em;
184+
}
185+
186+
.chh__header-content p {
187+
font-family: var(--font-family);
188+
font-weight: 400;
189+
font-size: 20px;
190+
line-height: 28px;
191+
192+
margin-top: 1.5rem;
193+
}
194+
195+
.chh__header-content__input {
196+
width: 100%;
197+
margin: 2rem 0 1rem;
198+
199+
display: flex;
200+
flex-direction: row;
201+
}
202+
203+
.chh__header-content__input input {
204+
flex: 2;
205+
width: 100%;
206+
min-height: 50px;
207+
font-family: var(--font-family);
208+
font-weight: 400;
209+
font-size: 20px;
210+
line-height: 28px;
211+
border: 2px solid #ff4820;
212+
padding: 0 1rem;
213+
outline: none;
214+
215+
border-top-left-radius: 5px;
216+
border-bottom-left-radius: 5px;
217+
}
218+
219+
.chh__header-content__input button {
220+
flex: 0.6;
221+
width: 100%;
222+
min-height: 50px;
223+
font-weight: 400;
224+
font-size: 20px;
225+
line-height: 28px;
226+
background: linear-gradient(90deg, #07ab8a5f 0%, transparent 100%);
227+
border: 2px solid #20e3a2;
228+
padding: 0 1rem;
229+
cursor: pointer;
230+
outline: none;
231+
232+
border-top-right-radius: 5px;
233+
border-bottom-right-radius: 5px;
234+
}
235+
236+
@media screen and (max-width: 1050px) {
237+
.chh__header {
238+
flex-direction: column;
239+
}
240+
241+
.chh__header-content {
242+
margin: 0 0 3rem;
243+
}
244+
}
245+
246+
@media screen and (max-width: 650px) {
247+
.chh__header-content h1 {
248+
font-size: 48px;
249+
line-height: 60px;
250+
}
251+
252+
.chh__header-content p {
253+
font-size: 16px;
254+
line-height: 24px;
255+
}
256+
257+
.chh__header-content__input input,
258+
.chh__header-content__input button {
259+
font-size: 16px;
260+
line-height: 24px;
261+
}
262+
}
263+
264+
@media screen and (max-width: 490px) {
265+
.chh__header-content h1 {
266+
font-size: 36px;
267+
line-height: 48px;
268+
}
269+
270+
.chh__header-content p {
271+
font-size: 14px;
272+
line-height: 24px;
273+
}
274+
275+
.chh__header-content__input input,
276+
.chh__header-content__input button {
277+
font-size: 12px;
278+
line-height: 16px;
279+
}
280+
}

‎src/pages/index.js

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import Layout from "@theme/Layout";
77

88
import Heading from "@theme/Heading";
99
import styles from "./index.module.css";
10-
import Hero from "../components/HomePage/Hero";
1110
import Features from "../components/HomePage/Features";
1211
import Courses from "../components/HomePage/Courses";
13-
import { hero, featuresData, coursesData } from "../database/home";
12+
import { featuresData, coursesData } from "../database/home";
13+
import Header from "../components/HomePage/Header";
1414

1515
export default function Home() {
1616
const { siteConfig } = useDocusaurusContext();
@@ -19,26 +19,23 @@ export default function Home() {
1919
title={`Hello from ${siteConfig.title}`}
2020
description="Welcome to CodeHarborHub. Learn the basics to advanced concepts of web development. html, css, javascript, react, node.js, dsa, and more."
2121
>
22-
<main>
23-
<Hero
24-
title={hero.title}
25-
description={hero.description}
26-
imageUrl={hero.imageUrl}
27-
/>
22+
<main>
2823

24+
<Header />
25+
2926
<hr className={styles.home__hr} />
3027

3128
<div className={styles.home__divider}>
32-
<Heading as="h2">Features of CodeHarborHub</Heading>
29+
<Heading as="h2">Courses Available</Heading>
3330
</div>
3431

35-
<Features features={featuresData} />
32+
<Courses courses={coursesData} />
3633

3734
<div className={styles.home__divider}>
38-
<Heading as="h2">Courses Available</Heading>
35+
<Heading as="h2">Features of CodeHarborHub</Heading>
3936
</div>
4037

41-
<Courses courses={coursesData} />
38+
<Features features={featuresData} />
4239

4340
{/*
4441
<div className={styles.home__divider}>

‎static/bg-img.gif

14.5 MB
Loading

‎static/bg.gif

14.5 MB
Loading

0 commit comments

Comments
 (0)