1<div class="relative isolate overflow-hidden bg-gradient-to-br from-indigo-900 to-purple-800 px-6 py-20 lg:px-8">
2  <div class="absolute inset-0 -z-10 opacity-20">
3    <div class="absolute top-1/2 left-[20%] h-[200px] w-[200px] -translate-y-1/2 rounded-full bg-purple-500 mix-blend-screen blur-[80px]"></div>
4    <div class="absolute top-1/3 right-[15%] h-[300px] w-[300px] rounded-full bg-indigo-500 mix-blend-screen blur-[100px]"></div>
5  </div>
6
7  <div class="mx-auto max-w-7xl">
8    <div class="grid grid-cols-1 gap-16 lg:grid-cols-2 lg:items-center">
9       <div class="text-center lg:text-left">
10        <h2 class="text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">Ready to transform <span class="text-amber-300">your business</span>?</h2>

1<div class="relative p-5 py-10 text-center dark:bg-black">
2  <h3 class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">Ready to join our happy customers?</h3>
3  <p class="mx-auto mb-8 max-w-2xl text-xl text-gray-600 dark:text-gray-300">See what we can do for your business with our 14-day free trial</p>
4
5  <div class="flex flex-col justify-center gap-4 sm:flex-row">
6    <button class="group relative overflow-hidden rounded-full bg-gradient-to-r from-violet-600 to-violet-500 px-8 py-4 font-bold text-white shadow-lg transition-all duration-300 hover:shadow-xl dark:from-blue-600 dark:to-blue-500">
7      <span class="relative z-10 flex items-center">
8        Start Free Trial
9        <svg class="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
10          <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />

1<div class="relative m-2 mx-auto max-w-2xl">
2  <div class="absolute -inset-1 rounded-2xl bg-gradient-to-r from-pink-600 to-purple-600 opacity-75 blur-md"></div>
3  <div class="relative rounded-2xl bg-white p-8 md:p-10 dark:bg-gray-900">
4    <h2 class="text-3xl font-bold text-gray-900 sm:text-4xl dark:text-white">Let's make something <span class="bg-gradient-to-r from-pink-500 to-purple-500 bg-clip-text text-transparent">awesome!</span></h2>
5    <p class="mt-4 text-gray-600 dark:text-gray-300">Fun, creative solutions for your boldest ideas.</p>
6    <div class="mt-8">
7      <button class="relative rounded-xl bg-gradient-to-r from-pink-500 to-purple-500 px-8 py-4 font-bold text-white transition-all hover:-translate-y-0.5 hover:shadow-lg hover:shadow-pink-500/30">
8        Start Creating
9        <span class="absolute -top-2 -right-2 flex h-5 w-5">
10          <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-pink-400 opacity-75"></span>

1<div class="relative overflow-hidden py-20 dark:bg-black">
2   <div class="pointer-events-none absolute inset-0 flex items-center justify-center overflow-hidden">
3    <div class="h-96 w-96 rounded-full bg-gradient-to-br from-teal-400 to-green-500 opacity-30 blur-3xl dark:opacity-20"></div>
4    <div class="h-96 w-96 rounded-full bg-gradient-to-br from-lime-400 to-green-400 opacity-20 blur-3xl dark:opacity-10"></div>
5  </div>
6   <div class="relative z-10 mx-auto max-w-7xl px-6 text-center sm:px-10">
7    <h1 class="mb-6 text-4xl font-extrabold tracking-tight text-gray-800 md:text-5xl lg:text-6xl dark:text-gray-100">Our Journey, <span class="bg-gradient-to-r from-teal-500 to-green-500 bg-clip-text text-transparent">Reimagined</span></h1>
8    <p class="mx-auto max-w-3xl text-lg text-gray-700 md:text-xl dark:text-gray-300">We pioneer technology that empowers growth – building solutions from the ground up to elevate businesses worldwide.</p>
9    <div class="mt-8 flex flex-col items-center space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-6">
10      <a href="#" class="inline-block rounded-lg bg-gradient-to-r from-teal-500 to-green-500 px-6 py-3 text-sm font-semibold text-white shadow-lg transition-transform duration-300 hover:scale-105 hover:from-teal-600 hover:to-green-600 md:text-base"> Get Started </a>

