Skip to content

Commit 848b11c

Browse files
sneha-tech03sneha-tech03
committed
UI Home Page
1 parent 165122f commit 848b11c

File tree

5 files changed

+140
-11
lines changed

5 files changed

+140
-11
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<title>React Verse - Free API Dashboard</title>
77
<meta name="description" content="All-in-one dashboard showcasing multiple free public APIs (Hacktoberfest)." />
88
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
910
</head>
1011
<body>
1112
<div id="root"></div>

‎src/pages/Header.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/* Dashboard-style header to match dark theme */
2+
.dashboard-header {
3+
background-color: #0b3c5f;
4+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
5+
padding: 2rem 1rem;
6+
text-align: center;
7+
color: #ffffff;
8+
}
9+
10+
.header-content {
11+
max-width: 900px;
12+
margin: 0 auto;
13+
}
14+
15+
.dashboard-title {
16+
font-size: 2.5rem;
17+
margin-bottom: 0.5rem;
18+
background: linear-gradient(90deg, #00d9ff, #1a5c66);
19+
-webkit-background-clip: text;
20+
-webkit-text-fill-color: transparent;
21+
}
22+
23+
.dashboard-subtitle {
24+
font-size: 1.1rem;
25+
color: #c8d6e5;
26+
}

‎src/pages/Header.jsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import './Header.css';
2+
3+
export default function Header() {
4+
return (
5+
<header className="dashboard-header">
6+
<div className="header-content">
7+
<h1 className="dashboard-title">Dashboard Hub</h1>
8+
<p className="dashboard-subtitle">
9+
Your all-in-one portal for real-time data, tools, and fun.
10+
</p>
11+
</div>
12+
</header>
13+
);
14+
}

‎src/pages/Home.jsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
*/
2222
import Card from '../components/Card.jsx';
2323
import { Link } from 'react-router-dom';
24+
import Header from './Header.jsx';
2425

2526
const dashboards = [
2627
{ path: '/weather', title: 'Weather', desc: 'Current weather & forecast' },
@@ -36,12 +37,21 @@ const dashboards = [
3637

3738
export default function Home() {
3839
return (
39-
<div className="grid">
40-
{dashboards.map(d => (
41-
<Card key={d.path} title={d.title} footer={<Link to={d.path}>Open →</Link>}>
42-
<p>{d.desc}</p>
43-
</Card>
44-
))}
40+
<>
41+
<Header/>
42+
<div className="home-page">
43+
<div className="grid">
44+
{dashboards.map(d => (
45+
<Card
46+
key={d.path}
47+
title={d.title}
48+
footer={<Link to={d.path} className="card-link-button">Open →</Link>}
49+
>
50+
<p>{d.desc}</p>
51+
</Card>
52+
))}
53+
</div>
4554
</div>
55+
</>
4656
);
4757
}

‎src/styles.css‎

Lines changed: 83 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,16 +54,51 @@ a:hover {
5454
z-index: 10;
5555
}
5656
.navbar .logo {
57-
margin: 0;
58-
font-size: 1.1rem;
57+
margin: 0 5vw;
58+
font-size: 1.85rem;
59+
background: linear-gradient(90deg, #00d9ff, #1a5c66);
60+
-webkit-background-clip: text;
61+
-webkit-text-fill-color: transparent;
62+
background-clip: text;
63+
text-fill-color: transparent;
64+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
65+
}
66+
67+
.theme-dark .navbar .logo,
68+
[data-theme="dark"] .navbar .logo {
69+
background: linear-gradient(90deg, #00d9ff, #b0e7ef);
70+
-webkit-background-clip: text;
71+
-webkit-text-fill-color: transparent;
72+
background-clip: text;
73+
text-fill-color: transparent;
74+
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.25);
5975
}
76+
77+
6078
.navbar ul {
6179
list-style: none;
6280
display: flex;
63-
gap: 0.75rem;
64-
margin: 0;
81+
gap: 0.95rem;
82+
margin: 0 8vw;
6583
padding: 0;
6684
}
85+
86+
.navbar a {
87+
text-decoration: none;
88+
color: #1a5c66;
89+
font-weight: 700;
90+
padding: 0.5rem;
91+
}
92+
93+
.navbar a:hover{
94+
background: rgba(0, 217, 255,0.1);
95+
}
96+
97+
.theme-dark .navbar a,
98+
[data-theme="dark"] .navbar a {
99+
color: #ffffff;
100+
}
101+
67102
.navbar a.active {
68103
font-weight: 600;
69104
}
@@ -124,17 +159,47 @@ a:hover {
124159
display: flex;
125160
flex-direction: column;
126161
gap: 0.5rem;
127-
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
162+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
163+
}
164+
165+
.home-page .card{
166+
background: rgba(26, 92, 102,0.2);
167+
border: 2px solid rgba(0, 217, 255,0.5);
168+
}
169+
170+
.home-page .card:hover h3 {
171+
transform: translateY(-7px);
172+
color: rgb(0, 143, 165);
128173
}
174+
129175
.card h3 {
130176
margin: 0 0 0.25rem;
131177
font-size: 1rem;
178+
transition: transform 1.5s ease;
132179
}
133180
.card-footer {
134181
margin-top: auto;
135182
font-size: 0.85rem;
136183
opacity: 0.8;
137184
}
185+
186+
.card-link-button {
187+
display: inline-block;
188+
background:linear-gradient(45deg, rgb(0, 166, 255),rgb(7, 94, 105));
189+
color: white;
190+
padding: 0.5rem 0.75rem;
191+
border-radius: 6px;
192+
text-decoration: none;
193+
font-weight: 500;
194+
font-size: 0.9rem;
195+
transition: background 0.3s ease;
196+
}
197+
198+
.card-link-button:hover {
199+
background: #215b6a;
200+
text-decoration: none;
201+
}
202+
138203
.chart-placeholder {
139204
background: repeating-linear-gradient(
140205
45deg,
@@ -149,6 +214,18 @@ a:hover {
149214
border-radius: var(--radius);
150215
}
151216

217+
218+
.home-page .card {
219+
background: rgba(26, 92, 102, 0.2);
220+
border: 2px solid rgba(0, 217, 255, 0.5);
221+
}
222+
223+
.home-page .card:hover h3 {
224+
transform: translateY(-7px);
225+
color: rgb(0, 143, 165);
226+
}
227+
228+
152229
/* Buttons & inputs */
153230
button,
154231
input,
@@ -284,6 +361,7 @@ blockquote {
284361
background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 50%, #4facfe 100%) !important;
285362
}
286363

364+
287365
/* Weather Animations: Sun, Clouds, Rain, Snow, Fog, Storm */
288366
.sun-wrap {
289367
position: absolute;

0 commit comments

Comments
 (0)