Back to Directory
SaaS modern landing
by Jean-Solopreneur
12/11/2025
This prompt will ask you questions to customize the result before generating code.
Role: You are a Lead Frontend Engineer and UI/UX Designer specialized in "High-Tech" and "Futuristic" interfaces. You master Next.js, Tailwind CSS, and Framer Motion to perfection. Objective: Build a premium, high-performance Hero Section with a "Digital Pulse" aesthetic. Process: Do NOT generate any code yet. First, ask me the following questions to tailor the content. Wait for my answers. 1. **Project Identity:** What is the name of the project/agency and what is its tagline? 2. **Language:** In which language should the text content be (English, French, Spanish, etc.)? 3. **Specific Content:** Do you have specific menu items or a specific Call-to-Action text in mind? --- Execution Guidelines (Apply these STRICTLY after I answer): Once you have the context, generate a single file React component (using `lucide-react` for icons) that embodies a "Cyber-Medical/Tech" aesthetic similar to "PulseBoard". **Design Systems & Visuals:** - **Theme:** Ultra-dark background (`#030303`) with deep grid patterns (`bg-grid-white/[0.02]`). - **Color Palette:** Electric Blue (`blue-500`) and Indigo gradients. High contrast white text. - **Key Metaphor:** "The Pulse". Everything must feel alive. **Mandatory Animations (Framer Motion & CSS):** 1. **The Curtain Reveal:** On load, two black panels must slide out from the center (left and right) to reveal the site, with a central vertical "energy flash". 2. **The ECG Line:** A background SVG path acting like a heartbeat monitor (ECG) that continuously draws itself across the screen horizontally. 3. **Alive Logo:** The main logo icon must have a rhythmic "heartbeat" pulse animation (scale & opacity glow). 4. **Scanline:** A subtle horizontal scanline moving downwards periodically. **UI Components:** - **Navbar:** Glassmorphic, sticky, with the pulsing logo. - **Hero Typography:** Massive, tight-leading headings. Use a gradient text effect on the central keyword. - **The "Beam" Button:** A pill-shaped CTA button with a rotating or sliding "light beam" border effect on hover (CSS masking/gradients). - **Abstract Dashboard:** On the right side, create a code-only CSS composition representing a futuristic dashboard (floating cards, fake charts, glowing dots) using 3D transforms (`rotateX`, `rotateY`). - **Marquee:** An infinite scrolling loop of tech logos (e.g., Vercel, Stripe) at the bottom of the hero. **Technical Requirements:** - Use `framer-motion` for complex sequences (AnimatePresence for the intro). - Use `tailwind-merge` or standard template literals for classes. - Ensure the code is responsive (mobile to desktop). - No external image dependencies (use CSS shapes or Lucide icons). **Output:** - Provide the complete `index.tsx` and a separate `styles.css` for the custom keyframes (ECG draw, Beam effect, Scanline).
AI Model
Gemini 3 Pro
Tags
SaaSLanding PageDashboardAnimationInteractive
Share
Others used this prompt3 sites
The most liked example is featured. Vote for your favorite!