1  <div class="relative isolate overflow-hidden bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-gray-900 via-purple-900 to-violet-800 px-6 py-10 dark:bg-black">
2      <div
3        class="absolute inset-0 -z-10 bg-[size:50px_50px] opacity-20 [mask-image:linear-gradient(to_bottom_right,white,transparent)]"
4        style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+PHBhdGggZD0iTTAgMGg1MHY1MEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0wIDBoNTB2NTBIMHoiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9zdmc+')"
5      ></div>
6
7      <div class="absolute inset-0 -z-10 overflow-hidden opacity-40">
8        <div
9          class="absolute animate-[float_15s_linear_infinite] rounded-full bg-white"
10          style="width: 3px; height: 3px; top: 20%; left: 15%; animation-delay: 0s"

1<div class="relative isolate mx-auto overflow-hidden bg-gradient-to-br from-white to-gray-50 shadow-2xl dark:from-gray-900 dark:to-gray-800">
2  <div class="absolute inset-0 -z-10 opacity-10">
3    <div class="absolute top-1/3 left-[60%] h-[300px] w-[300px] rounded-full bg-purple-500 blur-[100px] dark:bg-purple-900/50"></div>
4    <div class="absolute top-2/3 right-[60%] h-[300px] w-[300px] rounded-full bg-blue-500 blur-[100px] dark:bg-blue-900/50"></div>
5  </div>
6
7  <!-- Content container -->
8  <div class="p-8 sm:p-10 lg:p-12">
9    <!-- Hero section -->
10    <div class="mb-10 text-center">

1 <div class="relative m-4 mx-4 max-w-6xl overflow-hidden rounded-xl border border-gray-200 bg-gradient-to-br from-gray-50 to-white p-8 font-sans text-gray-800 shadow-2xl transition-all duration-500 dark:border-gray-700 dark:from-gray-900 dark:to-gray-800 dark:text-gray-100">
2   <div class="absolute -top-20 -right-20 h-64 w-64 rounded-full bg-purple-500 opacity-10 blur-xl dark:opacity-5"></div>
3  <div class="absolute -bottom-20 -left-20 h-64 w-64 rounded-full bg-blue-500 opacity-10 blur-xl dark:opacity-5"></div>
4
5  <div class="relative z-10 mb-10 text-center">
6    <div class="mb-4 inline-block rounded-full border border-purple-200 bg-gradient-to-r from-purple-100 to-blue-100 px-4 py-2 dark:border-purple-800/50 dark:from-purple-900/30 dark:to-blue-900/30">
7      <span class="bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-sm font-medium text-transparent">✨ Premium Experience</span>
8    </div>
9    <h1 class="mb-4 bg-gradient-to-r from-purple-600 via-pink-600 to-blue-500 bg-clip-text text-4xl leading-tight font-extrabold text-transparent md:text-5xl">
10      Elevate Your

1<div class="relative isolate mx-auto max-w-7xl overflow-hidden bg-gradient-to-br from-indigo-100 to-purple-50 p-5 shadow-2xl md:p-12 lg:p-16 dark:from-gray-900 dark:to-gray-800">
2      <div class="absolute inset-0 -z-10 overflow-hidden">
3        <svg
4          class="absolute top-0 left-[max(50%,25rem)] h-[64rem] w-[128rem] -translate-x-1/2 stroke-indigo-200 [mask-image:radial-gradient(64rem_64rem_at_top,white,transparent)] dark:stroke-gray-700"
5          aria-hidden="true"
6        >
7          <defs>
8            <pattern
9              id="e813992c-7d03-4cc4-a2bd-151760b470a0"
10              width="200"