All Prompts
All Prompts
landing pagemarketingproduct highlightratingcard layoutcta buttonsresponsivetailwindecommercehero
Skincare Hero Section with Ratings and Feature Cards
Адаптивный Hero-раздел для лендинга косметики. Включает заголовок, CTA, рейтинг, карточки с преимуществами. Tailwind CSS.
Prompt
<section class="bg-[#1b2320] text-emerald-50">
<link id="all-fonts-link-font-playfair" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap">
<style id="all-fonts-style-font-playfair">
.font-playfair {
font-family: 'Playfair Display', serif !important;
}
</style>
<div
class="sm:px-6 lg:px-8 lg:py-16 flex flex-col w-full max-w-6xl mx-auto pt-10 pr-4 pb-10 pl-4 justify-center antialiased font-geist">
<!-- Top row: heading + rating -->
<div class="flex flex-col md:flex-row md:items-start md:justify-between gap-6 mb-10 lg:mb-12">
<div class="">
<h1 class="leading-tight sm:text-5xl lg:text-8xl text-4xl text-emerald-50 tracking-tight font-playfair">
Give Your Skin
</h1>
<h2
class="leading-tight sm:text-4xl lg:text-8xl text-3xl font-medium italic text-emerald-300 tracking-tight font-playfair mt-2">
the calm it deserves
</h2>
<p class="mt-4 max-w-xl text-sm sm:text-base text-emerald-100/80">
A three-step ritual for sensitive, overworked skin. Clinically measured to reduce redness,
strengthen your barrier, and bring back a quiet, lasting glow.
</p>
<div class="mt-6 flex flex-wrap items-center gap-4">
<button class="inline-flex items-center gap-2 rounded-full bg-emerald-400 text-emerald-950 px-5 py-2.5 text-sm font-medium hover:bg-emerald-300 hover:shadow-sm transition-colors">
<span>Start your ritual</span>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" style="stroke-width:1.5" data-icon-set="mingcute" data-mingcute="sparkles-line"><g fill="none" fill-rule="evenodd" class=""><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="currentColor" d="M5.827 13.004a.19.19 0 0 1 .346 0l.17.371a8.7 8.7 0 0 0 3.3 3.638l.265.155a.181.181 0 0 1 0 .316l-.265.155a8.7 8.7 0 0 0-3.3 3.638l-.17.372a.19.19 0 0 1-.346 0l-.17-.372a8.7 8.7 0 0 0-3.3-3.638l-.265-.155a.181.181 0 0 1 0-.316l.265-.155a8.7 8.7 0 0 0 3.47-4.01Zm.17 3.486l-.175.206q-.187.21-.385.41l-.2.198l-.027.024l.227.223l.195.203l.19.208l.175.205l.175-.205q.187-.21.385-.411l.227-.223l-.027-.024q-.203-.195-.395-.4l-.19-.208zm8.476-13.76a.331.331 0 0 1 .605 0l.15.336l.148.314l.195.39l.226.42l.112.196a15.2 15.2 0 0 0 3.895 4.437l.427.317a15 15 0 0 0 1.383.878a.317.317 0 0 1 0 .553a15 15 0 0 0-1.082.67l-.36.251a15.2 15.2 0 0 0-4.263 4.71l-.131.232a15 15 0 0 0-.402.775l-.147.314l-.15.336a.331.331 0 0 1-.606 0l-.15-.336l-.148-.314l-.196-.39l-.225-.42l-.113-.196a15.2 15.2 0 0 0-3.894-4.437l-.428-.316a15 15 0 0 0-1.382-.88a.317.317 0 0 1 0-.552a15 15 0 0 0 1.082-.669l.36-.252a15.2 15.2 0 0 0 4.262-4.71l.132-.232q.211-.38.402-.775l.147-.314zm.302 3.615a17.2 17.2 0 0 1-3.663 3.95a17.2 17.2 0 0 1 3.663 3.95a17.2 17.2 0 0 1 3.663-3.95a17.2 17.2 0 0 1-3.663-3.95" class=""></path></g></svg>
</button>
<button class="inline-flex items-center gap-2 rounded-full border border-emerald-800/80 bg-[#212b26] px-4 py-2 text-sm font-medium text-emerald-50 hover:border-emerald-500 hover:bg-emerald-950/50 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4 text-emerald-300" style="stroke-width:1.5" data-icon-set="mingcute" data-mingcute="play-circle-line"><g fill="none" fill-rule="evenodd" class=""><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16M8.964 8.65a1.192 1.192 0 0 1 1.654-.953l.325.143l.44.202l.349.169l.39.196l.43.223l.462.251l.494.28l.249.145l.469.282l.428.268l.564.368l.464.318l.455.328l.083.061c.635.477.64 1.429.001 1.909l-.283.209l-.393.276l-.496.335l-.387.25l-.43.27l-.473.283q-.123.073-.252.147l-.498.282l-.466.253l-.43.224l-.39.196l-.505.242l-.4.181l-.202.088a1.192 1.192 0 0 1-1.651-.954l-.054-.499l-.03-.334l-.042-.599l-.024-.46l-.018-.506l-.01-.549v-.579l.01-.548l.018-.506l.024-.46l.042-.599l.071-.73zm1.884 1.355l-.027.467l-.021.525l-.012.58v.618l.012.58l.02.525l.028.467l.416-.21l.226-.118l.488-.262l.53-.299l.522-.309l.242-.148l.444-.28l.39-.255l-.392-.257l-.444-.281l-.496-.3a30 30 0 0 0-.793-.453l-.488-.262l-.442-.227z" class=""></path></g></svg>
<span>Watch 60s overview</span>
</button>
</div>
</div>
<!-- Rating block -->
<div class="flex items-center gap-4 self-start md:self-end">
<div class="flex items-center gap-1 text-amber-400 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4"
data-icon-set="mingcute" data-mingcute="star-fill">
<g fill="none" class="">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="M10.92 2.868a1.25 1.25 0 0 1 2.16 0l2.795 4.798l5.428 1.176a1.25 1.25 0 0 1 .667 2.054l-3.7 4.141l.56 5.525a1.25 1.25 0 0 1-1.748 1.27L12 19.592l-5.082 2.24a1.25 1.25 0 0 1-1.748-1.27l.56-5.525l-3.7-4.14a1.25 1.25 0 0 1 .667-2.055l5.428-1.176z"
class=""></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4"
data-icon-set="mingcute" data-mingcute="star-fill">
<g fill="none" class="">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="M10.92 2.868a1.25 1.25 0 0 1 2.16 0l2.795 4.798l5.428 1.176a1.25 1.25 0 0 1 .667 2.054l-3.7 4.141l.56 5.525a1.25 1.25 0 0 1-1.748 1.27L12 19.592l-5.082 2.24a1.25 1.25 0 0 1-1.748-1.27l.56-5.525l-3.7-4.14a1.25 1.25 0 0 1 .667-2.055l5.428-1.176z"
class=""></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4"
data-icon-set="mingcute" data-mingcute="star-fill">
<g fill="none" class="">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="M10.92 2.868a1.25 1.25 0 0 1 2.16 0l2.795 4.798l5.428 1.176a1.25 1.25 0 0 1 .667 2.054l-3.7 4.141l.56 5.525a1.25 1.25 0 0 1-1.748 1.27L12 19.592l-5.082 2.24a1.25 1.25 0 0 1-1.748-1.27l.56-5.525l-3.7-4.14a1.25 1.25 0 0 1 .667-2.055l5.428-1.176z"
class=""></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4"
data-icon-set="mingcute" data-mingcute="star-fill">
<g fill="none" class="">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="M10.92 2.868a1.25 1.25 0 0 1 2.16 0l2.795 4.798l5.428 1.176a1.25 1.25 0 0 1 .667 2.054l-3.7 4.141l.56 5.525a1.25 1.25 0 0 1-1.748 1.27L12 19.592l-5.082 2.24a1.25 1.25 0 0 1-1.748-1.27l.56-5.525l-3.7-4.14a1.25 1.25 0 0 1 .667-2.055l5.428-1.176z"
class=""></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4"
data-icon-set="mingcute" data-mingcute="star-fill">
<g fill="none" class="">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="M10.92 2.868a1.25 1.25 0 0 1 2.16 0l2.795 4.798l5.428 1.176a1.25 1.25 0 0 1 .667 2.054l-3.7 4.141l.56 5.525a1.25 1.25 0 0 1-1.748 1.27L12 19.592l-5.082 2.24a1.25 1.25 0 0 1-1.748-1.27l.56-5.525l-3.7-4.14a1.25 1.25 0 0 1 .667-2.055l5.428-1.176z"
class=""></path>
</g>
</svg>
</div>
<div class="flex flex-col items-start">
<p class="text-sm font-medium text-emerald-50">
4.9<span class="text-xs text-emerald-300/80 ml-1">(2,304 reviews)</span>
</p>
<div class="-space-x-2 flex mt-1">
<img class="w-7 h-7 object-cover border-[#1b2320] border rounded-full" src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=320&q=80" alt="Customer 1">
<img class="w-7 h-7 object-cover border-[#1b2320] border rounded-full" src="https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=crop&w=320&q=80" alt="Customer 2">
<img class="w-7 h-7 object-cover border-[#1b2320] border rounded-full" src="https://images.unsplash.com/photo-1525134479668-1bee5c7c6845?auto=format&fit=crop&w=320&q=80" alt="Customer 3">
</div>
</div>
</div>
</div>
<!-- Main grid -->
<section class="grid gap-6 lg:gap-7 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1.1fr)] gap-x-6 gap-y-6 items-center">
<!-- Left: main skin image -->
<article class="overflow-hidden bg-[#111715] rounded-3xl relative shadow-sm border border-emerald-900/60">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/7d30ad3a-ffbc-427c-8120-a79ae8b3da6d_1600w.webp" alt="Close-up portrait of a woman with glowing skin" class="w-full h-[680px] object-cover">
<!-- Badge card -->
<div class="absolute bottom-5 left-5 sm:bottom-6 sm:left-6">
<div
class="bg-[#1f2924]/95 backdrop-blur-sm rounded-2xl px-4 py-3 sm:px-5 sm:py-4 shadow-md max-w-xs border border-emerald-900/70">
<div class="flex items-start gap-3">
<div
class="flex flex-none text-emerald-200 bg-emerald-900/50 w-9 h-9 rounded-full items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
class="w-[16px] h-[16px]" data-mingcute="newdot-line" data-icon-set="mingcute" stroke-width="2">
<g fill="none" fill-rule="evenodd" class="">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="#bbf7d0"
d="M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6a1 1 0 1 0-2 0v6H5V5h6a1 1 0 1 0 0-2zm11 3.5a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0M17.5 3a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7"
class=""></path>
</g>
</svg>
</div>
<div class="">
<p class="text-sm font-medium text-emerald-50">Clinically Calm</p>
<p class="text-sm font-normal italic text-emerald-100/80">Irritation down by 87% in 4 weeks.</p>
<p class="mt-1 text-xs text-emerald-200/70">
Tested on 120 sensitive-skin participants under dermatological supervision.
</p>
</div>
</div>
</div>
</div>
</article>
<!-- Right column: two stacked cards -->
<div class="flex flex-col gap-6 lg:gap-7 h-full">
<!-- Top card: packaging -->
<article
class="sm:p-6 lg:p-7 flex flex-col sm:flex-row gap-6 bg-[#232e29] border-emerald-900/70 border rounded-3xl pt-5 pr-5 pb-5 pl-5 gap-x-6 gap-y-6 items-stretch justify-between">
<div class="flex-1 flex flex-col justify-between">
<div class="flex items-center justify-between mb-4">
<div class="flex text-emerald-200 bg-emerald-900/60 w-9 h-9 rounded-full items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
class="w-[16px] h-[16px]" style="stroke-width: 1.5; color: rgb(190, 242, 210);"
data-icon-set="mingcute" data-mingcute="recycle-line" stroke-width="2">
<g fill="none" class="">
<path
d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="M18.763 14.214a1 1 0 0 1 1.302.268l.064.098L21.526 17c.745 1.29-.132 2.893-1.585 2.995l-.147.005h-6.38l.415.414a1 1 0 0 1-1.32 1.498l-.095-.084l-2.115-2.115a1 1 0 0 1-.194-.267a1 1 0 0 1 .121-1.08l.036-.04l2.152-2.154a1 1 0 0 1 1.498 1.32l-.083.094l-.415.414h6.38l-1.397-2.42a1 1 0 0 1 .366-1.366M8.703 9.625l.777 2.898a1 1 0 1 1-1.932.518l-.152-.566L4.206 18H7a1 1 0 1 1 0 2H4.206c-1.54 0-2.502-1.667-1.732-3l3.19-5.525l-.566.151a1 1 0 0 1-.517-1.932l2.897-.776a1 1 0 0 1 1.225.707m4.942-6.263l.087.138l3.19 5.525l.152-.566a1 1 0 0 1 1.955.404l-.023.114l-.777 2.898a.996.996 0 0 1-1.099.732l-.125-.025l-2.898-.776a1 1 0 0 1 .403-1.956l.114.024l.566.151L12 4.5l-1.397 2.42a1 1 0 0 1-1.785-.896l.053-.104l1.397-2.42c.715-1.238 2.425-1.327 3.282-.265z"
class=""></path>
</g>
</svg>
</div>
<p class="text-xs font-medium text-emerald-100 bg-emerald-900/60 px-2.5 py-1 rounded-full">
98% less plastic
</p>
</div>
<div class="">
<h3 class="font-playfair font-semibold tracking-tight text-xl text-emerald-50">
Refillable Glass
</h3>
<p class="mt-1 font-playfair font-medium tracking-tight text-lg text-emerald-100 italic">
Designed for the long term
</p>
<p class="mt-3 text-sm text-emerald-100/80 max-w-sm">
Each bottle is crafted from fully recyclable glass and ships in compostable mailers to keep your ritual
gentle on the planet.
</p>
</div>
<div class="mt-4 flex items-center gap-3 text-xs text-emerald-200/80">
<div class="flex items-center gap-1">
<iconify-icon icon="mingcute:water-percent-line" class="w-3.5 h-3.5 text-emerald-300"
style="stroke-width:1.5"></iconify-icon>
<span>Refill program saves 1.3kg CO₂ / year</span>
</div>
</div>
</div>
<div class="flex-1 flex items-center justify-center">
<div class="relative w-28 sm:w-32 lg:w-36">
<div class="absolute -top-3 -left-2 w-10 h-10 rounded-full bg-emerald-500/40 blur-2xl"></div>
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/097cb637-6762-467b-a1d3-db0d530693f4_320w.jpg" alt="Serum bottle" class="w-full h-auto object-contain rounded-2xl relative drop-shadow-xl">
</div>
</div>
</article>
<!-- Bottom card: natural benefits -->
<article
class="bg-[#2f3b30] rounded-3xl px-5 py-6 sm:px-7 sm:py-7 lg:px-8 lg:py-8 text-emerald-50 flex flex-col sm:flex-row gap-6 items-stretch overflow-hidden border border-emerald-900/70">
<div class="flex-1">
<p class="text-xs sm:text-sm font-medium tracking-[0.18em] uppercase text-emerald-200 mb-2">
BOTANICAL BLEND
</p>
<h3 class="font-playfair text-2xl sm:text-[1.6rem] font-semibold tracking-tight text-emerald-50">
99% Origin from Plants
</h3>
<p class="mt-1 font-playfair text-lg font-medium tracking-tight text-emerald-100/90 italic">
100% peace of mind
</p>
<ul class="mt-4 space-y-2 text-sm">
<li class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
class="w-4 h-4 text-emerald-200" style="stroke-width:1.5" data-icon-set="mingcute"
data-mingcute="leaf-line">
<g fill="none" fill-rule="evenodd" class="">
<path
d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="M4.712 18.141c-1.537-1.69-1.957-3.828-1.77-5.738c.206-2.107 1.167-4.128 2.418-5.171c1.672-1.393 3.428-1.965 4.952-2.245a26 26 0 0 1 2.24-.283c.404-.038.813-.076 1.206-.174c.828-.207 1.645-.543 2.318-1.077c.308-.245.62-.493 1.035-.447a1 1 0 0 1 .735.46c3.2 5.067 2.717 10.446.044 13.834c-1.335 1.691-3.21 2.871-5.397 3.22c-1.908.303-3.993-.036-6.094-1.136a11 11 0 0 0-.41 1.758a1 1 0 1 1-1.98-.283c.124-.865.36-1.786.703-2.718m5.96-11.187c.704-.129 1.365-.191 2.007-.254c.524-.05 1.052-.102 1.564-.23a8.9 8.9 0 0 0 2.45-1.006c2.178 4.117 1.57 8.134-.373 10.598c-1.048 1.328-2.489 2.22-4.14 2.482c-1.483.236-3.2-.024-5.03-1.026c1.112-2.267 2.93-4.44 5.297-5.623a1 1 0 1 0-.894-1.79c-2.608 1.304-4.606 3.559-5.905 5.964c-.641-1.05-.833-2.271-.715-3.472c.169-1.728.96-3.205 1.707-3.829c1.328-1.107 2.728-1.574 4.033-1.814Z"
class=""></path>
</g>
</svg>
<span>No synthetic fragrance or dyes</span>
</li>
<li class="flex items-center gap-2">
<iconify-icon icon="mingcute:sprout-line" class="w-4 h-4 text-emerald-200"
style="stroke-width:1.5"></iconify-icon>
<span>Cold-pressed seed oils and adaptogens</span>
</li>
<li class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
class="w-4 h-4 text-emerald-200" style="stroke-width:1.5" data-icon-set="mingcute"
data-mingcute="hand-heart-line">
<g fill="none" fill-rule="evenodd" class="">
<path
d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="m11.253 11.79l.226.05l3.716.928c1.171.293 1.76 1.528 1.39 2.64l.32-.22l.646-.462c.325-.23.657-.448 1.002-.62c1.536-.768 3.334.291 3.442 1.971l.005.16v.055c0 .697-.3 1.357-.82 1.814l-.147.12l-3.07 2.302c-.299.224-.636.39-.994.49l-.218.052l-3.21.642a5 5 0 0 1-2.964-.314l-.252-.117l-2.35-1.175a1 1 0 0 0-.331-.1L7.528 20h-.796a2 2 0 0 1-1.563.993L5 21H4a2 2 0 0 1-1.995-1.85L2 19v-4a2 2 0 0 1 1.85-1.994L4 13h1c.484 0 .928.172 1.274.459l.125.112l1.99-1.243a4 4 0 0 1 2.636-.575zm-1.804 2.234L7 15.554V18h.528a3 3 0 0 1 1.342.317l2.35 1.175a3 3 0 0 0 1.93.258l3.209-.642a1 1 0 0 0 .404-.18l3.07-2.303c.128-.096.167-.237.167-.389a.382.382 0 0 0-.513-.359l-2.428 1.62a3 3 0 0 1-1.665.503H12v-2h1.559a1 1 0 0 0 .948-.684l.203-.608l-3.716-.928a2 2 0 0 0-1.545.244M5 15H4v4h1zM16 3.47c1.03-.644 2.212-.593 3.166-.037c1.112.648 1.866 1.942 1.833 3.422c-.041 1.835-1.41 3.344-3.438 4.6l-.398.239c-.358.212-.74.418-1.163.418s-.805-.206-1.163-.418l-.398-.24C12.41 10.198 11.042 8.69 11 6.854c-.033-1.48.721-2.774 1.833-3.422c.954-.556 2.135-.607 3.166.037Zm2.159 1.691c-.379-.22-.83-.246-1.278.136l-.206.19a1.084 1.084 0 0 1-1.35 0l-.206-.19c-.449-.382-.9-.357-1.278-.136c-.461.269-.858.87-.84 1.65c.017.778.618 1.78 2.468 2.929l.238.144l.293.171l.293-.17C18.33 8.673 18.981 7.62 19 6.808c.018-.779-.379-1.38-.84-1.649Z"
class=""></path>
</g>
</svg>
<span>Certified cruelty-free and ethically harvested</span>
</li>
</ul>
</div>
<div class="flex-1 flex items-center justify-center">
<div class="relative w-full max-w-xs">
<div class="absolute -right-6 -bottom-10 w-32 h-32 rounded-full bg-emerald-700/40 blur-3xl"></div>
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c396622e-2acf-40fd-a5de-4e0448603187_800w.jpg" alt="Green botanical leaf" class="w-full h-full object-cover rounded-2xl relative">
</div>
</div>
</article>
</div>
</section>
</div>
</section>