<!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&amp;w=800&amp;auto=format&amp;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&amp;w=400" class="rounded-xl" alt="Photo 1598440947619 2c35fc9aa908?q=80&amp;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&amp;w=400" class="rounded-xl" alt="Photo 1570197788417 0e82375c9371?q=80&amp;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&amp;w=400" class="rounded-xl" alt="Photo 1611930022073 B7a4ba5fcccd?q=80&amp;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&amp;w=400" class="rounded-xl" alt="Photo 1556228578 8c89e6adf883?q=80&amp;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>