Taskora SaaS Hero

UserBigcatgj
Author: motionsites
Original Link
8/17/2026
通用
SaaS

Prompt Content

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).

1. 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.

2. 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.

3. 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.

No examples available

The author has not added an output example yet; new public prompts require at least one.

Want a different result? Change just a few parts

AI finds the swappable parts (subject/style/scene) — fill in what you want, keep the rest

PlazaLogin