diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 9c2a3b4..73e7258 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -1,40 +1,78 @@ +import { Upload, Scissors, SlidersHorizontal, Radio, LayoutGrid, Play } from "lucide-react"; + +const features = [ + { + icon: Upload, + title: "Upload & convert", + description: "Drop in a video file. Non-native formats are converted automatically before editing.", + }, + { + icon: Scissors, + title: "Trim", + description: "Set start and end points with a range slider. Preview as you go.", + }, + { + icon: SlidersHorizontal, + title: "Export settings", + description: "Choose resolution, frame rate, and an optional file size cap.", + }, + { + icon: Radio, + title: "RTMP streaming", + description: "Point OBS at your stream key and go live. Find the key in your profile.", + }, + { + icon: LayoutGrid, + title: "Clip library", + description: "Browse all your clips. Watch, rename, edit the description, or delete.", + }, + { + icon: Play, + title: "Built-in player", + description: "Scrub, adjust volume, go fullscreen. Runs in the browser.", + }, +]; + const Home = () => { return ( -
- VoD System Logo - -
-

- What is the VoD System? -

-

- The VoD System is a powerful clip management platform designed to streamline how you - handle your video content. Whether you're a content creator, streamer, or educator, - VoD System lets you: -

- - - -

- Designed with simplicity and efficiency in mind, VoD System adapts to your workflow, - making video clip management faster and more enjoyable than ever. +

+ {/* Hero */} +
+ VoD System Logo +

+ A home for your clips. +

+

+ Upload, trim, and export video clips. Stream live if you need to.

-
- Note: Currently, only{" "} - .mp4 files are supported - for upload and processing. Support for additional video formats will be added in future updates. + {/* Feature grid */} +
+ {features.map(({ icon: Icon, title, description }) => ( +
+
+ +
+
+

{title}

+

{description}

+
+
+ ))}
+ + {/* Format note */} +

+ Supports MP4, MOV, WebM, and OGG. Non-native formats are converted on upload. +

); };