<body id="i8e9">
<!--Navbar-->
<div class="w-full lg:h-28">
<nav id="ivuj" x-data="{ isOpen: false }" class="z-50 w-full p-6 fixed">
<div id="iz32" class="container mx-auto flex w-full flex-col bg-white p-2 lg:flex-row border border-neutral-200 shadow-lg">
<div class="flex h-12 items-center">
<h1 id="innl" class="text-2xl font-bold text-green-600 px-2">EcoGlow
</h1>
<div class="flex-grow lg:hidden">
</div>
<div id="ik7kj" x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="flex w-12 cursor-pointer items-center justify-center lg:hidden">
<span id="ixiu9" :class="!isOpen ? '' : 'hidden'"><i title="icon" id="iycpd" class="fas fa-bars">
</i></span>
<span :class="isOpen ? '' : 'hidden'"><i title="icon" id="iylpj" class="fas fa-times">
</i></span>
</div>
</div>
<div id="inydo" :class="isOpen ? '' : 'hidden'" class="flex-grow flex-col justify-end lg:flex lg:flex-row lg:pt-0">
<a id="ij66o" href="#about" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">About</a>
<a id="ibdgl" href="#products" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Products</a>
<a id="iwl4g" href="#sustainability" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Sustainability</a>
<a id="ihu1k" href="#testimonials" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Reviews</a>
<a id="ifvag" href="#contact" class="mx-4 mb-4 mt-4 flex h-12 items-center justify-center bg-green-600 px-6 text-white lg:mb-0 lg:ml-4 lg:mr-0 lg:mt-0">Shop
Now</a>
</div>
</div>
</nav>
</div>
<!--Hero Section-->
<!--Features Section-->
<section id="i6olec" class="h-12">
</section>
<section id="iaab9i" class="container mx-auto my-16 px-6 lg:px-16">
<div id="i3e8ww" class="grid gap-8 lg:grid-cols-12">
<div id="i123x7" class="flex flex-col justify-center lg:col-span-5">
<div id="i33aa5" class="mb-2 max-w-max bg-green-100 px-3 py-1 text-green-600">
<p class="text-sm font-bold">INNOVATION
</p>
</div>
<h1 id="i9ocpj" class="mb-4 text-4xl font-bold lg:text-7xl">Radiant Skin,
<br/>
<span id="i6ngj7" class="text-green-600">Radiant Earth</span>
</h1>
<p id="ieqy4n" class="mb-8 text-xl opacity-80">Sustainable Beauty for a Better Tomorrow
</p>
<div class="flex flex-col gap-4 xl:flex-row">
<a id="iskjmj" href="#contact" class="flex h-14 items-center justify-center px-8 text-lg font-semibold text-white hover:bg-green-700 bg-green-600">Shop Collection</a>
<a id="i5o8gw" href="#learn" class="group flex h-14 items-center justify-center px-8 text-lg font-semibold">Learn More<i title="icon" class="fas ml-2 transform transition-transform group-hover:translate-x-2 fa-arrow-right">
</i></a>
</div>
</div>
<div id="izg351" class="lg:col-span-7">
<div id="ih2ugc" class="grid gap-4 grid-cols-2 lg:rotate-6">
<div id="iphpbq" class="group transition-transform hover:-translate-y-2 aspect-square shadow-lg p-1">
<img id="izit61" src="https://images.unsplash.com/photo-1509384473936-2d36ab6e198d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MTk4MTB8MHwxfHNlYXJjaHw2Mnx8YmVhdXR5LXNraW58ZW58MHx8fHwxNzM3MTMxNjAyfDA&ixlib=rb-4.0.3&q=80&w=1080" class="aspect-square object-cover"/>
</div>
<div id="ipw46b" class="group transition-transform hover:-translate-y-2 lg:mt-8 aspect-square shadow-lg p-1 bg-white">
<img id="iwivif" src="https://images.unsplash.com/photo-1501004318641-b39e6451bec6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MTk4MTB8MHwxfHNlYXJjaHwxfHxwbGFudHxlbnwwfHx8fDE3MzcxMzEyNTR8MA&ixlib=rb-4.0.3&q=80&w=1080" class="aspect-square object-cover"/>
</div>
<div id="ioeaeu" class="group transition-transform hover:-translate-y-2 lg:-mt-8 aspect-square shadow-lg bg-white p-1">
<img id="ie8alh" src="https://images.unsplash.com/photo-1725434631952-c8e3052c2899?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MTk4MTB8MHwxfHNlYXJjaHwzOHx8c29pbHxlbnwwfHx8fDE3MzcxMzE4MTN8MA&ixlib=rb-4.0.3&q=80&w=1080" class="aspect-square object-cover"/>
</div>
<div id="ieng06" class="group transition-transform hover:-translate-y-2 aspect-square shadow-lg bg-white p-1">
<img id="ixs4oh" src="https://images.unsplash.com/photo-1524638088-758d9961fc6f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MTk4MTB8MHwxfHNlYXJjaHwxfHxwYWNrYWdpbmd8ZW58MHx8fHwxNzM3MTMxNjUwfDA&ixlib=rb-4.0.3&q=80&w=1080" class="aspect-square object-cover"/>
</div>
</div>
</div>
</div>
</section>
<section id="idls84" class="h-12">
</section>
<section id="i1magl" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div id="i9jpmr" class="mb-8 grid gap-8 lg:gap-16 lg:grid-cols-3">
<div id="irolk" class="flex flex-col">
<div id="itn92" class="mb-4 flex h-16 w-16 items-center justify-center bg-green-600 text-4xl text-white">
<i title="icon" class="fas fa-leaf">
</i>
</div>
<h4 id="imb3nd" class="mb-2 text-lg font-semibold">100% Organic Ingredients
</h4>
<p class="text-lg">Carefully sourced natural ingredients that nourish your skin while protecting our
planet.
</p>
</div>
<div id="irkmv" class="flex flex-col">
<div id="is24p6" class="mb-4 flex h-16 w-16 items-center justify-center bg-green-600 text-4xl text-white">
<i title="icon" class="fas fa-recycle">
</i>
</div>
<h4 class="mb-2 text-lg font-semibold">Sustainable Packaging
</h4>
<p class="text-lg">All our products come in 100% recyclable packaging, minimizing environmental impact.
</p>
</div>
<div id="i2jq5" class="flex flex-col">
<div id="i5fhhe" class="mb-4 flex h-16 w-16 items-center justify-center bg-green-600 text-4xl text-white">
<i title="icon" class="fas fa-heart">
</i>
</div>
<h4 class="mb-2 text-lg font-semibold">Cruelty-Free
</h4>
<p class="text-lg">Never tested on animals - we believe in beauty without compromise.
</p>
</div>
</div>
</section>
<!--Products Section-->
<section id="iu2wv5" class="h-12">
</section>
<section id="itl43" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div class="mb-8 text-center">
<h2 id="ipdgi" class="mb-4 text-3xl font-bold lg:text-6xl">Our Products
</h2>
<p class="text-xl">Discover our range of sustainable skincare solutions
</p>
</div>
<div class="grid gap-4 lg:grid-cols-3">
<div id="i2vhs" class="group flex flex-col justify-between overflow-hidden border border-neutral-200 shadow-lg">
<img id="io39l" alt="Radiant Glow Serum" src="https://www.bronzeom.com/cdn/shop/files/ANUA.png?v=1733936407&width=2400" class="w-full transition group-hover:scale-105"/>
<div id="ir07x" class="p-4">
<h3 class="mb-2 text-xl font-bold">Radiant Glow Serum
</h3>
<p class="mb-4">Our signature serum for bright, healthy skin
</p>
<p class="mb-4 text-2xl font-bold text-green-600">$49.99
</p>
<a id="ioc8h" href="#" class="flex h-12 items-center justify-center bg-green-600 text-white">Add to Cart</a>
</div>
</div>
<div id="ir523" class="group flex flex-col justify-between overflow-hidden border border-neutral-200 shadow-lg">
<img id="i0wnc" alt="Hydrating Moisturizer" src="https://m.media-amazon.com/images/I/51Oywc4gc-L.jpg" class="w-full transition group-hover:scale-105"/>
<div id="iq60y" class="p-4">
<h3 class="mb-2 text-xl font-bold">Hydrating Moisturizer
</h3>
<p class="mb-4">Deep hydration for all skin types
</p>
<p class="mb-4 text-2xl font-bold text-green-600">$39.99
</p>
<a id="iuekeg" href="#" class="flex h-12 items-center justify-center bg-green-600 text-white">Add to Cart</a>
</div>
</div>
<div id="iblnsg" class="group flex flex-col justify-between overflow-hidden border border-neutral-200 shadow-lg">
<img id="iwguxh" alt="Gentle Cleanser" src="https://images-na.ssl-images-amazon.com/images/I/61u8cEPvj5L._UL500_.jpg" class="w-full transition group-hover:scale-105"/>
<div id="i34r9j" class="p-4">
<h3 id="ilufr5" class="mb-2 text-xl font-bold">Gentle Cleanser
</h3>
<p class="mb-4">Effective yet gentle daily cleansing
</p>
<p class="mb-4 text-2xl font-bold text-green-600">$29.99
</p>
<a id="ij6ooj" href="#" class="flex h-12 items-center justify-center bg-green-600 text-white">Add to
Cart</a>
</div>
</div>
</div>
</section>
<!--Sustainability Section-->
<section id="iot2wg" class="h-12">
</section>
<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div id="idm6q2" class="grid gap-8 lg:grid-cols-2">
<div id="i33bat" class="flex flex-col justify-center">
<h2 id="iwb5eg" class="mb-4 text-3xl font-bold lg:text-6xl">Our Commitment to Sustainability
</h2>
<p id="iqt0qr" class="mb-6 text-xl">At EcoGlow, we believe that beauty shouldn't come at the cost of our planet.
Our commitment to sustainability goes beyond just ingredients:
</p>
<ul class="space-y-4">
<li class="flex items-center">
<i title="icon" class="fas mr-2 text-green-600 fa-check-circle">
</i>Recyclable
packaging made from ocean-bound plastic
</li>
<li class="flex items-center">
<i title="icon" class="fas mr-2 text-green-600 fa-check-circle">
</i>1% of profits
donated to environmental causes
</li>
<li id="ivgtxg" class="flex items-center">
<i title="icon" class="fas mr-2 text-green-600 fa-check-circle">
</i>Carbon-neutral shipping worldwide
</li>
</ul>
</div>
<div id="icvr1z" class="relative overflow-hidden">
<img id="in3tf1" alt="Sustainability" src="https://assets.senangwebs.com/websites/1e14731a-1555-4170-9257-5276fce105b1/images/q4oUFEuPlgn2Cd03DL76s2soPISBUjiW6NXHNplr.svg" class="w-full aspect-video"/>
</div>
</div>
</section>
<!--Testimonials Section-->
<section id="ikmmhf" class="h-12">
</section>
<section id="iea6ge" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div class="mb-8 text-center">
<h2 id="ih7dti" class="mb-4 text-3xl font-bold lg:text-6xl">Customer Stories
</h2>
<p class="text-xl">See what our community has to say about EcoGlow
</p>
</div>
<div class="grid gap-4 lg:grid-cols-3">
<div id="ik45kf" class="border border-neutral-200 p-6 shadow-lg">
<div class="mb-4 text-yellow-400">
<i title="icon" class="fas fa-star">
</i>
<i title="icon" class="fas fa-star">
</i>
<i title="icon" class="fas fa-star">
</i>
<i title="icon" class="fas fa-star">
</i>
<i title="icon" class="fas fa-star">
</i>
</div>
<p class="mb-4 text-lg">"Amazing results with the Radiant Glow Serum! Love that it's eco-friendly too."
</p>
<p class="font-bold">Sarah M.
</p>
<p id="ipxbxe" class="text-sm">Verified Customer
</p>
</div>
<div id="ic72cl" class="border border-neutral-200 p-6 shadow-lg">
<div class="mb-4 text-yellow-400">
<i title="icon" class="fas fa-star">
</i>
<i title="icon" class="fas fa-star">
</i>
<i title="icon" class="fas fa-star">
</i>
<i title="icon" class="fas fa-star">
</i>
<i title="icon" class="fas fa-star">
</i>
</div>
<p class="mb-4 text-lg">"Finally found a sustainable skincare brand that actually works!"
</p>
<p class="font-bold">Michael R.
</p>
<p class="text-sm">Verified Customer
</p>
</div>
<div id="ivfk3k" class="border border-neutral-200 p-6 shadow-lg">
<div class="mb-4 text-yellow-400">
<i title="icon" class="fas fa-star">
</i>
<i title="icon" class="fas fa-star">
</i>
<i title="icon" class="fas fa-star">
</i>
<i title="icon" class="fas fa-star">
</i>
<i title="icon" class="fas fa-star">
</i>
</div>
<p class="mb-4 text-lg">"The packaging is beautiful and eco-friendly. Will definitely buy again!"
</p>
<p class="font-bold">Emma L.
</p>
<p class="text-sm">Verified Customer
</p>
</div>
</div>
</section>
<!--CTA Section-->
<section id="iyo0sz" class="h-12">
</section>
<section id="ixme9o" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div id="ihpq52" class="bg-green-50 p-4 lg:p-16">
<div id="in8uzk" class="grid gap-8 lg:grid-cols-2 lg:gap-16">
<div id="iyx34l" class="flex flex-col justify-center">
<h2 class="mb-4 text-3xl font-bold lg:text-5xl">Join the Sustainable Beauty Movement
</h2>
<p class="mb-6 text-xl">Subscribe to our newsletter for exclusive offers and eco-beauty tips
</p>
<form method="get" class="flex flex-col gap-4 lg:flex-row">
<input type="email" id="i53591" placeholder="Enter your email" class="h-12 flex-grow border px-4"/>
<button type="button" id="i6elwq" class="h-12 bg-green-600 px-8 text-white">Subscribe</button>
</form>
</div>
<div class="hidden lg:flex lg:items-center">
<img id="i3s4dk" alt="Newsletter" src="https://images.unsplash.com/photo-1600634999625-b98a8ff6cd1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MTk4MTB8MHwxfHNlYXJjaHwxNTN8fHNraW4tY2FyZXxlbnwwfHx8fDE3MzcxMzI2NDF8MA&ixlib=rb-4.0.3&q=80&w=1080" class="w-full"/>
</div>
</div>
</div>
</section>
<!--Footer-->
<section id="i5e822" class="h-12">
</section>
<footer id="il2k6g" class="container mx-auto grid gap-8 px-6 lg:grid-cols-4 lg:gap-16 lg:px-16">
<div class="flex flex-col gap-2">
<h1 class="text-2xl font-bold text-green-600">EcoGlow
</h1>
<p class="max-w-sm text-sm">Sustainable beauty products that care for your skin and our planet.
</p>
</div>
<div class="flex flex-col gap-2">
<h4 class="text-lg font-semibold">Quick Links
</h4>
<a href="#about" class="text-sm">About Us</a>
<a href="#products" class="text-sm">Products</a>
<a href="#sustainability" class="text-sm">Sustainability</a>
<a href="#contact" class="text-sm">Contact</a>
</div>
<div class="flex flex-col gap-2">
<h4 class="text-lg font-semibold">Contact Us
</h4>
<p class="text-sm">[email protected]
</p>
<p class="text-sm">1-800-ECO-GLOW
</p>
<p class="text-sm">123 Green Street, Los Angeles, CA 90001
</p>
</div>
<div class="flex flex-col gap-2">
<h4 class="text-lg font-semibold">Follow Us
</h4>
<div class="flex gap-4">
<a href="#" class="text-green-600 hover:opacity-80"><i title="icon" class="fab fa-instagram">
</i></a>
<a href="#" class="text-green-600 hover:opacity-80"><i title="icon" class="fab fa-facebook">
</i></a>
<a href="#" class="text-green-600 hover:opacity-80"><i title="icon" class="fab fa-twitter">
</i></a>
</div>
</div>
<div id="ikq4oo" class="col-span-full border-t py-4">
<p id="iw4oal" class="text-center text-sm">© 2025 EcoGlow Skincare. All rights reserved.
</p>
</div>
</footer>
<script src="https://cdn.tailwindcss.com"></script>
<script src="//unpkg.com/alpinejs" defer></script>
</body>Welcome to SenangStart Template Preview! 🎉 Visit our homepage for a deeper dive into our offerings, or you can edit this template with drag-n-drop website builder.
Edit Template