Skip to content

Commit 0db4694

Browse files
karkera-saakshikarkera-saakshi
committed
fix: consolidate feature-card hover styles
1 parent 2eb9693 commit 0db4694

4 files changed

Lines changed: 69 additions & 39 deletions

File tree

‎web/src/app/globals2.css‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -240,22 +240,22 @@ section.hero {
240240
}
241241

242242
/* --- ABSOLUTE OVERRIDE: Force Dark Backgrounds --- */
243+
/* Dark mode feature card */
243244
.dark .feature-card.mod-card {
244-
background-color: #1e293b !important;
245-
color: #ffffff !important;
245+
background-color: var(--color-surface-card);
246+
color: var(--color-foreground);
246247
}
247248

248-
/* Force the text colors within those cards to be white in dark mode */
249249
.dark .feature-card.mod-card h3,
250250
.dark .feature-card.mod-card p {
251-
color: #ffffff !important;
251+
color: var(--color-foreground);
252252
}
253253

254-
/* Ensure the hover state background stays dark */
255254
.dark .feature-card.mod-card:hover {
256-
background-color: #334155 !important;
255+
background-color: var(--color-surface-card-hover);
257256
}
258257

258+
259259
/* Modal Content Background */
260260
.dark .modal-content {
261261
background-color: #1e293b !important;
@@ -299,4 +299,32 @@ section.hero {
299299
/* Ensure bold text inside the box is visible */
300300
.dark .modal-content div[style*="background: #f8fafc"] strong {
301301
color: #ffffff !important;
302+
}
303+
304+
section.hero {
305+
padding: 160px 0 80px 0;
306+
}
307+
308+
.dark .mobile-nav a {
309+
color: #ffffff !important;
310+
}
311+
312+
.dark .mobile-nav {
313+
background-color: #1e293b !important;
314+
}
315+
316+
.download-card:hover {
317+
border-color: #8952c4;
318+
box-shadow: 0 10px 25px -5px rgba(137, 82, 196, 0.15);
319+
}
320+
321+
.dark .download-card:hover {
322+
border-color: #8952c4;
323+
box-shadow: 0 10px 25px -5px rgba(137, 82, 196, 0.25);
324+
}
325+
326+
.dark .feature-card.mod-card:hover {
327+
background-color: #2d3f55 !important;
328+
border: 3px solid #8952c4 !important;
329+
box-shadow: 0 10px 25px -5px rgba(137, 82, 196, 0.35) !important;
302330
}

‎web/src/app/layout.tsx‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,31 @@
11
import "@fortawesome/fontawesome-free/css/all.min.css";
22
import type { Metadata } from "next";
33
import { Inter, DM_Sans } from "next/font/google";
4+
// DO NOT remove the globals2.css import, it contains important global styles for the application
45
import "./globals2.css";
6+
// make a new file for css
57
import { cn } from "@/lib/utils";
68
import { TooltipProvider } from "@/components/ui/tooltip";
79
import { ThemeProvider } from "@/components/theme-provider";
810

911
const interHeading = Inter({ subsets: ["latin"], variable: "--font-heading" });
1012
const dmSans = DM_Sans({ subsets: ["latin"], variable: "--font-sans" });
11-
const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
13+
const inter = Inter({
14+
subsets: ["latin"],
15+
variable: "--font-inter",
16+
display: "swap",
17+
});
1218

1319
export const metadata: Metadata = {
1420
title: "UltimateHealth - Empowering Wellness Through Global Community",
15-
description: "UltimateHealth platform description.",
21+
description:
22+
"UltimateHealth is a platform that lets you publish health knowledge in your own language, review content, and share podcasts with the world.",
23+
keywords: "health, wellness, community, articles, podcasts, multilingual",
24+
openGraph: {
25+
title: "UltimateHealth",
26+
description: "Empowering Wellness Through Global Community",
27+
type: "website",
28+
},
1629
};
1730

1831
export default function RootLayout({
@@ -21,7 +34,16 @@ export default function RootLayout({
2134
children: React.ReactNode;
2235
}) {
2336
return (
24-
<html lang="en" suppressHydrationWarning className={cn("font-sans", dmSans.variable, inter.variable, interHeading.variable)}>
37+
<html
38+
lang="en"
39+
suppressHydrationWarning
40+
className={cn(
41+
"font-sans",
42+
dmSans.variable,
43+
inter.variable,
44+
interHeading.variable
45+
)}
46+
>
2547
<body className={`${inter.className} antialiased`}>
2648
<ThemeProvider
2749
attribute="class"

‎web/src/app/page.tsx‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -479,6 +479,7 @@ export default function Home() {
479479
<span className="nav-item-text">Join Us to Contribute</span>
480480
</a>
481481
</li>
482+
<ModeToggle/>
482483
<li>
483484
<a href="#downloads" className="nav-btn-sm">
484485
<i className="fas fa-user" aria-hidden="true"></i>
@@ -487,14 +488,6 @@ export default function Home() {
487488
</li>
488489
</ul>
489490

490-
<li>
491-
<a href="#downloads" className="nav-btn-sm">
492-
<i className="fas fa-user" aria-hidden="true"></i>
493-
<span>Login / Register</span>
494-
</a>
495-
</li>
496-
</ul>
497-
498491
<button className="mobile-menu-toggle" onClick={() => setMobileMenuOpen((o) => !o)} aria-label="Toggle mobile menu">
499492
<i className={`fas fa-${mobileMenuOpen ? "times" : "bars"}`}></i>
500493
</button>
@@ -506,7 +499,7 @@ export default function Home() {
506499
<a href="#features" onClick={() => setMobileMenuOpen(false)}>Platform Highlights</a>
507500
<a href="#programs" onClick={() => setMobileMenuOpen(false)}>Community Programs</a>
508501
<a href="https://uhsocial.in/docs" target="_blank" rel="noreferrer">Read Articles</a>
509-
<a href="/contribute" onClick={() => setMobileMenuOpen(false)}>Join Us to Contribute</a>
502+
<a href={withBasePath("/contribute")} onClick={() => setMobileMenuOpen(false)}>Join Us to Contribute</a>
510503
<a href="#downloads" onClick={() => setMobileMenuOpen(false)}>Login / Register</a>
511504

512505
{/* Clean border separation separator panel for mobile menu */}
@@ -519,14 +512,14 @@ export default function Home() {
519512

520513
{/* ── Hero ── */}
521514
<section className="hero">
522-
<div className="container hero-content scroll-reveal" style={{paddingTop: '80px'}}>
515+
<div className="container hero-content scroll-reveal hero-content-padded">
523516
<h1>Empowering Wellness Through Global Community</h1>
524517
<p>UltimateHealth is a platform that lets you publish health knowledge in your own language, review content, and share podcasts with the world.</p>
525-
</PageWrapper>
526-
</Section>
518+
</div>
519+
</section>
527520

528521
{/* Downloads Section */}
529-
<Section id="downloads" className="download-section">
522+
<section id="downloads" className="download-section">
530523
<PageWrapper>
531524
<h2>Get UltimateHealth</h2>
532525
<p className="center">
@@ -604,7 +597,7 @@ export default function Home() {
604597
</div>
605598
</div>
606599
</div>
607-
</div>
600+
</PageWrapper>
608601
</section>
609602

610603
<HeroAndDownload onJoinTestFlight={() => setAppleModal(true)} />
@@ -740,8 +733,8 @@ export default function Home() {
740733
{ icon: "fa-fingerprint", title: "Advanced Security", desc: "Role-based access control (RBAC) ensuring only verified Reviewers and Admins can access protected operations." },
741734
].map((f, i) => (
742735
<div
743-
className="feature-card mod-card w-full fade-in border-2 border-transparent transition-all duration-300 ease-in-out hover:border-[#8952c4] hover:bg-muted/40 dark:hover:bg-muted/10 cursor-pointer"
744-
key={i}
736+
className="feature-card mod-card w-full fade-in"
737+
key={i}
745738
>
746739
<div className="mod-icon"><i className={`fas ${f.icon}`}></i></div>
747740
<h3>{f.title}</h3>
@@ -983,7 +976,7 @@ export default function Home() {
983976
<a href="#programs">Programs</a>
984977
<a href="#screenshots">Screenshots</a>
985978
<a href="#contact">Contact</a>
986-
<a href="/contribute">Join Us & Contribute</a>
979+
<a href={withBasePath("/contribute")}>Join Us & Contribute</a>
987980
</div>
988981

989982
{/* Support */}

‎web/src/components/theme-provider.tsx‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,3 @@
1-
// "use client"
2-
3-
// import * as React from "react"
4-
// import { ThemeProvider as NextThemesProvider } from "next-themes"
5-
6-
// export function ThemeProvider({
7-
// children,
8-
// ...props
9-
// }: React.ComponentProps<typeof NextThemesProvider>) {
10-
// return <NextThemesProvider {...props}>{children}</NextThemesProvider>
11-
// }
12-
13-
// src/components/theme-provider.tsx
141
"use client"
152

163
import * as React from "react"

0 commit comments

Comments
 (0)