<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skincare Product Landing Page</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Fonts -->
</head>
<body class="antialiased">
<!-- NAV -->
<nav class="flex justify-between items-center px-8 md:px-20 py-8 max-w-screen-2xl mx-auto">
<div class="font-bold tracking-[0.3em] text-xs uppercase">AS-SHAMIR</div>
<div class="hidden md:flex space-x-10 text-[11px] font-semibold uppercase tracking-wider text-gray-400">
<a href="#" class="hover:text-black">products</a>
<a href="#" class="hover:text-black">story</a>
<a href="#" class="hover:text-black">manufacturing</a>
<a href="#" class="hover:text-black">team</a>
</div>
<div class="flex space-x-6 items-center">
<button>🔍</button>
<button>👤</button>
<button class="relative">👜
<span class="absolute -top-2 -right-2 bg-black text-white text-[8px] rounded-full w-4 h-4 flex items-center justify-center">0</span>
</button>
</div>
</nav>
<!-- HERO -->
<main class="max-w-screen-2xl mx-auto px-8 md:px-20 py-12 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- TEXT -->
<div>
<p class="text-[10px] tracking-[0.25em] font-bold text-gray-400 mb-6 uppercase border-l-2 border-red-500 pl-4">
Black Cumin | Cajuput Serum Concentrate
</p>
<h1 class="text-6xl md:text-8xl leading-[1.1] mb-8 text-[#1a1a1a]">
Specific Skin <br> Concern
</h1>
<p class="text-gray-500 text-sm leading-relaxed max-w-md mb-10">
Formulated to absorb deep into pores, this active serum helps to achieve blemish-free skin and smooth the complexion.
</p>
<div class="flex items-center space-x-10">
<button class="bg-[#1a1a1a] text-white px-10 py-4 rounded-full text-xs font-bold uppercase tracking-widest hover:bg-gray-800">
Add To Cart
</button>
<span class="text-3xl font-light">$4.97</span>
</div>
</div>
<!-- IMAGE -->
<div class="flex justify-center lg:justify-end relative">
<div class="hero-accent">
<img decoding="async" src="https://images.unsplash.com/photo-1608248597279-f99d160bfcbc?q=80&w=800&auto=format&fit=crop" alt="Serum Bottle" class="absolute -left-12 top-1/2 -translate-y-1/2 w-72 drop-shadow-2xl rounded-2xl -rotate-6" title="Elementor #9295">
</div>
</div>
</main>
<!-- SOCIAL -->
<section class="bg-white border-y py-16 mt-20">
<div class="max-w-screen-2xl mx-auto px-8 md:px-20 flex flex-wrap justify-between items-center">
<div>
<h3 class="text-xl font-bold">Trusted by 350,000+ Clients</h3>
<p class="text-gray-400 text-sm">Worldwide since 2008</p>
</div>
<div class="flex space-x-16">
<div>
<h2 class="text-4xl font-bold">4.6</h2>
<p class="text-sm text-gray-400">Ratings</p>
</div>
<div>
<h2 class="text-4xl font-bold">6M+</h2>
<p class="text-sm text-gray-400">Sales / Year</p>
</div>
</div>
</div>
</section>
<!-- PRODUCTS -->
<section class="max-w-screen-2xl mx-auto px-8 md:px-20 py-24">
<h2 class="text-4xl text-center mb-16">Our Products</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-10">
<!-- Product 1 -->
<div class="product-card text-center">
<div class="bg-blue-50 rounded-3xl p-8 mb-6">
<img decoding="async" src="https://images.unsplash.com/photo-1598440947619-2c35fc9aa908?q=80&w=400" class="rounded-xl" alt="Photo 1598440947619 2c35fc9aa908?q=80&w=400" title="Elementor #9295">
</div>
<h4 class="text-xs font-bold uppercase">Blueberry Jasmine</h4>
<p class="text-gray-400">$14.97</p>
</div>
<!-- Product 2 -->
<div class="product-card text-center">
<div class="bg-red-50 rounded-3xl p-8 mb-6">
<img decoding="async" src="https://images.unsplash.com/photo-1570197788417-0e82375c9371?q=80&w=400" class="rounded-xl" alt="Photo 1570197788417 0e82375c9371?q=80&w=400" title="Elementor #9295">
</div>
<h4 class="text-xs font-bold uppercase">Rosehip Rose</h4>
<p class="text-gray-400">$18.50</p>
</div>
<!-- Product 3 -->
<div class="product-card text-center">
<div class="bg-yellow-50 rounded-3xl p-8 mb-6">
<img decoding="async" src="https://images.unsplash.com/photo-1611930022073-b7a4ba5fcccd?q=80&w=400" class="rounded-xl" alt="Photo 1611930022073 B7a4ba5fcccd?q=80&w=400" title="Elementor #9295">
</div>
<h4 class="text-xs font-bold uppercase">Cajuput Serum</h4>
<p class="text-gray-400">$4.97</p>
</div>
<!-- Product 4 -->
<div class="product-card text-center">
<div class="bg-green-50 rounded-3xl p-8 mb-6">
<img decoding="async" src="https://images.unsplash.com/photo-1556228578-8c89e6adf883?q=80&w=400" class="rounded-xl" alt="Photo 1556228578 8c89e6adf883?q=80&w=400" title="Elementor #9295">
</div>
<h4 class="text-xs font-bold uppercase">Green Tea Vitamin</h4>
<p class="text-gray-400">$22.00</p>
</div>
</div>
</section>
</body>
</html>]]>
