From 7fd2f7e289525dfd1894e3039df7dd786a349d9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yusuf=20=C4=B0pek?= Date: Fri, 20 Feb 2026 16:25:45 +0300 Subject: [PATCH] feat: Redesign the landing page with an enhanced sticky header, a new hero section featuring gradient text and a badge, and integrate additional Lucide icons for future features. --- app/page.tsx | 480 ++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 363 insertions(+), 117 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index d6d727e..8e0afb8 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,5 +1,5 @@ import Link from 'next/link'; -import { Video, MessageSquare, Mic, Share2, ArrowRight, Play } from 'lucide-react'; +import { Video, MessageSquare, Mic, Share2, ArrowRight, Play, Github, Server, History, Users, Clock, ArrowUpRight, PenTool, Image as ImageIcon, Sparkles, FileText } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { auth } from '@/lib/auth'; @@ -8,27 +8,31 @@ export default async function HomePage() { const isLoggedIn = !!session?.user; return ( -
+
{/* Header */} -
-
- -
- - {/* Features */} -
-

- Everything you need for video feedback -

-
- - - - -
-
+ {/* Hero Image/Video Placeholder */} +
+
+
+ +

Product Demo Video

+
+
+ - {/* CTA */} -
-
-

Ready to streamline your video workflow?

-

- Join teams who have already switched to OpenFrame for faster, clearer video feedback. -

- -
-
+ {/* Feature 1: Visual Left, Text Right */} +
+
+
+
+ {/* Visual Placeholder for Comments */} +
+
+
+
+
+
+
+
+
+
YI
+
+
+
+ Yusuf İpek +
+ + 0:39 + +
+
+ +
+

"Let's change the color to red."

+
+
+
+
+
+
+ +
+

Pinpoint exactly what needs fixing.

+

+ Stop guessing what "that thing around 2 minutes in" means. + Drop timestamped comments directly on the timeline. Feeling lazy? Leave a voice note instead. +

+
    + {['Threaded replies to keep conversations clean', 'Mark comments as resolved', 'Voice recording with Web Audio API'].map((item, i) => ( +
  • +
    +
    +
    + {item} +
    • + ))} +
+
+
+
+ + {/* Feature 2: Text Left, Visual Right */} +
+
+
+
+ +
+

Never lose track of a version again.

+

+ "Final_v3_ACTUAL_final_v2.mp4" is dead. Upload or link new versions cleanly under the same project. Compare iterations and see what actually changed. +

+
    + {['Clean v1, v2, v3 organization', 'Keep old comments preserved on previous versions', 'Support for YouTube, Vimeo, and direct links'].map((item, i) => ( +
  • +
    +
    +
    + {item} +
    • + ))} +
+
+
+
+
+ {[3, 2, 1].map((v) => ( +
+
+
+ {v === 3 ? 'Current' : '3 days ago'} +
+ ))} +
+
+
+
+ + {/* Feature 3: Visual Left, Text Right */} +
+
+
+
+
+
+ +
Workspace
+
+
+ +
Guest Links
+
+
+ Notifications (Email & Telegram) +
+
+
+
+
+ +
+

Share seamlessly.

+

+ Invite your core team to your workspace, or generate public links for clients. + Guests can leave comments without dealing with the friction of creating an account. +

+
    + {['Public, Private, and Invite-only projects', 'Frictionless guest commenting', 'Telegram & Email webhook integrations'].map((item, i) => ( +
  • +
    +
    +
    + {item} +
    • + ))} +
+
+
+
+ + {/* Feature 4: Text Left, Visual Right */} +
+
+
+
+ +
+

Communicate visually.

+

+ Sometimes words aren't enough. Draw directly on video frames to highlight exact details, and attach reference pictures directly to your comments. +

+
    + {['Draw and annotate on frames', 'Attach images to comments', 'Leave no room for ambiguity'].map((item, i) => ( +
  • +
    +
    +
    + {item} +
    • + ))} +
+
+
+
+
+
+ + + + +
+ +
+
+
+
AI
+
+

"Reference for the color grade:"

+
+ +
+
+
+
+
+
+
+ + {/* Feature 5: Visual Left, Text Right */} +
+
+
+
+
+ {/* AI Summary */} +
+
+
+ + AI Intelligence +
+

"User suggests the transition at 0:45 is too sharp. Prefer a smoother fade to match the music."

+
+ {/* Export */} +
+
+ PDF Export +
+
+ CSV Export +
+
+
+
+
+
+ +
+

Powerful workflows.

+

+ Let AI summarize long-winded voice notes automatically, and export all your project feedback into neat PDF or CSV files ready for the team. +

+
    + {['AI-powered voice summaries', 'One-click PDF/CSV exports', 'Structured feedback data'].map((item, i) => ( +
  • +
    +
    +
    + {item} +
    • + ))} +
+
+
+
+ + {/* Business Model Section */} +
+
+
+ +
+
+

Open Source or Managed.
Your call.

+

+ We believe in code freedom. Self-host it if you like configuring servers, or use our managed platform if you value your time. +

+
+ +
+
+
+ +
+ {/* Visual alignment block to match the other card's badge */} +
+

Self-Hosted

+

Grab the code. Deploy it on your own infrastructure. It's 100% free and open source.

+
+ +
+ +
+
+ +
+
+
+ Recommended +
+

Managed Hosting

+

Skip the DevOps. Use open-frame.net. We handle the servers, storage, and updates.

+
+
+ +
+
+
+
+
+ {/* Footer */} -