DWLanding
<!-- Google Fonts - Lato (for body) and Alegreya (for headings) --> <link href="https://fonts.googleapis.com/css2?family=Alegreya:wght@400;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet"> </link></meta></meta></head> <body class="text-gray-800"> <pre><code><!-- Header (Optional, but good practice for navigation) --> <header class="bg-white shadow-sm py-4 px-6 md:px-12"> <nav class="container mx-auto flex justify-between items-center"> <div class="flex items-center"> <img src="rabbit.png" alt="Dream Weaver Logo" class="h-8 mr-3"> <div class="text-2xl font-bold text-purple-700 font-alegreya">Dream Weaver</div> </div> <!-- Navigation links could go here --> <button class="hidden md:block px-6 py-2 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition duration-300">Sign In</button> </nav> </header> <main> <!-- 1. Hero Section --> <section class="relative bg-gradient-to-br from-purple-500 to-indigo-600 text-white py-16 md:py-24 overflow-hidden rounded-b-3xl"> <div class="container mx-auto px-6 md:px-12 flex flex-col md:flex-row items-center justify-between z-10 relative"> <div class="md:w-1/2 text-center md:text-left mb-10 md:mb-0"> <h1 class="text-4xl md:text-6xl font-extrabold leading-tight mb-4 drop-shadow-lg font-alegreya"> Magical Bedtime Stories, <br class="hidden md:inline">Created Just for Your Child. </h1> <p class="text-lg md:text-xl mb-8 opacity-90 font-lato"> Turn your child's favorite things—like brave knights, talking animals, and the color purple—into unique, AI-powered adventures delivered nightly by SMS. No app needed. </p> <button class="btn-gradient text-white font-semibold py-4 px-10 rounded-full text-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out font-lato"> Create Your First Story for Free </button> </div> <div class="md:w-1/2 flex justify-center items-center"> <!-- Enchanting Illustration Placeholder --> <img src="https://placehold.co/500x350/a78bfa/ffffff?text=Child+Sleeping+Magically" alt="Enchanting illustration of a child sleeping soundly with magical dream clouds" class="rounded-3xl shadow-2xl max-w-full h-auto transform rotate-3 hover:rotate-0 transition duration-500 ease-in-out"> </div> </div> <!-- Background magical elements (optional, for visual flair) --> <div class="absolute top-0 left-0 w-full h-full"> <div class="absolute w-40 h-40 bg-white opacity-10 rounded-full -top-10 -left-10 animate-pulse"></div> <div class="absolute w-60 h-60 bg-white opacity-10 rounded-full -bottom-20 -right-20 animate-pulse delay-200"></div> </div> </section> <!-- 2. "How It Works": Simple, Three-Step Magic --> <section class="py-16 md:py-24 bg-white rounded-3xl -mt-16 relative z-20 shadow-lg mx-4 md:mx-auto max-w-6xl"> <div class="container mx-auto px-6 md:px-12 text-center"> <h2 class="text-3xl md:text-4xl font-bold mb-12 text-purple-800 font-alegreya">How It Works: Simple, Three-Step Magic</h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <!-- Step 1: Personalize --> <div class="p-6 bg-purple-50 rounded-xl shadow-md transform hover:scale-105 transition duration-300 ease-in-out"> <svg class="icon-svg mx-auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.25 3.75L15.75 8.25M20.25 3.75L16.5 7.5L13.5 4.5L17.25 0.75L20.25 3.75ZM12 1.5L10.5 3L13.5 6L15 4.5L12 1.5ZM7.5 6L6 7.5L9 10.5L10.5 9L7.5 6ZM3 10.5L1.5 12L4.5 15L6 13.5L3 10.5ZM0 15L1.5 16.5L4.5 13.5L3 12L0 15ZM15 12L13.5 13.5L16.5 16.5L18 15L15 12ZM19.5 16.5L18 18L21 21L22.5 19.5L19.5 16.5Z" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <h3 class="text-xl font-semibold mb-2 font-alegreya">Step 1: Personalize</h3> <p class="text-gray-600 font-lato">Tell us your child's name and a few of their interests.</p> </div> <!-- Step 2: Schedule --> <div class="p-6 bg-purple-50 rounded-xl shadow-md transform hover:scale-105 transition duration-300 ease-in-out"> <svg class="icon-svg mx-auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="10" stroke="#8a2be2" stroke-width="2"/> <path d="M12 6V12L16 14" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <h3 class="text-xl font-semibold mb-2 font-alegreya">Step 2: Schedule</h3> <p class="text-gray-600 font-lato">Pick the perfect bedtime for your nightly story delivery.</p> </div> <!-- Step 3: Enjoy --> <div class="p-6 bg-purple-50 rounded-xl shadow-md transform hover:scale-105 transition duration-300 ease-in-out"> <svg class="icon-svg mx-auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 19V5C4 4.44772 4.44772 4 5 4H19C19.5523 4 20 4.44772 20 5V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19Z" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8 4V20" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16 4V20" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4 8H8" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16 8H20" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4 16H8" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16 16H20" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <h3 class="text-xl font-semibold mb-2 font-alegreya">Step 3: Enjoy</h3> <p class="text-gray-600 font-lato">Receive a text link to a new, unique story every night. Read from any phone or tablet.</p> </div> </div> </div> </section> <!-- 3. Features & Benefits: Why Parents Love Dream Weaver --> <section class="py-16 md:py-24 bg-purple-100"> <div class="container mx-auto px-6 md:px-12 text-center"> <h2 class="text-3xl md:text-4xl font-bold mb-12 text-purple-800 font-alegreya">Why Parents Love Dream Weaver</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <!-- Feature 1: A Story as Special as They Are --> <div class="p-6 bg-white rounded-xl shadow-md flex flex-col items-center text-center transform hover:scale-105 transition duration-300 ease-in-out"> <svg class="icon-svg mx-auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <h3 class="text-xl font-semibold mb-2 font-alegreya">A Story as Special as They Are</h3> <p class="text-gray-600 font-lato">Each story uses your child's name and interests to create something truly personal and engaging.</p> </div> <!-- Feature 2: Effortless Bedtime --> <div class="p-6 bg-white rounded-xl shadow-md flex flex-col items-center text-center transform hover:scale-105 transition duration-300 ease-in-out"> <svg class="icon-svg mx-auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 3C9.243 3 7 5.243 7 8C7 10.757 9.243 13 12 13C14.757 13 17 10.757 17 8C17 5.243 14.757 3 12 3Z" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 13V21" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7 17H17" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 21H15" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <h3 class="text-xl font-semibold mb-2 font-alegreya">Effortless Bedtime</h3> <p class="text-gray-600 font-lato">SMS delivery makes bedtime a joy, not a chore, fostering a positive and repeatable routine.</p> </div> <!-- Feature 3: Your Child's Safety is Our Priority --> <div class="p-6 bg-white rounded-xl shadow-md flex flex-col items-center text-center transform hover:scale-105 transition duration-300 ease-in-out"> <svg class="icon-svg mx-auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2L3 6V12C3 16.97 6.03 21.06 12 22C17.97 21.06 21 16.97 21 12V6L12 2Z" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <h3 class="text-xl font-semibold mb-2 font-alegreya">Your Child's Safety is Our Priority</h3> <p class="text-gray-600 font-lato">We use Google's built-in safety filters and carefully engineered, child-friendly prompts for dual-layer protection.</p> </div> <!-- Feature 4: Spark Imagination --> <div class="p-6 bg-white rounded-xl shadow-md flex flex-col items-center text-center transform hover:scale-105 transition duration-300 ease-in-out"> <svg class="icon-svg mx-auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 18H15" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M10 22H14" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 2C16.4183 2 20 5.58172 20 10C20 12.0182 19.2452 13.8821 17.9818 15.3818L12 22L6.01822 15.3818C4.75477 13.8821 4 12.0182 4 10C4 5.58172 7.58172 2 12 2Z" stroke="#8a2be2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <h3 class="text-xl font-semibold mb-2 font-alegreya">Spark Imagination</h3> <p class="text-gray-600 font-lato">Fuel their dreams and foster creativity, curiosity, and a lifelong love for reading.</p> </div> </div> </div> </section> <!-- 4. Social Proof: "Hear from Other Parents" --> <section class="py-16 md:py-24 bg-white"> <div class="container mx-auto px-6 md:px-12 text-center"> <h2 class="text-3xl md:text-4xl font-bold mb-12 text-purple-800 font-alegreya">Hear from Other Parents</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto"> <!-- Testimonial 1 --> <div class="p-8 bg-purple-50 rounded-xl shadow-md text-left border-l-4 border-purple-500"> <p class="text-lg italic mb-4 text-gray-700 font-lato">"My daughter now asks for her 'special story' every single night! It's our new favorite bonding time."</p> <p class="font-semibold text-purple-700 font-lato">- Jessica R., Mom of a 4-year-old</p> </div> <!-- Testimonial 2 --> <div class="p-8 bg-purple-50 rounded-xl shadow-md text-left border-l-4 border-purple-500"> <p class="text-lg italic mb-4 text-gray-700 font-lato">"I was skeptical about an AI story, but I was blown away. It wove in my son's love for dinosaurs and space perfectly. He was captivated!"</p> <p class="font-semibold text-purple-700 font-lato">- Michael B., Dad of a 6-year-old</p> </div> </div> </div> </section> <!-- 5. "Share the Magic": Encourage Virality --> <section class="py-16 md:py-24 bg-purple-600 text-white rounded-t-3xl"> <div class="container mx-auto px-6 md:px-12 text-center"> <h2 class="text-3xl md:text-4xl font-bold mb-6 font-alegreya">Give the Gift of a Story.</h2> <p class="text-lg md:text-xl mb-8 opacity-90 max-w-2xl mx-auto font-lato"> Love Dream Weaver? Share it with a friend! When they sign up, you'll both get a month of Premium features for free. (Coming Soon!) </p> <div class="flex flex-wrap justify-center gap-4"> <button class="bg-white text-purple-700 font-semibold py-3 px-6 rounded-full shadow-md hover:bg-gray-100 transition duration-300 font-lato"> Share on Facebook </button> <button class="bg-white text-purple-700 font-semibold py-3 px-6 rounded-full shadow-md hover:bg-gray-100 transition duration-300 font-lato"> Share via Email </button> <button class="bg-white text-purple-700 font-semibold py-3 px-6 rounded-full shadow-md hover:bg-gray-100 transition duration-300 font-lato"> Copy Link </button> </div> </div> </section> <!-- 6. Final Call-to-Action --> <section class="py-16 md:py-24 bg-white"> <div class="container mx-auto px-6 md:px-12 text-center"> <h2 class="text-3xl md:text-4xl font-bold mb-12 text-purple-800 font-alegreya">Start Weaving Magical Stories Tonight</h2> <div class="flex flex-col md:flex-row justify-center items-stretch gap-8 mb-12"> <!-- Free Plan --> <div class="bg-purple-50 p-8 rounded-xl shadow-lg border-2 border-purple-200 flex-1 max-w-sm"> <h3 class="text-2xl font-bold text-purple-700 mb-4 font-alegreya">Free Plan</h3> <p class="text-4xl font-extrabold mb-4 font-lato">$0<span class="text-lg font-normal">/month</span></p> <ul class="text-left text-gray-600 mb-6 space-y-2 font-lato"> <li>✨ Continue a story once per day</li> <li>📖 Standard "Bedtime" story style</li> <li>👶 Stories tailored for "Pre-School" age group</li> </ul> <button class="w-full btn-gradient text-white font-semibold py-3 px-6 rounded-full shadow-md hover:shadow-lg transition duration-300 font-lato"> Downgrade to Free </button> </div> <!-- Premium Plan --> <div class="bg-purple-100 p-8 rounded-xl shadow-lg border-2 border-purple-500 flex-1 max-w-sm transform scale-105 relative z-10"> <span class="absolute -top-4 left-1/2 -translate-x-1/2 bg-yellow-400 text-yellow-900 text-xs font-bold px-3 py-1 rounded-full shadow-md font-lato">MOST POPULAR</span> <h3 class="text-2xl font-bold text-purple-800 mb-4 font-alegreya">Premium Plan</h3> <p class="text-4xl font-extrabold mb-4 font-lato">$9.99<span class="text-lg font-normal">/month</span></p> <ul class="text-left text-gray-800 mb-6 space-y-2 font-lato"> <li>🌟 Continue stories up to 4 times per day</li> <li>🎨 Choose from different story styles (Rhyming, Silly, Calm)</li> <li>🛡️ Tailor stories for specific age groups</li> <li>🎧 Audio narration of stories</li> <li>🖼️ AI-generated story illustrations (Coming Soon)</li> <li>👨👩👧👦 Manage profiles for multiple children (Coming Soon)</li> </ul> <button class="w-full btn-gradient text-white font-semibold py-4 px-8 rounded-full text-lg shadow-xl hover:shadow-2xl transform hover:scale-105 transition duration-300 font-lato"> Start Weaving Magical Stories Tonight </button> </div> </div> </div> </section> </main> <!-- Footer --> <footer class="bg-gray-800 text-gray-300 py-8 px-6 md:px-12 text-center rounded-t-3xl"> <div class="container mx-auto"> <p class="font-lato">&copy; 2025 Dream Weaver. All rights reserved.</p> <div class="mt-4 flex justify-center space-x-4 font-lato"> <a href="#" class="hover:text-white transition duration-300">Privacy Policy</a> <a href="#" class="hover:text-white transition duration-300">Terms of Service</a> <a href="#" class="hover:text-white transition duration-300">Contact Us</a> </div> </div> </footer> </code></pre> </body> </html> <!-- /wp:html --></body>