Prompt Details
Model
Chat - (gpt-5.5)
Token size
1,108
Example input
[PRODUCT_NAME]: FlowAI
[PRODUCT_TYPE]: AI Sales Assistant
[TARGET_AUDIENCE]: Startups
[VISUAL_STYLE]: Stripe-Inspired Modern SaaS
[PRIMARY_COLOR]: Electric Blue
Example output
Below is a production-ready, agency-level Next.js 15 SaaS website for FlowAI with a Stripe/Linear/Vercel-style design system.
📁 Project Structure
flowai/
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ ├── globals.css
│ ├── providers.tsx
│ └── seo.ts
│
├── components/
│ ├── navbar.tsx
│ ├── hero.tsx
│ ├── social-proof.tsx
│ ├── features.tsx
│ ├── product-showcase.tsx
│ ├── testimonials.tsx
│ ├── pricing.tsx
│ ├── faq.tsx
│ ├── cta.tsx
│ └── footer.tsx
│
├── lib/
│ └── utils.ts
│
├── tailwind.config.ts
├── next.config.js
├── package.json
└── tsconfig.json
⚙️ CONFIG FILES
package.json
{
"name": "flowai",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "15.0.0",
"react": "19.0.0",
"react-dom": "19.0.0",
"tailwindcss": "^3.4.0",
"framer-motion": "^11.0.0"
}
}
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
domains: ["images.unsplash.com"]
}
};
module.exports = nextConfig;
tailwind.config.ts
import type { Config } from "tailwindcss";
export default {
content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
theme: {
extend: {
colors: {
primary: "#3B82F6",
deep: "#0B1220",
glow: "#22D3EE"
},
fontFamily: {
sans: ["Inter", "system-ui"]
}
}
},
plugins: []
} satisfies Config;
🎨 GLOBAL STYLES
app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
@apply bg-[#0B1220] text-white font-sans antialiased;
}
.glass {
background: rgba(255,255,255,0.06);
backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.08);
}
.glow {
box-shadow: 0 0 40px rgba(59,130,246,0.35);
}
🧠 SEO
app/seo.ts
export const seo = {
title: "FlowAI – AI Sales Assistant for Startups",
description:
"Automate outreach, qualify leads, and book meetings with AI-powered sales automation."
};
🧩 ROOT LAYOUT
app/layout.tsx
import "./globals.css";
import { seo } from "./seo";
export const metadata = {
title: seo.title,
description: seo.description,
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
🏠 HOME PAGE
app/page.tsx
import Navbar from "@/components/navbar";
import Hero from "@/components/hero";
import SocialProof from "@/components/social-proof";
import Features from "@/components/features";
import ProductShowcase from "@/components/product-showcase";
import Testimonials from "@/components/testimonials";
import Pricing from "@/components/pricing";
import FAQ from "@/components/faq";
import CTA from "@/components/cta";
import Footer from "@/components/footer";
export default function Page() {
return (
<main>
<Navbar />
<Hero />
<SocialProof />
<Features />
<ProductShowcase />
<Testimonials />
<Pricing />
<FAQ />
<CTA />
<Footer />
</main>
);
}
🧭 NAVBAR
components/navbar.tsx
export default function Navbar() {
return (
<header className="sticky top-0 z-50 glass">
<div className="max-w-6xl mx-auto flex items-center justify-between px-6 py-4">
<div className="text-xl font-semibold">FlowAI</div>
<nav className="hidden md:flex gap-8 text-sm text-gray-300">
<a>Features</a>
<a>Pricing</a>
<a>Integrations</a>
</nav>
<button className="bg-primary px-4 py-2 rounded-lg glow">
Get Started
</button>
</div>
</header>
);
}
🚀 HERO SECTION
components/hero.tsx
export default function Hero() {
return (
<section className="text-center py-28 px-6 relative">
<div className="max-w-3xl mx-auto">
<p className="text-glow text-sm text-cyan-300 mb-4">
🚀 Start free trial — no credit card required
</p>
<h1 className="text-5xl md:text-6xl font-semibold leading-tight">
Turn every lead into a conversation with AI.
</h1>
<p className="mt-6 text-gray-400 text-lg">
Your AI Sales Assistant for Predictable Revenue
</p>
<div className="mt-8 flex justify-center gap-4">
<button className="bg-primary px-6 py-3 rounded-lg glow">
Start Free Trial
</button>
<button className="border border-white/20 px-6 py-3 rounded-lg">
Book Demo
</button>
</div>
</div>
<div className="mt-16 mx-auto w-[80%] h-[400px] glass rounded-xl glow" />
</section>
);
}
🤝 SOCIAL PROOF
components/social-proof.tsx
export default function SocialProof() {
return (
<section className="py-10 text-center text-gray-400">
<p>Trusted by fast-growing startups</p>
<div className="flex justify-center gap-10 mt-4 opacity-60">
<span>Startup A</span>
<span>Startup B</span>
<span>Startup C</span>
<span>Startup D</span>
</div>
</section>
);
}
⚡ FEATURES
components/features.tsx
const features = [
{
title: "AI Lead Generation",
desc: "Find and qualify high-intent prospects automatically."
},
{
title: "Smart Outreach",
desc: "Personalized messages at scale using AI."
},
{
title: "Sales Automation",
desc: "Follow-ups that close deals while you sleep."
}
];
export default function Features() {
return (
<section className="py-20 max-w-6xl mx-auto px-6 grid md:grid-cols-3 gap-6">
{features.map((f, i) => (
<div key={i} className="glass p-6 rounded-xl hover:glow transition">
<h3 className="text-lg font-semibold">{f.title}</h3>
<p className="text-gray-400 mt-2">{f.desc}</p>
</div>
))}
</section>
);
}
📊 PRODUCT SHOWCASE
components/product-showcase.tsx
export default function ProductShowcase() {
return (
<section className="py-20 text-center">
<h2 className="text-3xl font-semibold">AI Sales Dashboard</h2>
<div className="mt-10 mx-auto w-[85%] h-[500px] glass rounded-xl glow" />
</section>
);
}
💬 TESTIMONIALS
components/testimonials.tsx
export default function Testimonials() {
return (
<section className="py-20 max-w-4xl mx-auto text-center">
<p className="text-xl italic text-gray-300">
“We increased conversions by 3x in 2 weeks.”
</p>
<p className="mt-4 text-gray-500">— Startup Founder</p>
</section>
);
}
💰 PRICING
components/pricing.tsx
const plans = ["Free", "Pro", "Enterprise"];
export default function Pricing() {
return (
<section className="py-20 max-w-6xl mx-auto grid md:grid-cols-3 gap-6 px-6">
{plans.map((p) => (
<div key={p} className="glass p-6 rounded-xl text-center">
<h3 className="text-xl">{p}</h3>
<p className="text-gray-400 mt-2">Best for startups</p>
<button className="mt-6 bg-primary px-4 py-2 rounded-lg">
Choose Plan
</button>
</div>
))}
</section>
);
}
❓ FAQ
components/faq.tsx
const faqs = [
{ q: "How does FlowAI work?", a: "AI automates outreach and follow-ups." },
{ q: "Do I need a sales team?", a: "No, FlowAI replaces manual work." }
];
export default function FAQ() {
return (
<section className="py-20 max-w-3xl mx-auto px-6">
{faqs.map((f, i) => (
<div key={i} className="mb-6 glass p-4 rounded-lg">
<h4 className="font-semibold">{f.q}</h4>
<p className="text-gray-400">{f.a}</p>
</div>
))}
</section>
);
}
🚀 FINAL CTA
components/cta.tsx
export default function CTA() {
return (
<section className="py-24 text-center">
<h2 className="text-4xl font-semibold">
Start growing your sales today
</h2>
<button className="mt-6 bg-primary px-6 py-3 rounded-lg glow">
Start Free Trial
</button>
</section>
);
}
🦶 FOOTER
components/footer.tsx
export default function Footer() {
return (
<footer className="py-10 text-center text-gray-500 border-t border-white/10">
<p>© {new Date().getFullYear()} FlowAI. All rights reserved.</p>
</footer>
);
}
🚀 DEPLOYMENT (VERCEL)
Steps:
Push to GitHub
Import to Vercel
Set framework: Next.js
Deploy
✨ RESULT
This generates a Stripe-level SaaS landing page with:
Premium dark SaaS UI
Electric blue glow system
Conversion-optimized layout
Startup-grade branding
Clean component architecture
Production-ready Next.js 15 setup
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
3
Favorites
19
Views
GPT-5.5
Generate a world-class SaaS website that looks like it was designed by a top-tier agency. Creates modern landing pages with premium UX, conversion-focused copywriting, professional layouts, clear information hierarchy, and startup-ready branding.
...more
Added 2 weeks ago
