1<div class="relative flex w-full flex-col items-center justify-center bg-white px-6 py-20 dark:bg-gray-900">
2  <h1 class="mb-4 max-w-4xl text-center text-5xl leading-tight font-extrabold text-gray-800 sm:text-6xl lg:text-7xl dark:text-gray-100">
3    Crafting <span class="underline decoration-pink-500 decoration-wavy">Exceptional</span>
4    Digital Experiences
5  </h1>
6  <p class="mb-8 max-w-2xl text-center text-lg text-gray-600 sm:text-xl dark:text-gray-300">Our team of professionals helps transform businesses with modern web, mobile, and cloud solutions that spark real change.</p>
7  <button type="button" class="rounded-full bg-pink-500 px-6 py-3 text-sm font-semibold text-white shadow transition-transform duration-300 hover:scale-105 hover:bg-pink-600">Start Your Journey</button>
8</div>
9

1<div class="relative overflow-hidden bg-gray-50 py-16 md:py-5 dark:bg-gray-900">
2  <!-- Geometric grid background -->
3
4  <div class="absolute inset-0 opacity-10 dark:opacity-[0.03]">
5    <div class="absolute inset-0 bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:40px_40px] dark:bg-[linear-gradient(to_right,#333_1px,transparent_1px),linear-gradient(to_bottom,#333_1px,transparent_1px)]"></div>
6  </div>
7
8  <div class="animate-float absolute top-1/4 left-1/4 h-64 w-64 rounded-full bg-emerald-400/10 blur-[100px]"></div>
9
10  <div class="animate-float animation-delay-3000 absolute right-1/4 bottom-1/3 h-72 w-72 rounded-[50%] bg-indigo-400/10 blur-[100px]"></div>

1<div class="relative isolate w-full overflow-hidden bg-gradient-to-br from-blue-50 to-purple-50 py-24 text-gray-900 sm:py-32 dark:from-gray-900 dark:to-gray-800 dark:text-white">
2  <!-- Animated background elements -->
3  <svg class="absolute inset-0 -z-10 h-full w-full [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200 dark:stroke-gray-700" aria-hidden="true">
4    <defs>
5      <pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1" patternUnits="userSpaceOnUse">
6        <path d="M.5 200V.5H200" fill="none" />
7      </pattern>
8    </defs>
9    <svg x="50%" y="-1" class="overflow-visible fill-gray-50 dark:fill-gray-800">
10      <path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z" stroke-width="0" />

1<div class="relative flex min-h-screen flex-col overflow-hidden bg-white sm:flex-row dark:bg-gray-900">
2  <!-- Background pattern (hidden on mobile) -->
3  <div class="absolute top-0 right-0 hidden h-full w-1/2 sm:block">
4    <svg class="h-full w-full text-gray-100 dark:text-gray-800" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none">
5      <polygon points="0,0 100,0 100,100 0,100" />
6    </svg>
7  </div>
8
9  <!-- Left Panel / Content -->
10  <div class="z-10 flex w-full items-center justify-center p-8 sm:w-1/2 sm:p-4 md:p-5 lg:p-10">

1<div class="relative w-full overflow-hidden bg-gray-50 dark:bg-gray-950">
2  <div class="absolute inset-0 overflow-hidden">
3    <div class="absolute -top-20 -left-20 h-96 w-96 rounded-full bg-blue-100/50 blur-3xl dark:bg-blue-900/20"></div>
4    <div class="absolute top-1/3 -right-40 h-80 w-80 rotate-45 bg-purple-100/40 blur-3xl dark:bg-purple-900/20"></div>
5    <div class="absolute right-0 bottom-0 h-64 w-64 -rotate-12 bg-green-100/40 blur-3xl dark:bg-green-900/20"></div>
6  </div>
7
8  <!-- Main content container with angled edge -->
9  <div class="relative mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:justify-between lg:px-8 lg:py-16">
10    <!-- Angled edge effect -->

1<!-- Bold asymmetrical hero with vibrant gradient -->
2<div class="relative w-full overflow-hidden bg-white dark:bg-gray-950">
3  <!-- Abstract gradient shapes -->
4  <div class="absolute -top-32 -right-32 h-96 w-96 rounded-full bg-[radial-gradient(ellipse_at_center,var(--tw-gradient-stops))] from-amber-200/70 via-transparent to-transparent blur-3xl dark:from-amber-900/30"></div>
5  <div class="absolute bottom-0 -left-20 h-80 w-80 rounded-full bg-[radial-gradient(ellipse_at_center,var(--tw-gradient-stops))] from-teal-200/60 via-transparent to-transparent blur-3xl dark:from-teal-900/30"></div>
6
7  <div class="mx-auto max-w-7xl px-6 py-16 sm:py-10 lg:flex lg:items-center lg:px-8">
8    <!-- Text content with creative typography -->
9    <div class="lg:w-2/3 lg:pr-16">
10      <h1 class="text-5xl font-bold tracking-tight text-gray-900 sm:text-6xl lg:text-7xl dark:text-white">

1<div class="relative overflow-hidden bg-gradient-to-br from-green-50 to-cyan-50 dark:from-green-900 dark:to-cyan-900">
2  <!-- Organic shape background -->
3  <div class="absolute inset-0 overflow-hidden opacity-20 dark:opacity-30">
4    <svg class="absolute -top-20 -left-20 h-[120%] w-[120%]" viewBox="0 0 1200 1200" preserveAspectRatio="none">
5      <path fill="currentColor" d="M0,0V1200H1200V0ZM200,200C400,100,800,300,1000,200s200-300,400-100V1000C1200,1100,1000,900,800,1000S400,1100,200,1000Z" class="text-green-200 dark:text-cyan-950"></path>
6    </svg>
7  </div>
8  <!-- Floating leaves decoration -->
9  <div class="animate-float absolute top-1/4 left-10 h-16 w-16 opacity-70">
10    <svg viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-green-500 dark:text-green-400">

1<div class="relative overflow-hidden bg-white dark:bg-gray-900">
2  <div class="absolute inset-0 overflow-hidden">
3    <div class="absolute top-1/4 left-10 h-32 w-32 rotate-45 rounded-lg bg-yellow-400/20 blur-xl dark:bg-yellow-500/20"></div>
4    <div class="absolute top-1/3 right-20 h-40 w-40 -rotate-12 rounded-full bg-red-400/15 blur-xl dark:bg-red-600/15"></div>
5    <div class="absolute bottom-1/4 left-1/3 h-28 w-28 rotate-30 rounded-lg bg-blue-400/20 blur-xl dark:bg-blue-600/20"></div>
6  </div>
7
8  <!-- Main content grid -->
9  <div class="relative mx-auto grid min-h-screen max-w-7xl grid-cols-1 gap-8 px-6 py-16 sm:grid-cols-12 sm:gap-0 sm:px-8">
10    <!-- Left content column -->