dylan/vod-system
1
1
Fork 0
Code Issues 16 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

update home page to style
All checks were successful
CI / Maven unit tests (push) Successful in 14s
Details
CI / Build and push images (push) Has been skipped
Details
CI / Deploy to server (push) Has been skipped
Details

Browse Source
This commit is contained in:
Dylan De Faoite
2026-08-16 14:52:53 +01:00
parent 6f64d1cac0
commit a2e45a712b
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/index.css
View File

@@ -15,6 +15,8 @@
--color-text-primary: #2B2620; --color-text-primary: #2B2620;
--color-text-strong: #35302A; --color-text-strong: #35302A;
--color-text-body: #554D44; --color-text-body: #554D44;
--color-text-secondary: #6E6559;
--color-muted: #9A9084;
/* ── Lines, chips, placeholders ──────────────────────────────────────── */ /* ── Lines, chips, placeholders ──────────────────────────────────────── */
--color-hairline: #F0EBE2; --color-hairline: #F0EBE2;

14
frontend/src/pages/Home.tsx
View File

@@ -43,10 +43,10 @@ const Home = () => {
alt="VoD System Logo" alt="VoD System Logo"
className="h-24 mb-6 object-contain" className="h-24 mb-6 object-contain"
/> />
<h1 className="text-4xl font-semibold text-gray-900 mb-3 leading-tight"> <h1 className="text-4xl font-heading text-text-primary">
A home for your clips. A home for your clips.
</h1> </h1>
<p className="text-base text-gray-500 leading-relaxed"> <p className="text-text-secondary">
Upload, trim, and export video clips. Stream live if you need to. Upload, trim, and export video clips. Stream live if you need to.
</p> </p>
</div> </div>
@@ -56,21 +56,21 @@ const Home = () => {
{features.map(({ icon: Icon, title, description }) => ( {features.map(({ icon: Icon, title, description }) => (
<div <div
key={title} key={title}
className="bg-white border border-gray-200 rounded-xl p-5 flex flex-col gap-3 shadow-sm" className="bg-card border border-hairline rounded-xl p-5 flex flex-col gap-3 shadow-sm"
> >
<div className="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0"> <div className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0">
<Icon size={18} className="text-primary" /> <Icon size={18} className="text-primary" />
</div> </div>
<div> <div>
<p className="font-semibold text-gray-900 text-sm mb-1">{title}</p> <p className="font-body text-text-strong font-bold text-sm mb-1">{title}</p>
<p className="text-sm text-gray-500 leading-relaxed">{description}</p> <p className="text-sm text-text-secondary leading-relaxed">{description}</p>
</div> </div>
</div> </div>
))} ))}
</div> </div>
{/* Format note */} {/* Format note */}
<p className="text-xs text-gray-400"> <p className="text-xs text-muted">
Supports MP4, MOV, WebM, and OGG. Supports MP4, MOV, WebM, and OGG.
</p> </p>
</div> </div>