Spaces:
Running
Running
can you add a contact form just above the footer and link the button in the hero section called "Get started free" to take the user to the contact form - Follow Up Deployment
4f1f6d4
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Paperlyte - Note-taking, Lighter Than Ever</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-15px); | |
| } | |
| } | |
| @keyframes flutter { | |
| 0%, 100% { | |
| transform: rotate(-2deg) translateY(0); | |
| } | |
| 50% { | |
| transform: rotate(2deg) translateY(-5px); | |
| } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .fluttering { | |
| animation: flutter 4s ease-in-out infinite; | |
| } | |
| .glow-on-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .glow-on-hover:hover { | |
| box-shadow: 0 0 15px rgba(99, 102, 241, 0.5); | |
| } | |
| .note-card { | |
| transition: all 0.3s ease; | |
| } | |
| .note-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .checkmark { | |
| transition: all 0.3s ease; | |
| } | |
| .checkmark:hover { | |
| transform: scale(1.2); | |
| } | |
| .mascot-wave { | |
| animation: wave 2s ease-in-out infinite; | |
| transform-origin: 70% 70%; | |
| } | |
| @keyframes wave { | |
| 0%, 100% { | |
| transform: rotate(0deg); | |
| } | |
| 25% { | |
| transform: rotate(10deg); | |
| } | |
| 75% { | |
| transform: rotate(-10deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> | |
| </svg> | |
| </div> | |
| <h1 class="text-xl font-bold text-gray-800">Paperlyte</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-gray-600 hover:text-indigo-500 transition">Features</a> | |
| <a href="#" class="text-gray-600 hover:text-indigo-500 transition">Why Paperlyte</a> | |
| <a href="#" class="text-gray-600 hover:text-indigo-500 transition">Testimonials</a> | |
| <a href="#" class="text-gray-600 hover:text-indigo-500 transition">Pricing</a> | |
| </nav> | |
| <button class="md:hidden text-gray-600"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative overflow-hidden"> | |
| <div class="absolute inset-0 z-0"> | |
| <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-indigo-50 to-purple-50 opacity-90"></div> | |
| <div class="absolute top-20 left-20 w-16 h-16 rounded-full bg-indigo-200 opacity-30 floating"></div> | |
| <div class="absolute top-1/3 right-1/4 w-24 h-24 rounded-full bg-purple-200 opacity-30 floating" style="animation-delay: 1s;"></div> | |
| <div class="absolute bottom-20 right-20 w-20 h-20 rounded-full bg-blue-200 opacity-30 floating" style="animation-delay: 2s;"></div> | |
| <!-- Paper illustrations --> | |
| <div class="absolute top-1/4 left-1/4 w-16 h-16 bg-white rounded-md shadow-sm transform rotate-6 fluttering" style="animation-delay: 0.5s;"></div> | |
| <div class="absolute top-1/3 right-1/3 w-20 h-20 bg-white rounded-md shadow-sm transform -rotate-3 fluttering" style="animation-delay: 1.5s;"></div> | |
| <div class="absolute bottom-1/4 left-1/3 w-24 h-24 bg-white rounded-md shadow-sm transform rotate-12 fluttering" style="animation-delay: 1s;"></div> | |
| </div> | |
| <div class="container mx-auto px-4 py-20 md:py-32 relative z-10"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-gray-800 mb-6">Note-taking, <span class="text-indigo-600">Lighter Than Ever</span></h1> | |
| <p class="text-xl md:text-2xl text-gray-600 mb-10">Capture your thoughts instantly in a space that's lightning-fast, beautifully clean, and utterly distraction-free.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#contact-form" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-8 rounded-lg transition transform hover:scale-105 glow-on-hover inline-block"> | |
| Get Started Free | |
| </a> | |
| <button class="bg-white hover:bg-gray-100 text-indigo-600 font-medium py-3 px-8 rounded-lg border border-indigo-200 transition transform hover:scale-105 glow-on-hover"> | |
| Try Paperlyte Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Designed for Thoughtful Creation</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-gray-50 p-6 rounded-xl note-card"> | |
| <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Lightning Fast & Lightweight</h3> | |
| <p class="text-gray-600">Your ideas, saved instantly—never lose your spark.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-gray-50 p-6 rounded-xl note-card"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Zero Distractions</h3> | |
| <p class="text-gray-600">No clutter—just a serene, focused canvas.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-gray-50 p-6 rounded-xl note-card"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Accessible Anywhere</h3> | |
| <p class="text-gray-600">Works seamlessly on web, tablet, and mobile.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="bg-gray-50 p-6 rounded-xl note-card"> | |
| <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Organize Effortlessly</h3> | |
| <p class="text-gray-600">Tag, search, and group notes with ease.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why Paperlyte Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10 relative"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-800">Minimal by Design</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6">Only the tools that matter. No bloat, no learning curve.</p> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-800">Private & Secure</h3> | |
| </div> | |
| <p class="text-gray-600">Your thoughts stay yours. End-to-end encrypted and ad-free!</p> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-indigo-100 rounded-full opacity-20"></div> | |
| <div class="absolute -top-6 -left-6 w-20 h-20 bg-purple-100 rounded-full opacity-20"></div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">Perfect for <span class="text-indigo-600">Creators, Students, & Professionals</span></h2> | |
| <p class="text-gray-600 mb-8">Paperlyte is designed to adapt to your workflow, whether you're brainstorming ideas, taking lecture notes, or organizing your professional life.</p> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> | |
| </svg> | |
| </div> | |
| <span class="text-gray-700">Creators</span> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> | |
| <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /> | |
| </svg> | |
| </div> | |
| <span class="text-gray-700">Students</span> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> | |
| </svg> | |
| </div> | |
| <span class="text-gray-700">Professionals</span> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /> | |
| </svg> | |
| </div> | |
| <span class="text-gray-700">Everyone</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- App Demo Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Experience the Paperlyte Difference</h2> | |
| <div class="relative max-w-4xl mx-auto"> | |
| <div class="bg-gray-50 rounded-xl p-2 shadow-lg"> | |
| <div class="bg-white rounded-lg overflow-hidden"> | |
| <!-- Mock app UI --> | |
| <div class="flex items-center p-4 border-b"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-400"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-400"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-400"></div> | |
| </div> | |
| <div class="mx-auto text-sm text-gray-500">Paperlyte</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /> | |
| </svg> | |
| </div> | |
| <input type="text" placeholder="Title your note..." class="flex-1 bg-transparent outline-none text-lg font-medium text-gray-800 placeholder-gray-400"> | |
| </div> | |
| <textarea class="w-full h-64 bg-transparent outline-none resize-none text-gray-700 placeholder-gray-400" placeholder="Start writing your thoughts here..."></textarea> | |
| <div class="flex justify-between items-center pt-4 border-t"> | |
| <div class="flex space-x-2"> | |
| <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /> | |
| </svg> | |
| </button> | |
| <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <button class="px-4 py-1 bg-indigo-600 text-white rounded-full text-sm font-medium hover:bg-indigo-700 transition"> | |
| Save | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating elements around the mockup --> | |
| <div class="absolute -top-6 -left-6 w-16 h-16 bg-white rounded-lg shadow-sm transform rotate-12 fluttering" style="animation-delay: 0.5s;"></div> | |
| <div class="absolute -bottom-6 -right-6 w-20 h-20 bg-white rounded-lg shadow-sm transform -rotate-6 fluttering" style="animation-delay: 1s;"></div> | |
| <!-- Mascot waving hello --> | |
| <div class="absolute -right-10 -bottom-10 w-24 h-24 hidden lg:block"> | |
| <div class="relative"> | |
| <div class="w-24 h-24 bg-indigo-100 rounded-full flex items-center justify-center"> | |
| <div class="w-20 h-20 bg-indigo-200 rounded-full flex items-center justify-center"> | |
| <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center overflow-hidden"> | |
| <div class="text-center"> | |
| <div class="flex justify-center mb-1"> | |
| <div class="w-2 h-2 bg-gray-800 rounded-full mx-1"></div> | |
| <div class="w-2 h-2 bg-gray-800 rounded-full mx-1"></div> | |
| </div> | |
| <div class="w-8 h-4 bg-gray-800 rounded-full mx-auto relative mascot-wave"> | |
| <div class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-gray-300 rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -top-2 -right-2 w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-sm"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">What Our Users Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 font-bold mr-3">J</div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Jamie L.</h4> | |
| <div class="flex text-yellow-400"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"Paperlyte lets me think big with zero friction. I've tried dozens of note apps, but none stay out of my way like this one."</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 font-bold mr-3">M</div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Marcus T.</h4> | |
| <div class="flex text-yellow-400"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"So clean, so fast—I actually want to write every day! As a student, this has completely changed how I take and organize notes."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-indigo-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to Lighten Your Note-Taking?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of happy users who've found their perfect note-taking companion.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#contact-form" class="bg-white hover:bg-gray-100 text-indigo-600 font-medium py-3 px-8 rounded-lg transition transform hover:scale-105 glow-on-hover inline-block"> | |
| Get Started Free | |
| </a> | |
| <button class="bg-indigo-700 hover:bg-indigo-800 text-white font-medium py-3 px-8 rounded-lg border border-indigo-500 transition transform hover:scale-105 glow-on-hover"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Form --> | |
| <section id="contact-form" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4 max-w-2xl"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Get Started Today</h2> | |
| <form class="bg-gray-50 p-8 rounded-xl shadow-sm"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none transition"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none transition"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">How can we help you?</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none transition"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition transform hover:scale-[1.02]"> | |
| Submit | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-400 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div class="md:col-span-2"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> | |
| </svg> | |
| </div> | |
| <h2 class="text-xl font-bold text-white">Paperlyte</h2> | |
| </div> | |
| <p class="mb-4">Note-taking, lighter than ever.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-medium mb-4">Product</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">Features</a></li> | |
| <li><a href="#" class="hover:text-white transition">Pricing</a></li> | |
| <li><a href="#" class="hover:text-white transition">Testimonials</a></li> | |
| <li><a href="#" class="hover:text-white transition">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-medium mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">About</a></li> | |
| <li><a href="#" class="hover:text-white transition">Privacy</a></li> | |
| <li><a href="#" class="hover:text-white transition">Terms</a></li> | |
| <li><a href="#" class="hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-sm text-center"> | |
| <p>© 2023 Paperlyte. All rights reserved.</p> | |
| <p class="mt-2">Join the Paperlyte movement!</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple micro-interactions | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Button hover effects | |
| const buttons = document.querySelectorAll('button'); | |
| buttons.forEach(button => { | |
| button.addEventListener('mouseenter', function() { | |
| if (this.classList.contains('glow-on-hover')) { | |
| this.classList.add('transform', 'scale-105'); | |
| } | |
| }); | |
| button.addEventListener('mouseleave', function() { | |
| if (this.classList.contains('glow-on-hover')) { | |
| this.classList.remove('transform', 'scale-105'); | |
| } | |
| }); | |
| }); | |
| // Checkmark animation | |
| const checkmarks = document.querySelectorAll('.checkmark'); | |
| checkmarks.forEach(checkmark => { | |
| checkmark.addEventListener('mouseenter', function() { | |
| this.classList.add('transform', 'scale-110'); | |
| }); | |
| checkmark.addEventListener('mouseleave', function() { | |
| this.classList.remove('transform', 'scale-110'); | |
| }); | |
| }); | |
| // Note card hover effects | |
| const noteCards = document.querySelectorAll('.note-card'); | |
| noteCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.classList.add('shadow-md'); | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.classList.remove('shadow-md'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=shazzar00ni/paperlyte-landing" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |