diff --git a/apps/web/src/app/about/page.tsx b/apps/web/src/app/about/page.tsx new file mode 100644 index 00000000..0c46e8d5 --- /dev/null +++ b/apps/web/src/app/about/page.tsx @@ -0,0 +1,231 @@ +import { Metadata } from "next"; +import { Header } from "@/components/header"; +import { Footer } from "@/components/footer"; +import { Card, CardContent } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import Link from "next/link"; +import { GithubIcon } from "@/components/icons"; +import { RiDiscordFill } from "react-icons/ri"; +import { + Video, + Shield, + Zap, + Users, + Heart, + ExternalLink, + Layers, + Music, + Type, + Scissors, +} from "lucide-react"; + +export const metadata: Metadata = { + title: "About - OpenCut", + description: + "Learn about OpenCut, the free and open-source video editor built for creators who value privacy and simplicity.", + openGraph: { + title: "About - OpenCut", + description: + "Learn about OpenCut, the free and open-source video editor built for creators who value privacy and simplicity.", + type: "website", + }, +}; + +const features = [ + { + icon: Layers, + title: "Multi-Track Timeline", + description: "Professional editing with multiple video, audio, and text tracks", + }, + { + icon: Shield, + title: "Privacy First", + description: "All processing happens locally in your browser - your files never leave your device", + }, + { + icon: Zap, + title: "Real-Time Preview", + description: "See your edits instantly with live preview as you work", + }, + { + icon: Music, + title: "Audio Support", + description: "Import and edit audio tracks with volume controls and muting", + }, + { + icon: Type, + title: "Text Overlays", + description: "Add customizable text with fonts, colors, and positioning", + }, + { + icon: Scissors, + title: "Precise Editing", + description: "Split, trim, and arrange clips with frame-accurate precision", + }, +]; + +const values = [ + { + icon: Heart, + title: "Open Source", + description: "Built in public, free forever. Anyone can contribute, audit, or fork the code.", + }, + { + icon: Shield, + title: "Privacy Focused", + description: "No server uploads, no tracking, no accounts required. Your content stays yours.", + }, + { + icon: Users, + title: "Community Driven", + description: "Shaped by real users and contributors from around the world.", + }, +]; + +export default function AboutPage() { + return ( +
+
+ +
+ {/* Background decorations */} +
+
+
+
+ +
+
+ {/* Hero Section */} +
+ + + + Open Source + + +

+ About OpenCut +

+

+ A free, open-source video editor that respects your privacy. + Edit videos directly in your browser without uploading to any server. +

+
+ + {/* Mission Section */} +
+
+

Our Mission

+

+ Video editing software has become increasingly complex, expensive, and invasive. + Cloud-based editors upload your personal videos to remote servers. + Professional tools cost hundreds of dollars per year. +

+

+ OpenCut exists to provide a free, private, and simple alternative. + We believe everyone should have access to quality video editing tools + without sacrificing their privacy or their wallet. +

+
+
+ + {/* Features Section */} +
+
+

Features

+

+ Everything you need for video editing, running entirely in your browser +

+
+ +
+ {features.map((feature) => ( + + +
+ +
+

{feature.title}

+

{feature.description}

+
+
+ ))} +
+
+ + {/* Values Section */} +
+
+

Our Values

+

+ The principles that guide how we build OpenCut +

+
+ +
+ {values.map((value) => ( +
+
+ +
+

{value.title}

+

{value.description}

+
+ ))} +
+
+ + {/* CTA Section */} +
+
+

Get Started

+

+ Ready to edit? Jump right in - no account required. + Want to help build the future of video editing? Join our community. +

+ +
+ + + + + + + + + +
+
+
+
+
+
+ +
+ ); +} diff --git a/apps/web/src/components/footer.tsx b/apps/web/src/components/footer.tsx index 7c78fc57..31a0a9c2 100644 --- a/apps/web/src/components/footer.tsx +++ b/apps/web/src/components/footer.tsx @@ -25,7 +25,7 @@ const links: CategoryLinks = { { label: "Contributors", href: "/contributors" }, { label: "Sponsors", href: "/sponsors" }, { label: "Branding", href: "/branding" }, - { label: "About", href: `${SOCIAL_LINKS.github}/blob/main/README.md` }, + { label: "About", href: "/about" }, ], };