Prompt Details
Model
(claude-4-5-sonnet)
Token size
813
Example input
[PRODUCT/SERVICE]: SaaS productivity tool
[DESIGN_STYLE]: dark-elegant
Example output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="FlowState - Transform chaos into clarity with intelligent task management">
<title>FlowState - Intelligent Productivity Platform</title>
<style>
/* ================================
CSS VARIABLES & FOUNDATION
================================ */
:root {
/* Dark Elegant Color Palette */
--color-primary: #0A0E27;
--color-secondary: #1A1F3A;
--color-accent: #4ECDC4;
--color-accent-bright: #45B7D1;
--color-gold: #F7B731;
--color-text-primary: #E8EAF6;
--color-text-secondary: #A5B4CB;
--color-text-muted: #6B7A99;
--color-border: rgba(78, 205, 196, 0.15);
--color-surface: rgba(26, 31, 58, 0.8);
--color-gradient-start: #1A1F3A;
--color-gradient-end: #0A0E27;
/* Typography */
--font-display: 'Georgia', 'Times New Roman', serif;
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--font-mono: 'Courier New', monospace;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 4rem;
--spacing-xl: 6rem;
/* Transitions */
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
/* Effects */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
--shadow-glow: 0 0 30px rgba(78, 205, 196, 0.3);
}
/* ================================
RESET & BASE STYLES
================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-body);
background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
color: var(--color-text-primary);
line-height: 1.7;
overflow-x: hidden;
position: relative;
min-height: 100vh;
}
/* Animated Background Pattern */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 50%, rgba(78, 205, 196, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(69, 183, 209, 0.05) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, rgba(247, 183, 49, 0.03) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
animation: backgroundPulse 20s ease-in-out infinite;
}
@keyframes backgroundPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* ================================
TYPOGRAPHY
================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.2;
color: var(--color-text-primary);
}
h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
letter-spacing: -0.02em;
}
h2 {
font-size: clamp(2rem, 4vw, 3.5rem);
letter-spacing: -0.01em;
}
h3 {
font-size: clamp(1.5rem, 3vw, 2rem);
}
p {
font-size: clamp(1rem, 2vw, 1.125rem);
color: var(--color-text-secondary);
}
/* ================================
HEADER & NAVIGATION
================================ */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(10, 14, 39, 0.8);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--color-border);
transition: var(--transition-normal);
}
.header.scrolled {
background: rgba(10, 14, 39, 0.95);
box-shadow: var(--shadow-md);
}
.header__container {
max-width: 1400px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__logo {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-primary);
text-decoration: none;
transition: var(--transition-fast);
}
.header__logo:hover {
color: var(--color-accent);
}
.header__logo svg {
width: 36px;
height: 36px;
}
.nav {
display: flex;
gap: 2.5rem;
align-items: center;
}
.nav__link {
color: var(--color-text-secondary);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
transition: var(--transition-fast);
position: relative;
}
.nav__link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--color-accent);
transition: var(--transition-fast);
}
.nav__link:hover {
color: var(--color-text-primary);
}
.nav__link:hover::after {
width: 100%;
}
.nav__cta {
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-bright) 100%);
color: var(--color-primary);
border-radius: 8px;
font-weight: 600;
transition: var(--transition-fast);
box-shadow: var(--shadow-sm);
}
.nav__cta:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-glow);
}
/* Mobile Menu Button */
.menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
.menu-toggle span {
width: 25px;
height: 2px;
background: var(--color-text-primary);
transition: var(--transition-fast);
}
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* ================================
HERO SECTION
================================ */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding: 8rem 2rem 4rem;
overflow: hidden;
}
.hero__container {
max-width: 1400px;
margin: 0 auto;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 1;
}
.hero__content {
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero__label {
display: inline-block;
padding: 0.5rem 1rem;
background: rgba(78, 205, 196, 0.1);
border: 1px solid var(--color-accent);
border-radius: 50px;
color: var(--color-accent);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 1.5rem;
animation: fadeInUp 0.8s ease-out 0.2s backwards;
}
.hero__title {
margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: fadeInUp 0.8s ease-out 0.3s backwards;
}
.hero__description {
font-size: 1.25rem;
margin-bottom: 2.5rem;
max-width: 550px;
animation: fadeInUp 0.8s ease-out 0.4s backwards;
}
.hero__cta-group {
display: flex;
gap: 1rem;
flex-wrap: wrap;
animation: fadeInUp 0.8s ease-out 0.5s backwards;
}
.btn {
padding: 1rem 2rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 10px;
cursor: pointer;
transition: var(--transition-fast);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-width: 44px;
min-height: 44px;
justify-content: center;
}
.btn--primary {
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-bright) 100%);
color: var(--color-primary);
box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-glow);
}
.btn--secondary {
background: transparent;
color: var(--color-text-primary);
border: 2px solid var(--color-border);
}
.btn--secondary:hover {
border-color: var(--color-accent);
background: rgba(78, 205, 196, 0.05);
}
.hero__visual {
position: relative;
animation: fadeInRight 0.8s ease-out 0.4s backwards;
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.hero__visual svg {
width: 100%;
height: auto;
filter: drop-shadow(0 10px 40px rgba(78, 205, 196, 0.2));
}
/* ================================
STATS SECTION
================================ */
.stats {
position: relative;
padding: 4rem 2rem;
background: var(--color-surface);
backdrop-filter: blur(10px);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.stats__container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 3rem;
text-align: center;
}
.stat {
opacity: 0;
transform: translateY(20px);
transition: var(--transition-slow);
}
.stat.visible {
opacity: 1;
transform: translateY(0);
}
.stat__number {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
display: block;
}
.stat__label {
font-size: 1rem;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
}
/* ================================
FEATURES SECTION
================================ */
.features {
padding: var(--spacing-xl) 2rem;
position: relative;
}
.features__container {
max-width: 1400px;
margin: 0 auto;
}
.features__header {
text-align: center;
margin-bottom: var(--spacing-lg);
opacity: 0;
transform: translateY(20px);
transition: var(--transition-slow);
}
.features__header.visible {
opacity: 1;
transform: translateY(0);
}
.features__subtitle {
color: var(--color-accent);
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1rem;
}
.features__title {
margin-bottom: 1rem;
}
.features__description {
max-width: 700px;
margin: 0 auto;
font-size: 1.25rem;
}
.features__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-top: 4rem;
}
.feature-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 2.5rem;
transition: var(--transition-normal);
opacity: 0;
transform: translateY(30px);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-bright) 100%);
transform: scaleX(0);
transform-origin: left;
transition: var(--transition-normal);
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-card.visible {
opacity: 1;
transform: translateY(0);
}
.feature-card:hover {
transform: translateY(-8px);
border-color: var(--color-accent);
box-shadow: var(--shadow-lg);
}
.feature-card__icon {
width: 60px;
height: 60px;
margin-bottom: 1.5rem;
transition: var(--transition-normal);
}
.feature-card:hover .feature-card__icon {
transform: scale(1.1) rotate(5deg);
}
.feature-card__title {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--color-text-primary);
}
.feature-card__description {
color: var(--color-text-secondary);
line-height: 1.7;
}
/* ================================
TESTIMONIALS SECTION
================================ */
.testimonials {
padding: var(--spacing-xl) 2rem;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.testimonials__container {
max-width: 1400px;
margin: 0 auto;
}
.testimonials__header {
text-align: center;
margin-bottom: var(--spacing-lg);
}
.testimonials__title {
margin-bottom: 1rem;
}
.testimonials__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.testimonial-card {
background: rgba(26, 31, 58, 0.6);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 2rem;
transition: var(--transition-normal);
opacity: 0;
transform: scale(0.95);
}
.testimonial-card.visible {
opacity: 1;
transform: scale(1);
}
.testimonial-card:hover {
border-color: var(--color-accent);
transform: scale(1.02);
}
.testimonial-card__quote {
font-size: 1.125rem;
font-style: italic;
color: var(--color-text-primary);
margin-bottom: 1.5rem;
line-height: 1.7;
}
.testimonial-card__author {
display: flex;
align-items: center;
gap: 1rem;
}
.testimonial-card__avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-bright) 100%);
}
.testimonial-card__name {
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 0.25rem;
}
.testimonial-card__role {
font-size: 0.875rem;
color: var(--color-text-muted);
}
/* ================================
PRICING SECTION
================================ */
.pricing {
padding: var(--spacing-xl) 2rem;
}
.pricing__container {
max-width: 1400px;
margin: 0 auto;
}
.pricing__header {
text-align: center;
margin-bottom: var(--spacing-lg);
}
.pricing__title {
margin-bottom: 1rem;
}
.pricing__description {
max-width: 700px;
margin: 0 auto;
font-size: 1.25rem;
}
.pricing__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 4rem;
}
.pricing-card {
background: var(--color-surface);
border: 2px solid var(--color-border);
border-radius: 20px;
padding: 3rem 2rem;
text-align: center;
transition: var(--transition-normal);
opacity: 0;
transform: translateY(30px);
position: relative;
}
.pricing-card.visible {
opacity: 1;
transform: translateY(0);
}
.pricing-card--featured {
border-color: var(--color-accent);
transform: scale(1.05);
box-shadow: var(--shadow-glow);
}
.pricing-card--featured::before {
content: 'MOST POPULAR';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-bright) 100%);
color: var(--color-primary);
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
}
.pricing-card:hover {
transform: translateY(-10px);
border-color: var(--color-accent);
}
.pricing-card__name {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pricing-card__price {
font-family: var(--font-display);
font-size: 3.5rem;
font-weight: 700;
color: var(--color-accent);
margin-bottom: 0.5rem;
}
.pricing-card__period {
color: var(--color-text-muted);
margin-bottom: 2rem;
}
.pricing-card__features {
list-style: none;
margin-bottom: 2rem;
text-align: left;
}
.pricing-card__feature {
padding: 0.75rem 0;
color: var(--color-text-secondary);
display: flex;
align-items: center;
gap: 0.75rem;
}
.pricing-card__feature::before {
content: '✓';
color: var(--color-accent);
font-weight: 700;
font-size: 1.25rem;
}
.pricing-card__cta {
width: 100%;
}
/* ================================
FOOTER
================================ */
.footer {
background: var(--color-secondary);
border-top: 1px solid var(--color-border);
padding: 4rem 2rem 2rem;
}
.footer__container {
max-width: 1400px;
margin: 0 auto;
}
.footer__main {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 3rem;
}
.footer__brand {
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer__logo {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-primary);
text-decoration: none;
}
.footer__logo svg {
width: 36px;
height: 36px;
}
.footer__tagline {
color: var(--color-text-muted);
max-width: 300px;
}
.footer__section-title {
font-size: 1rem;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.footer__links {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer__link {
color: var(--color-text-secondary);
text-decoration: none;
transition: var(--transition-fast);
}
.footer__link:hover {
color: var(--color-accent);
transform: translateX(5px);
}
.footer__bottom {
padding-top: 2rem;
border-top: 1px solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer__copyright {
color: var(--color-text-muted);
font-size: 0.875rem;
}
.footer__social {
display: flex;
gap: 1rem;
}
.footer__social-link {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
border-radius: 50%;
color: var(--color-text-secondary);
transition: var(--transition-fast);
}
.footer__social-link:hover {
border-color: var(--color-accent);
color: var(--color-accent);
transform: translateY(-3px);
}
/* ================================
RESPONSIVE DESIGN
================================ */
@media (max-width: 1024px) {
.hero__container {
grid-template-columns: 1fr;
gap: 3rem;
}
.hero__visual {
order: -1;
}
.footer__main {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
:root {
--spacing-lg: 3rem;
--spacing-xl: 4rem;
}
.header__container {
padding: 1rem;
}
.nav {
position: fixed;
top: 73px;
left: 0;
right: 0;
background: rgba(10, 14, 39, 0.98);
backdrop-filter: blur(20px);
flex-direction: column;
padding: 2rem;
gap: 1.5rem;
transform: translateX(100%);
transition: var(--transition-normal);
border-top: 1px solid var(--color-border);
box-shadow: var(--shadow-lg);
}
.nav.active {
transform: translateX(0);
}
.menu-toggle {
display: flex;
}
.hero {
padding: 6rem 1rem 3rem;
}
.hero__cta-group {
flex-direction: column;
}
.btn {
width: 100%;
}
.features__grid,
.testimonials__grid,
.pricing__grid {
grid-template-columns: 1fr;
}
.stats__container {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.footer__main {
grid-template-columns: 1fr;
}
.footer__bottom {
flex-direction: column;
text-align: center;
}
.pricing-card--featured {
transform: scale(1);
}
}
@media (max-width: 480px) {
.stats__container {
grid-template-columns: 1fr;
}
}
/* ================================
UTILITY CLASSES
================================ */
.hidden {
display: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
</style>
</head>
<body>
<!-- ================================
HEADER
================================ -->
<header class="header" id="header">
<div class="header__container">
<a href="#" class="header__logo" aria-label="FlowState Home">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 2L38 12V28L20 38L2 28V12L20 2Z" stroke="#4ECDC4" stroke-width="2" fill="rgba(78, 205, 196, 0.1)"/>
<path d="M20 14L28 19V25L20 30L12 25V19L20 14Z" fill="#4ECDC4"/>
<circle cx="20" cy="20" r="3" fill="#0A0E27"/>
</svg>
<span>FlowState</span>
</a>
<nav class="nav" id="nav">
<a href="#features" class="nav__link">Features</a>
<a href="#testimonials" class="nav__link">Testimonials</a>
<a href="#pricing" class="nav__link">Pricing</a>
<a href="#" class="nav__link nav__cta">Start Free Trial</a>
</nav>
<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu" aria-expanded="false">
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>
<!-- ================================
HERO SECTION
================================ -->
<section class="hero" id="hero">
<div class="hero__container">
<div class="hero__content">
<span class="hero__label">AI-Powered Productivity</span>
<h1 class="hero__title">Transform Chaos Into Clarity</h1>
<p class="hero__description">
FlowState intelligently organizes your tasks, projects, and goals with AI that understands your workflow. Stop managing tools and start achieving results.
</p>
<div class="hero__cta-group">
<a href="#" class="btn btn--primary">
Start Your Free Trial
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 10H16M16 10L11 5M16 10L11 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
<a href="#features" class="btn btn--secondary">See How It Works</a>
</div>
</div>
<div class="hero__visual">
<svg viewBox="0 0 600 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Background Glow -->
<defs>
<linearGradient id="heroGradient1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4ECDC4;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#45B7D1;stop-opacity:0.1" />
</linearGradient>
<linearGradient id="heroGradient2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4ECDC4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#45B7D1;stop-opacity:1" />
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background Circle -->
<circle cx="300" cy="250" r="200" fill="url(#heroGradient1)" opacity="0.3">
<animate attributeName="r" values="200;210;200" dur="4s" repeatCount="indefinite"/>
</circle>
<!-- Main Dashboard Frame -->
<rect x="100" y="100" width="400" height="300" rx="16" fill="rgba(26, 31, 58, 0.9)" stroke="#4ECDC4" stroke-width="2" filter="url(#glow)"/>
<!-- Header Bar -->
<rect x="100" y="100" width="400" height="50" rx="16" fill="rgba(78, 205, 196, 0.1)"/>
<circle cx="125" cy="125" r="8" fill="#4ECDC4"/>
<circle cx="150" cy="125" r="8" fill="#45B7D1"/>
<circle cx="175" cy="125" r="8" fill="#F7B731"/>
<!-- Task Cards -->
<g opacity="0.9">
<!-- Card 1 -->
<rect x="120" y="170" width="160" height="60" rx="8" fill="rgba(78, 205, 196, 0.15)" stroke="#4ECDC4" stroke-width="1">
<animate attributeName="y" values="170;165;170" dur="3s" repeatCount="indefinite"/>
</rect>
<line x1="135" y1="190" x2="215" y2="190" stroke="#4ECDC4" stroke-width="2" stroke-linecap="round"/>
<line x1="135" y1="205" x2="190" y2="205" stroke="rgba(78, 205, 196, 0.5)" stroke-width="2" stroke-linecap="round"/>
<!-- Card 2 -->
<rect x="120" y="245" width="160" height="60" rx="8" fill="rgba(69, 183, 209, 0.15)" stroke="#45B7D1" stroke-width="1">
<animate attributeName="y" values="245;240;245" dur="3s" begin="0.5s" repeatCount="indefinite"/>
</rect>
<line x1="135" y1="265" x2="225" y2="265" stroke="#45B7D1" stroke-width="2" stroke-linecap="round"/>
<line x1="135" y1="280" x2="200" y2="280" stroke="rgba(69, 183, 209, 0.5)" stroke-width="2" stroke-linecap="round"/>
<!-- Card 3 -->
<rect x="300" y="170" width="160" height="135" rx="8" fill="rgba(247, 183, 49, 0.15)" stroke="#F7B731" stroke-width="1">
<animate attributeName="y" values="170;165;170" dur="3s" begin="1s" repeatCount="indefinite"/>
</rect>
<line x1="315" y1="190" x2="395" y2="190" stroke="#F7B731" stroke-width="2" stroke-linecap="round"/>
<line x1="315" y1="210" x2="430" y2="210" stroke="rgba(247, 183, 49, 0.5)" stroke-width="2" stroke-linecap="round"/>
<line x1="315" y1="230" x2="410" y2="230" stroke="rgba(247, 183, 49, 0.5)" stroke-width="2" stroke-linecap="round"/>
<line x1="315" y1="250" x2="380" y2="250" stroke="rgba(247, 183, 49, 0.5)" stroke-width="2" stroke-linecap="round"/>
</g>
<!-- AI Sparkle Effect -->
<g opacity="0.8">
<circle cx="460" cy="140" r="3" fill="#4ECDC4">
<animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite"/>
</circle>
<circle cx="470" cy="150" r="2" fill="#45B7D1">
<animate attributeName="opacity" values="0;1;0" dur="2s" begin="0.3s" repeatCount="indefinite"/>
</circle>
<circle cx="450" cy="155" r="2.5" fill="#F7B731">
<animate attributeName="opacity" values="0;1;0" dur="2s" begin="0.6s" repeatCount="indefinite"/>
</circle>
</g>
<!-- Connection Lines -->
<path d="M 280 200 Q 290 220 300 235" stroke="#4ECDC4" stroke-width="1.5" stroke-dasharray="4,4" opacity="0.5">
<animate attributeName="stroke-dashoffset" values="0;8" dur="1s" repeatCount="indefinite"/>
</path>
</svg>
</div>
</div>
</section>
<!-- ================================
STATS SECTION
================================ -->
<section class="stats">
<div class="stats__container">
<div class="stat">
<span class="stat__number">10M+</span>
<span class="stat__label">Tasks Completed</span>
</div>
<div class="stat">
<span class="stat__number">150K+</span>
<span class="stat__label">Active Users</span>
</div>
<div class="stat">
<span class="stat__number">40%</span>
<span class="stat__label">Time Saved</span>
</div>
<div class="stat">
<span class="stat__number">4.9★</span>
<span class="stat__label">Average Rating</span>
</div>
</div>
</section>
<!-- ================================
FEATURES SECTION
================================ -->
<section class="features" id="features">
<div class="features__container">
<div class="features__header">
<p class="features__subtitle">Intelligent Features</p>
<h2 class="features__title">Everything You Need to Stay Productive</h2>
<p class="features__description">
Powerful AI-driven tools that adapt to your unique workflow and help you accomplish more with less effort.
</p>
</div>
<div class="features__grid">
<!-- Feature 1 -->
<div class="feature-card">
<svg class="feature-card__icon" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="28" fill="rgba(78, 205, 196, 0.1)" stroke="#4ECDC4" stroke-width="2"/>
<path d="M20 30L27 37L40 23" stroke="#4ECDC4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="30" cy="30" r="4" fill="#4ECDC4">
<animate attributeName="r" values="4;6;4" dur="2s" repeatCount="indefinite"/>
</circle>
</svg>
<h3 class="feature-card__title">Smart Task Prioritization</h3>
<p class="feature-card__description">
Our AI analyzes your tasks, deadlines, and work patterns to automatically prioritize what matters most. Focus on high-impact work while the algorithm handles the rest.
</p>
</div>
<!-- Feature 2 -->
<div class="feature-card">
<svg class="feature-card__icon" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="40" height="40" rx="8" fill="rgba(69, 183, 209, 0.1)" stroke="#45B7D1" stroke-width="2"/>
<path d="M20 25H40M20 30H35M20 35H40" stroke="#45B7D1" stroke-width="2" stroke-linecap="round"/>
<circle cx="45" cy="15" r="8" fill="#F7B731" stroke="#F7B731" stroke-width="2">
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
</circle>
</svg>
<h3 class="feature-card__title">Natural Language Processing</h3>
<p class="feature-card__description">
Simply type or speak your tasks naturally. FlowState understands context, extracts due dates, assigns priorities, and organizes everything instantly.
</p>
</div>
<!-- Feature 3 -->
<div class="feature-card">
<svg class="feature-card__icon" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="25" stroke="#4ECDC4" stroke-width="2" fill="none"/>
<path d="M30 15V30L40 35" stroke="#4ECDC4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="30" cy="30" r="3" fill="#4ECDC4"/>
<g opacity="0.6">
<circle cx="30" cy="5" r="2" fill="#45B7D1"/>
<circle cx="55" cy="30" r="2" fill="#45B7D1"/>
<circle cx="30" cy="55" r="2" fill="#45B7D1"/>
<circle cx="5" cy="30" r="2" fill="#45B7D1"/>
</g>
</svg>
<h3 class="feature-card__title">Smart Scheduling</h3>
<p class="feature-card__description">
Automatically find optimal time slots for your tasks based on your calendar, energy patterns, and past productivity data. Work when you're at your best.
</p>
</div>
<!-- Feature 4 -->
<div class="feature-card">
<svg class="feature-card__icon" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 40L30 15L50 40H10Z" fill="rgba(78, 205, 196, 0.1)" stroke="#4ECDC4" stroke-width="2"/>
<path d="M20 35L30 20L40 35" stroke="#4ECDC4" stroke-width="2" fill="none"/>
<circle cx="30" cy="45" r="3" fill="#F7B731"/>
<path d="M15 50H45" stroke="#45B7D1" stroke-width="2" stroke-linecap="round"/>
</svg>
<h3 class="feature-card__title">Progress Analytics</h3>
<p class="feature-card__description">
Visualize your productivity trends with beautiful, actionable insights. Understand your patterns, celebrate wins, and continuously improve your workflow.
</p>
</div>
<!-- Feature 5 -->
<div class="feature-card">
<svg class="feature-card__icon" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="30" r="12" fill="rgba(78, 205, 196, 0.15)" stroke="#4ECDC4" stroke-width="2"/>
<circle cx="40" cy="30" r="12" fill="rgba(69, 183, 209, 0.15)" stroke="#45B7D1" stroke-width="2"/>
<path d="M26 30H34" stroke="#F7B731" stroke-width="3" stroke-linecap="round"/>
</svg>
<h3 class="feature-card__title">Seamless Integrations</h3>
<p class="feature-card__description">
Connect with your favorite tools including Slack, Google Calendar, Notion, and 50+ other apps. All your work in one intelligent hub.
</p>
</div>
<!-- Feature 6 -->
<div class="feature-card">
<svg class="feature-card__icon" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="15" y="15" width="30" height="30" rx="6" fill="rgba(69, 183, 209, 0.1)" stroke="#45B7D1" stroke-width="2"/>
<path d="M25 27L28 30L35 23" stroke="#4ECDC4" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="45" cy="15" r="3" fill="#F7B731">
<animate attributeName="cy" values="15;12;15" dur="1.5s" repeatCount="indefinite"/>
</circle>
</svg>
<h3 class="feature-card__title">Team Collaboration</h3>
<p class="feature-card__description">
Share projects, assign tasks, and track team progress in real-time. Stay aligned with powerful collaboration features that keep everyone in sync.
</p>
</div>
</div>
</div>
</section>
<!-- ================================
TESTIMONIALS SECTION
================================ -->
<section class="testimonials" id="testimonials">
<div class="testimonials__container">
<div class="testimonials__header">
<h2 class="testimonials__title">Loved by Productive People</h2>
<p class="features__description">
Join thousands of professionals who've transformed their productivity with FlowState.
</p>
</div>
<div class="testimonials__grid">
<div class="testimonial-card">
<p class="testimonial-card__quote">
"FlowState has completely changed how I manage my work. The AI prioritization is incredibly accurate, and I'm getting 3 hours back every day."
</p>
<div class="testimonial-card__author">
<div class="testimonial-card__avatar"></div>
<div>
<div class="testimonial-card__name">Sarah Martinez</div>
<div class="testimonial-card__role">Product Manager, TechCorp</div>
</div>
</div>
</div>
<div class="testimonial-card">
<p class="testimonial-card__quote">
"As a freelancer juggling multiple clients, FlowState keeps me organized without the overhead. It's like having a personal assistant that actually understands my work."
</p>
<div class="testimonial-card__author">
<div class="testimonial-card__avatar"></div>
<div>
<div class="testimonial-card__name">James Chen</div>
<div class="testimonial-card__role">Design Consultant</div>
</div>
</div>
</div>
<div class="testimonial-card">
<p class="testimonial-card__quote">
"The natural language input is a game-changer. I can brain dump everything and FlowState organizes it perfectly. My team productivity is up 40% since we switched."
</p>
<div class="testimonial-card__author">
<div class="testimonial-card__avatar"></div>
<div>
<div class="testimonial-card__name">Maya Patel</div>
<div class="testimonial-card__role">Engineering Lead, StartupX</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ================================
PRICING SECTION
================================ -->
<section class="pricing" id="pricing">
<div class="pricing__container">
<div class="pricing__header">
<h2 class="pricing__title">Simple, Transparent Pricing</h2>
<p class="pricing__description">
Choose the plan that fits your needs. All plans include a 14-day free trial.
</p>
</div>
<div class="pricing__grid">
<!-- Free Plan -->
<div class="pricing-card">
<h3 class="pricing-card__name">Starter</h3>
<div class="pricing-card__price">$0</div>
<div class="pricing-card__period">Forever free</div>
<ul class="pricing-card__features">
<li class="pricing-card__feature">Up to 50 tasks</li>
<li class="pricing-card__feature">Basic AI prioritization</li>
<li class="pricing-card__feature">3 project boards</li>
<li class="pricing-card__feature">Mobile apps</li>
<li class="pricing-card__feature">Email support</li>
</ul>
<a href="#" class="btn btn--secondary pricing-card__cta">Get Started</a>
</div>
<!-- Pro Plan -->
<div class="pricing-card pricing-card--featured">
<h3 class="pricing-card__name">Professional</h3>
<div class="pricing-card__price">$12</div>
<div class="pricing-card__period">per month, billed annually</div>
<ul class="pricing-card__features">
<li class="pricing-card__feature">Unlimited tasks & projects</li>
<li class="pricing-card__feature">Advanced AI features</li>
<li class="pricing-card__feature">Smart scheduling</li>
<li class="pricing-card__feature">50+ integrations</li>
<li class="pricing-card__feature">Priority support</li>
<li class="pricing-card__feature">Advanced analytics</li>
</ul>
<a href="#" class="btn btn--primary pricing-card__cta">Start Free Trial</a>
</div>
<!-- Team Plan -->
<div class="pricing-card">
<h3 class="pricing-card__name">Team</h3>
<div class="pricing-card__price">$20</div>
<div class="pricing-card__period">per user/month</div>
<ul class="pricing-card__features">
<li class="pricing-card__feature">Everything in Pro</li>
<li class="pricing-card__feature">Team collaboration</li>
<li class="pricing-card__feature">Shared workspaces</li>
<li class="pricing-card__feature">Admin controls</li>
<li class="pricing-card__feature">Custom workflows</li>
<li class="pricing-card__feature">Dedicated support</li>
</ul>
<a href="#" class="btn btn--secondary pricing-card__cta">Contact Sales</a>
</div>
</div>
</div>
</section>
<!-- ================================
FOOTER
================================ -->
<footer class="footer">
<div class="footer__container">
<div class="footer__main">
<div class="footer__brand">
<a href="#" class="footer__logo" aria-label="FlowState Home">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 2L38 12V28L20 38L2 28V12L20 2Z" stroke="#4ECDC4" stroke-width="2" fill="rgba(78, 205, 196, 0.1)"/>
<path d="M20 14L28 19V25L20 30L12 25V19L20 14Z" fill="#4ECDC4"/>
<circle cx="20" cy="20" r="3" fill="#0A0E27"/>
</svg>
<span>FlowState</span>
</a>
<p class="footer__tagline">
Transform chaos into clarity with intelligent task management powered by AI.
</p>
</div>
<div>
<h4 class="footer__section-title">Product</h4>
<ul class="footer__links">
<li><a href="#features" class="footer__link">Features</a></li>
<li><a href="#pricing" class="footer__link">Pricing</a></li>
<li><a href="#" class="footer__link">Integrations</a></li>
<li><a href="#" class="footer__link">API</a></li>
</ul>
</div>
<div>
<h4 class="footer__section-title">Company</h4>
<ul class="footer__links">
<li><a href="#" class="footer__link">About Us</a></li>
<li><a href="#" class="footer__link">Careers</a></li>
<li><a href="#" class="footer__link">Blog</a></li>
<li><a href="#" class="footer__link">Press Kit</a></li>
</ul>
</div>
<div>
<h4 class="footer__section-title">Support</h4>
<ul class="footer__links">
<li><a href="#" class="footer__link">Help Center</a></li>
<li><a href="#" class="footer__link">Contact Us</a></li>
<li><a href="#" class="footer__link">Privacy Policy</a></li>
<li><a href="#" class="footer__link">Terms of Service</a></li>
</ul>
</div>
</div>
<div class="footer__bottom">
<p class="footer__copyright">
© 2026 FlowState. All rights reserved.
</p>
<div class="footer__social">
<a href="#" class="footer__social-link" aria-label="Twitter">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
<path d="M6.29 18.25c7.55 0 11.67-6.25 11.67-11.67v-.53c.8-.59 1.49-1.3 2.04-2.13-.75.33-1.54.55-2.36.65a4.12 4.12 0 0 0 1.8-2.27c-.8.48-1.68.81-2.6 1a4.1 4.1 0 0 0-7 3.74 11.65 11.65 0 0 1-8.45-4.3 4.1 4.1 0 0 0 1.27 5.49C2.01 8.2 1.37 8.03.8 7.7v.05a4.1 4.1 0 0 0 3.3 4.03 4.1 4.1 0 0 1-1.86.07 4.1 4.1 0 0 0 3.83 2.85A8.23 8.23 0 0 1 0 16.4a11.62 11.62 0 0 0 6.29 1.84"/>
</svg>
</a>
<a href="#" class="footer__social-link" aria-label="LinkedIn">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
<path d="M5 3c0 1.1-.7 2-2 2-1.2 0-2-.9-2-1.9C1 2 1.8 1 3 1s2 .9 2 2zM1 19h4V6H1v13zM14.6 6.2c-2.1 0-3.3 1.2-3.8 2h-.1l-.2-1.7H6.9c0 1.1.1 2.4.1 3.9V19h4v-7.1c0-.4 0-.7.1-1 .3-.7.8-1.6 1.9-1.6 1.4 0 2 1.2 2 2.8V19h4v-7.4c0-3.7-1.9-5.4-4.4-5.4z"/>
</svg>
</a>
<a href="#" class="footer__social-link" aria-label="GitHub">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 0C4.477 0 0 4.477 0 10c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0110 4.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C17.137 18.163 20 14.418 20 10c0-5.523-4.477-10-10-10z"/>
</svg>
</a>
</div>
</div>
</div>
</footer>
<script>
// ================================
// MOBILE MENU TOGGLE
// ================================
const menuToggle = document.getElementById('menuToggle');
const nav = document.getElementById('nav');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
nav.classList.toggle('active');
const isExpanded = nav.classList.contains('active');
menuToggle.setAttribute('aria-expanded', isExpanded);
});
// Close menu when clicking nav links
const navLinks = document.querySelectorAll('.nav__link');
navLinks.forEach(link => {
link.addEventListener('click', () => {
menuToggle.classList.remove('active');
nav.classList.remove('active');
menuToggle.setAttribute('aria-expanded', 'false');
});
});
// ================================
// HEADER SCROLL EFFECT
// ================================
const header = document.getElementById('header');
let lastScroll = 0;
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;
if (currentScroll > 100) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
lastScroll = currentScroll;
});
// ================================
// INTERSECTION OBSERVER ANIMATIONS
// ================================
const observerOptions = {
threshold: 0.15,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
// Observe all animated elements
const animatedElements = document.querySelectorAll(
'.stat, .feature-card, .testimonial-card, .pricing-card, .features__header'
);
animatedElements.forEach(el => observer.observe(el));
// ================================
// SMOOTH SCROLL
// ================================
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
const href = this.getAttribute('href');
if (href === '#' || !href) return;
e.preventDefault();
const target = document.querySelector(href);
if (target) {
const headerHeight = header.offsetHeight;
const targetPosition = target.offsetTop - headerHeight;
window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});
}
});
});
// ================================
// ANIMATED COUNTER FOR STATS
// ================================
const stats = document.querySelectorAll('.stat');
let statsAnimated = false;
const animateValue = (element, start, end, duration, suffix = '') => {
const range = end - start;
const increment = range / (duration / 16);
let current = start;
const timer = setInterval(() => {
current += increment;
if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {
current = end;
clearInterval(timer);
}
// Format number with appropriate suffix
let displayValue;
if (end >= 1000000) {
displayValue = (current / 1000000).toFixed(1) + 'M';
} else if (end >= 1000) {
displayValue = (current / 1000).toFixed(0) + 'K';
} else {
displayValue = Math.round(current);
}
element.textContent = displayValue + suffix;
}, 16);
};
const statsObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !statsAnimated) {
statsAnimated = true;
// Animate each stat
const statNumbers = [
{ element: stats[0].querySelector('.stat__number'), end: 10000000, suffix: '+' },
{ element: stats[1].querySelector('.stat__number'), end: 150000, suffix: '+' },
{ element: stats[2].querySelector('.stat__number'), end: 40, suffix: '%' },
{ element: stats[3].querySelector('.stat__number'), end: 4.9, suffix: '★' }
];
statNumbers.forEach(stat => {
animateValue(stat.element, 0, stat.end, 2000, stat.suffix);
});
}
});
}, { threshold: 0.5 });
if (stats.length > 0) {
statsObserver.observe(stats[0].parentElement);
}
// ================================
// CURSOR ENHANCEMENT (DESKTOP ONLY)
// ================================
if (window.innerWidth > 768) {
const cursor = document.createElement('div');
cursor.style.cssText = `
position: fixed;
width: 20px;
height: 20px;
border: 2px solid rgba(78, 205, 196, 0.5);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transition: transform 0.15s ease, opacity 0.15s ease;
opacity: 0;
`;
document.body.appendChild(cursor);
let mouseX = 0, mouseY = 0;
let cursorX = 0, cursorY = 0;
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
cursor.style.opacity = '1';
});
document.addEventListener('mouseleave', () => {
cursor.style.opacity = '0';
});
// Smooth cursor animation
const animateCursor = () => {
const dx = mouseX - cursorX;
const dy = mouseY - cursorY;
cursorX += dx * 0.15;
cursorY += dy * 0.15;
cursor.style.left = cursorX - 10 + 'px';
cursor.style.top = cursorY - 10 + 'px';
requestAnimationFrame(animateCursor);
};
animateCursor();
// Scale cursor on interactive elements
const interactiveElements = document.querySelectorAll('a, button, .btn');
interactiveElements.forEach(el => {
el.addEventListener('mouseenter', () => {
cursor.style.transform = 'scale(1.5)';
cursor.style.borderColor = 'rgba(78, 205, 196, 0.8)';
});
el.addEventListener('mouseleave', () => {
cursor.style.transform = 'scale(1)';
cursor.style.borderColor = 'rgba(78, 205, 196, 0.5)';
});
});
}
// ================================
// PERFORMANCE OPTIMIZATION
// ================================
// Debounce function for scroll events
const debounce = (func, wait) => {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};
// Lazy load images (if any were added)
if ('IntersectionObserver' in window) {
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
imageObserver.unobserve(img);
}
});
});
document.querySelectorAll('img.lazy').forEach(img => {
imageObserver.observe(img);
});
}
// ================================
// ACCESSIBILITY ENHANCEMENTS
// ================================
// Skip to main content
const skipLink = document.createElement('a');
skipLink.href = '#hero';
skipLink.textContent = 'Skip to main content';
skipLink.className = 'sr-only';
skipLink.style.cssText = `
position: absolute;
top: -40px;
left: 0;
background: var(--color-accent);
color: var(--color-primary);
padding: 8px;
text-decoration: none;
z-index: 10000;
`;
skipLink.addEventListener('focus', function() {
this.style.top = '0';
});
skipLink.addEventListener('blur', function() {
this.style.top = '-40px';
});
document.body.insertBefore(skipLink, document.body.firstChild);
// Announce page changes for screen readers
const announcer = document.createElement('div');
announcer.setAttribute('aria-live', 'polite');
announcer.setAttribute('aria-atomic', 'true');
announcer.className = 'sr-only';
document.body.appendChild(announcer);
// Log page load completion
window.addEventListener('load', () => {
console.log('FlowState landing page loaded successfully! 🚀');
});
</script>
</body>
</html>
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
1
Favorites
46
Views
CLAUDE-4-5-SONNET
A powerful prompt engineered to generate professional, conversion-optimized landing pages using pure HTML5/CSS3/JavaScript. Simply input your product/service and choose a design style—get a complete, production-ready single-file webpage with custom SVG graphics, smooth animations, and mobile-responsive design. No frameworks needed. Perfect for developers, marketers, and entrepreneurs who need high-quality landing pages fast.
...more
Added over 1 month ago
