From bd310b1bbfaa231a422aa9a018e87d24b763a141 Mon Sep 17 00:00:00 2001 From: Samrit Mukherjee Date: Fri, 22 May 2026 22:10:11 +0530 Subject: [PATCH] feat: add landing page components including Hero, FeatureSection, Footer, and WorkflowSection --- package.json | 1 + src/app/globals.css | 20 +-- src/app/layout.tsx | 16 +- src/app/page.tsx | 25 +-- src/app/reframe/page.tsx | 23 +++ src/components/Header.tsx | 27 ++++ src/components/ThemeProvider.tsx | 36 ++--- src/components/ThemeToggle.tsx | 22 +-- src/components/landing/CTASection.tsx | 90 +++++++++++ src/components/landing/FeatureSection.tsx | 93 +++++++++++ src/components/landing/Footer.tsx | 78 +++++++++ src/components/landing/Hero.tsx | 148 +++++++++++++++++ src/components/landing/LandingWrapper.tsx | 31 ++++ src/components/landing/LoadingScreen.tsx | 178 +++++++++++++++++++++ src/components/landing/Navbar.tsx | 44 +++++ src/components/landing/PrivacySection.tsx | 123 ++++++++++++++ src/components/landing/Sparkles.tsx | 93 +++++++++++ src/components/landing/WorkflowSection.tsx | 96 +++++++++++ 18 files changed, 1051 insertions(+), 93 deletions(-) create mode 100644 src/app/reframe/page.tsx create mode 100644 src/components/Header.tsx create mode 100644 src/components/landing/CTASection.tsx create mode 100644 src/components/landing/FeatureSection.tsx create mode 100644 src/components/landing/Footer.tsx create mode 100644 src/components/landing/Hero.tsx create mode 100644 src/components/landing/LandingWrapper.tsx create mode 100644 src/components/landing/LoadingScreen.tsx create mode 100644 src/components/landing/Navbar.tsx create mode 100644 src/components/landing/PrivacySection.tsx create mode 100644 src/components/landing/Sparkles.tsx create mode 100644 src/components/landing/WorkflowSection.tsx diff --git a/package.json b/package.json index b4052776..90eae8fc 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "next": "^15.1.8", "react": "^19.0.0", "react-dom": "^19.0.0", + "react-icons": "^5.6.0", "reframe": ".", "tailwind-merge": "^3.6.0", "wasm-feature-detect": "^1.8.0" diff --git a/src/app/globals.css b/src/app/globals.css index 52b2929d..602f8484 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -36,26 +36,12 @@ --error-hover: #991b1b; } -/* ── High contrast mode tokens ── */ -[data-theme="high-contrast"] { - --bg: #000000; - --surface: #000000; - --border: #FFFFFF; - --text: #FFFFFF; - --muted: #FFFFFF; - - --accent: #FFFF00; - --accent-hover: #FFFF00; - - --error: #FF6666; - --success: #66FF66; - - --film-600: #FF6666; - --film-400: #66FF66; -} /* ── Base styles ── */ +html { + scroll-behavior: smooth; +} body { background-color: var(--bg); color: var(--text); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 03ee0db9..71bc75c3 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -3,9 +3,8 @@ import { Bebas_Neue, Syne, DM_Sans } from "next/font/google"; import ErrorBoundary from "@/components/ErrorBoundary"; import "./globals.css"; import { ThemeProvider } from "@/components/ThemeProvider"; -import { ThemeToggle } from "@/components/ThemeToggle"; +import Header from "@/components/Header"; import ScrollToTop from "@/components/ScrollToTop"; -import BrandLogo from "@/components/BrandLogo"; export const metadata: Metadata = { title: "Reframe — Resize, trim, and export videos in your browser", @@ -47,7 +46,7 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - + @@ -87,16 +86,7 @@ export default function RootLayout({ -
-
- -

Reframe

-
- -
+
{children}
diff --git a/src/app/page.tsx b/src/app/page.tsx index 637feae3..5a52f5bf 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,24 +1,5 @@ -import VideoEditor from "@/components/VideoEditor"; -import Footer from "@/components/Footer"; +import LandingWrapper from "@/components/landing/LandingWrapper"; -export default function Home() { - return ( - <> - - ⭐ Star on GitHub - - -
- -
- -