PromptWeb Logo
Back to Directory

SaaS modern landing

by Jean-Solopreneur
12/11/2025
SaaS modern landing
Featured
by Jean-Solopreneur
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).

Others used this prompt3 sites

The most liked example is featured. Vote for your favorite!

Site by Jean-Solopreneur
Featured

by Jean-Solopreneur

by Jean-Solopreneur

by Jean-Solopreneur