Taskora SaaS Hero
Build a high-fidelity, responsive, dark-themed hero section for a SaaS product called "Taskora" using React, Tailwind CSS, and Framer Motion (for entrance animations).
-
Visual Style & Assets Theme: Dark mode base (#050505) with white text. Background Video: Use this video URL as a full-screen background loop. Set it to opacity-50 and add a gradient overlay (black/60 to #050505) so it fades seamlessly into the background at the bottom: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260201_052917_7fc4e418-3123-40bf-b5ba-394c28eb4b3a.mp4 Typography: Import and use these specific Google Fonts: Instrument Serif (Italic) → Strictly for the word "Workflow" in the headline. Manrope → For the "Trusted by" badge and subheadlines. Cabin → For the main CTA button. Inter / Inter Tight → For the Dashboard UI and Navbar links.
-
Component Layout A. Floating Navbar Create a fixed, floating "pill-shaped" navbar with a glassmorphism effect (bg-white/10 backdrop-blur-md). Desktop: Logo on left, Links centered (Home, Features, Company, Contact), Auth buttons (Sign Up, White "Sign In" button) on right. Mobile: Collapse links into a hamburger menu that opens a glassmorphism dropdown.
B. Hero Content (Centered) Badge: A pill-shaped badge reading "Trusted by +30.000 of clients globally". Include a star icon with a blue gradient fill. Headline: Massive scale (up to text-[80px] on desktop). Text: "Simplify Your Workflow. Stay Focused." (Italicize "Workflow" using the Serif font). Subhead: Gray text (text-gray-400): "Taskora helps teams manage projects, tasks, and deadlines with clarity." CTA: A large white button with black text: "Book a Free Demo". Add a subtle hover scale and shadow effect.
C. Dashboard Preview (The "Product Shot") Build a detailed, non-functional mock dashboard interface container placed below the CTA. Visuals: Light mode dashboard (bg-[#F9F9FA]) to contrast with the dark hero background. Sidebar: Thin vertical rail with navigation icons (Home, Users, etc.). Content Area: Stats Cards: 3 cards (Total Sales, Operating Expenses, Gross Profit) showing a value, a percentage trend (green/red), and a mini bar chart at the bottom. Revenue Chart: A section showing a bar chart visualization. Deals Table: A detailed data table showing rows with "Deal Name", "Company" (Amazon.com with logo), "Amount", "Date", "Owner" (avatar), and "Stage" (New tag). Header: Search bar, Notification bell, and User profile pictures.
- Responsiveness Ensure the Typography scales down significantly for mobile (text-5xl for headline). The Dashboard preview should preserve its layout but become scrollable or stack vertically on smaller screens. Navbar transforms from a horizontal row to a mobile drawer.