207 lines
12 KiB
HTML
207 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Public Landing Page Mobile View - Variant A</title>
|
|
<!-- Google Fonts: Inter -->
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap" rel="stylesheet"/>
|
|
<!-- Material Symbols -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<!-- Tailwind CSS with Plugins -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<!-- Tailwind Configuration -->
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"primary": "#135bec",
|
|
"background-light": "#f6f6f8",
|
|
"background-dark": "#101622",
|
|
"mobile-bg": "#1c1f27", // Slightly lighter for the mobile container
|
|
"desktop-bg": "#0f0f11", // Deep dark for desktop bg
|
|
},
|
|
fontFamily: {
|
|
"display": ["Inter", "sans-serif"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
|
boxShadow: {
|
|
'device': '0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1)',
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
/* Custom scrollbar for the mobile container to keep it sleek */
|
|
.mobile-scroll::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.mobile-scroll::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.mobile-scroll::-webkit-scrollbar-thumb {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border-radius: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-desktop-bg font-display min-h-screen flex items-center justify-center p-4 overflow-hidden">
|
|
<!-- Desktop Wrapper simulating the environment -->
|
|
<div class="relative w-full h-full flex flex-col items-center justify-center">
|
|
<!-- Background decorative elements for the 'Desktop' view -->
|
|
<div class="absolute inset-0 overflow-hidden pointer-events-none -z-10">
|
|
<div class="absolute top-0 left-1/4 w-[500px] h-[500px] bg-primary/10 rounded-full blur-[100px] opacity-30"></div>
|
|
<div class="absolute bottom-0 right-1/4 w-[600px] h-[600px] bg-purple-900/10 rounded-full blur-[120px] opacity-30"></div>
|
|
</div>
|
|
<!-- Mobile Device Simulation Container -->
|
|
<div class="relative w-full max-w-[420px] h-[85vh] bg-background-light dark:bg-mobile-bg rounded-2xl shadow-device overflow-hidden flex flex-col border border-neutral-200 dark:border-neutral-800">
|
|
<!-- Mobile Status Bar Simulation (Cosmetic) -->
|
|
<div class="h-8 w-full bg-background-light dark:bg-mobile-bg flex items-center justify-between px-6 shrink-0 z-20">
|
|
<span class="text-xs font-semibold text-neutral-900 dark:text-white">9:41</span>
|
|
<div class="flex gap-1.5 items-center">
|
|
<span class="material-symbols-outlined text-[16px] text-neutral-900 dark:text-white">signal_cellular_alt</span>
|
|
<span class="material-symbols-outlined text-[16px] text-neutral-900 dark:text-white">wifi</span>
|
|
<span class="material-symbols-outlined text-[16px] text-neutral-900 dark:text-white">battery_full</span>
|
|
</div>
|
|
</div>
|
|
<!-- Scrollable Content Area -->
|
|
<div class="mobile-scroll flex-1 overflow-y-auto pb-24 relative">
|
|
<!-- Hero Section (GIF Placeholder) -->
|
|
<div class="w-full h-64 bg-neutral-800 relative overflow-hidden group">
|
|
<!-- Loading Skeleton -->
|
|
<div class="absolute inset-0 bg-neutral-800 animate-pulse z-0"></div>
|
|
<!-- Image -->
|
|
<div class="absolute inset-0 bg-cover bg-center z-10" data-alt="Abstract dark blue and purple digital waves flowing smoothly" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuB5wevfRjjZoTDfk00aTMwnULNr7PdLv6cEkFL95TKdN5-8Zru3FPWHspOobe9lMpsiP7L7f_U1eyXqgyMuY8SArhLa9UhJgKl1IeOQWg2l4LpV5Ta8eiPIfAGGva4WbacutKsVSvVEYGpwCZ92DWWREgc-lNpG5I084xuwHRmypwN_j1L1OqQbb1OBBMS2BdQO3U7H75KnzUjks422kejYHtsFaQu1AuEMgGb5wfI9wIzCvBSUtv7cMK_V6i0JagrBj2E_DPrKZ3Bk');">
|
|
</div>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-background-light dark:from-mobile-bg to-transparent z-20"></div>
|
|
</div>
|
|
<!-- Content Body -->
|
|
<div class="px-6 -mt-8 relative z-30 flex flex-col gap-8">
|
|
<!-- Headline & Intro -->
|
|
<div class="text-center">
|
|
<div class="inline-flex items-center gap-1 bg-primary/10 border border-primary/20 rounded-full px-3 py-1 mb-4">
|
|
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
|
|
<span class="text-xs font-medium text-primary uppercase tracking-wider">New Version 2.0</span>
|
|
</div>
|
|
<h1 class="text-3xl font-black text-neutral-900 dark:text-white leading-tight mb-3">
|
|
Accelerate Your Workflow 10x
|
|
</h1>
|
|
<p class="text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed">
|
|
Join thousands of designers shipping faster. No credit card required. Start your A/B testing journey today with our automated tools.
|
|
</p>
|
|
</div>
|
|
<!-- Features Grid -->
|
|
<div class="grid grid-cols-1 gap-3">
|
|
<!-- Feature 1 -->
|
|
<div class="flex items-start gap-4 p-4 rounded-lg bg-white dark:bg-[#252932] border border-neutral-100 dark:border-[#3b4354]">
|
|
<div class="p-2 rounded-lg bg-primary/10 text-primary shrink-0">
|
|
<span class="material-symbols-outlined">bolt</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-neutral-900 dark:text-white text-sm mb-1">Lightning Fast</h3>
|
|
<p class="text-xs text-neutral-500 dark:text-[#9da6b9]">Optimized for speed with edge caching worldwide.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Feature 2 -->
|
|
<div class="flex items-start gap-4 p-4 rounded-lg bg-white dark:bg-[#252932] border border-neutral-100 dark:border-[#3b4354]">
|
|
<div class="p-2 rounded-lg bg-primary/10 text-primary shrink-0">
|
|
<span class="material-symbols-outlined">security</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-neutral-900 dark:text-white text-sm mb-1">Secure by Design</h3>
|
|
<p class="text-xs text-neutral-500 dark:text-[#9da6b9]">Enterprise-grade security and SOC2 compliance.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Feature 3 -->
|
|
<div class="flex items-start gap-4 p-4 rounded-lg bg-white dark:bg-[#252932] border border-neutral-100 dark:border-[#3b4354]">
|
|
<div class="p-2 rounded-lg bg-primary/10 text-primary shrink-0">
|
|
<span class="material-symbols-outlined">analytics</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-neutral-900 dark:text-white text-sm mb-1">Analytics First</h3>
|
|
<p class="text-xs text-neutral-500 dark:text-[#9da6b9]">Deep insights included in every plan tier.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Social Proof / Trust -->
|
|
<div class="py-4 border-t border-neutral-200 dark:border-[#3b4354]">
|
|
<p class="text-center text-xs text-neutral-400 dark:text-neutral-500 mb-4 uppercase tracking-widest font-semibold">Trusted by leading teams</p>
|
|
<div class="flex justify-between items-center opacity-50 grayscale gap-2">
|
|
<!-- Logos simulated with text for simplicity/reliability -->
|
|
<span class="text-sm font-bold text-neutral-800 dark:text-white">ACME</span>
|
|
<span class="text-sm font-bold text-neutral-800 dark:text-white">Globex</span>
|
|
<span class="text-sm font-bold text-neutral-800 dark:text-white">Soylent</span>
|
|
<span class="text-sm font-bold text-neutral-800 dark:text-white">Umbrella</span>
|
|
</div>
|
|
</div>
|
|
<div class="h-8"></div> <!-- Spacer for scrolling past FAB -->
|
|
</div>
|
|
</div>
|
|
<!-- Sticky Bottom Bar -->
|
|
<div class="absolute bottom-0 left-0 w-full bg-background-light/80 dark:bg-mobile-bg/80 backdrop-blur-md border-t border-neutral-200 dark:border-[#3b4354] p-4 z-40">
|
|
<button class="w-full flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 text-white font-bold py-3.5 px-6 rounded-lg shadow-lg shadow-primary/25 transition-all active:scale-[0.98]">
|
|
<span>Apply Now</span>
|
|
<span class="material-symbols-outlined text-sm">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
<!-- Modal Overlay (Simulated 'Open' State for demonstration) -->
|
|
<!-- Using a checkbox hack or target to simulate open state isn't allowed (no JS), so we will render it as if the user clicked.
|
|
Since the prompt asks for "When clicked... modal appears", I will design it as an overlay that is visually hidden by default
|
|
but I'll make it partially visible or explainable.
|
|
Actually, usually for these tasks, showing the "interacted" state is better if it's the focus,
|
|
but keeping the landing page clean is requested.
|
|
|
|
However, to show I fulfilled the "Form modal appears" requirement in a static mockup,
|
|
I will place the modal HTML here but commented out or hidden,
|
|
OR better yet, I will render it as a "slide up" drawer at the very bottom, partially peeking or fully open?
|
|
|
|
Let's render it fully open on top to showcase the UI design of the modal as requested.
|
|
Wait, the prompt says "Description of screen: Public Mobile Landing Page".
|
|
It implies the main view. I will include the modal HTML but hide it with `hidden` class
|
|
so the code is there, but visually I will show the landing page.
|
|
|
|
Actually, to make the design impressive, I'll add a peer-checked hack purely in CSS to show it,
|
|
or just display the landing page cleanly.
|
|
|
|
Let's stick to the clean landing page view as the primary deliverable,
|
|
but I will render the Modal as a layer that is *just* about to animate in, or
|
|
actually, I will create a separate "view" inside the code that can be toggled if I could use JS.
|
|
|
|
Decision: I will render the modal but set it to `display: none` in the style attribute for now,
|
|
so the code is valid and ready for a developer to toggle.
|
|
-->
|
|
<!-- Sleek Form Modal (Hidden by default in this static view, developer would toggle 'hidden') -->
|
|
<div class="hidden absolute inset-0 z-50 flex flex-col justify-end bg-black/60 backdrop-blur-sm" id="lead-modal">
|
|
<div class="bg-background-light dark:bg-[#1c1f27] w-full rounded-t-2xl p-6 shadow-2xl animate-in slide-in-from-bottom duration-300">
|
|
<div class="w-12 h-1 bg-neutral-300 dark:bg-neutral-600 rounded-full mx-auto mb-6"></div>
|
|
<h2 class="text-xl font-bold text-neutral-900 dark:text-white mb-2">Get Early Access</h2>
|
|
<p class="text-sm text-neutral-500 dark:text-gray-400 mb-6">Join the waitlist and get 20% off your first month.</p>
|
|
<form class="flex flex-col gap-4">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-neutral-500 dark:text-gray-400 mb-1.5 uppercase tracking-wider">Work Email</label>
|
|
<input class="w-full bg-white dark:bg-[#111318] border border-neutral-200 dark:border-[#3b4354] rounded-lg px-4 py-3 text-neutral-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all placeholder:text-gray-500" placeholder="name@company.com" type="email"/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-neutral-500 dark:text-gray-400 mb-1.5 uppercase tracking-wider">Company Name</label>
|
|
<input class="w-full bg-white dark:bg-[#111318] border border-neutral-200 dark:border-[#3b4354] rounded-lg px-4 py-3 text-neutral-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all placeholder:text-gray-500" placeholder="Acme Inc." type="text"/>
|
|
</div>
|
|
<button class="mt-4 w-full bg-primary hover:bg-primary/90 text-white font-bold py-3.5 px-6 rounded-lg shadow-lg shadow-primary/25 transition-all" type="button">
|
|
Get Access
|
|
</button>
|
|
<p class="text-center text-xs text-neutral-400 dark:text-gray-500 mt-2">No spam, unsubscribe anytime.</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Desktop Context Label (Outside Device) -->
|
|
<div class="absolute bottom-8 text-center">
|
|
<p class="text-neutral-400 text-sm font-medium tracking-wide">Variant A: Mobile View</p>
|
|
</div>
|
|
</div>
|
|
</body></html> |