merge in new changes

src/components/ui/sections/HeroSectionAlt.astro

@@ -0,0 +1,164 @@
+---
+import GiteaBtn from '@components/ui/buttons/GiteaBtn.astro';
+
+const { title, subTitle, url } = Astro.props;
+const btnTitle = 'Continue to Gitea';
+
+interface Props {
+  title: string;
+  subTitle?: string;
+  url?: string;
+}
+---
+
+<section class="lg:px- relative mx-auto mb-20 max-w-[85rem] px-4 pt-30 pb-30 sm:px-6">
+  <div
+    class="smooth-reveal absolute top-[55%] left-0 scale-90 md:top-[20%] xl:top-[25%] xl:left-[10%]"
+  >
+    <svg
+      class="animate-hover animate-hover-1"
+      width="64"
+      height="64"
+      fill="none"
+      stroke-width="1.5"
+      color="#ea580c"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="#ea580c"
+        stroke="#ea580c"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 23a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM3 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM3 18a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+      ></path>
+      <path
+        stroke="#ea580c"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M21 7.353v9.294a.6.6 0 0 1-.309.525l-8.4 4.666a.6.6 0 0 1-.582 0l-8.4-4.666A.6.6 0 0 1 3 16.647V7.353a.6.6 0 0 1 .309-.524l8.4-4.667a.6.6 0 0 1 .582 0l8.4 4.667a.6.6 0 0 1 .309.524Z"
+      ></path>
+      <path
+        stroke="#ea580c"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m3.528 7.294 8.18 4.544a.6.6 0 0 0 .583 0l8.209-4.56M12 21v-9"></path>
+    </svg>
+  </div>
+  <div class="smooth-reveal absolute top-0 left-[85%] scale-75">
+    <svg
+      class="animate-hover animate-hover-2"
+      width="64"
+      height="64"
+      fill="none"
+      stroke-width="1.5"
+      color="#fbbf24"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="#fbbf24"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"></path>
+      <path
+        fill="#fbbf24"
+        stroke="#fbbf24"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
+      <path stroke="#fbbf24" stroke-linecap="round" stroke-linejoin="round" d="M5 10.5V9M5 15v-1.5"
+      ></path>
+      <path
+        fill="#fbbf24"
+        stroke="#fbbf24"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M5 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM19 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
+      <path
+        stroke="#fbbf24"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M10.5 19H9M15 19h-1.5"></path>
+    </svg>
+  </div>
+  <div
+    class="smooth-reveal absolute bottom-[5%] left-[60%] scale-[.6] xl:bottom-[15%] xl:left-[35%]"
+  >
+    <svg
+      class="animate-hover animate-hover-3"
+      width="64"
+      height="64"
+      fill="none"
+      stroke-width="1.5"
+      color="#a3a3a3"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="#a3a3a3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M5.164 17c.29-1.049.67-2.052 1.132-3M11.5 7.794A16.838 16.838 0 0 1 14 6.296M4.5 22a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"
+      ></path>
+      <path
+        stroke="#a3a3a3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M9.5 12a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5ZM19.5 7a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"
+      ></path>
+    </svg>
+  </div>
+  <!-- Hero Section Heading -->
+  <div class="smooth-reveal-2 mx-auto mt-5 max-w-xl text-center">
+    <h2
+      class="block text-4xl leading-tight font-bold tracking-tight text-balance text-neutral-800 md:text-5xl lg:text-5xl dark:text-neutral-200"
+    >
+      {title}
+    </h2>
+  </div>
+  <!-- Hero Section Sub-heading -->
+  <div class="smooth-reveal-2 mx-auto mt-5 max-w-3xl text-center">
+    {
+      subTitle && (
+        <p class="text-lg text-pretty text-neutral-600 dark:text-neutral-400">{subTitle}</p>
+      )
+    }
+  </div>
+  <!-- Github Button -->
+  {
+    url && (
+      <div class="smooth-reveal-2 mt-8 flex justify-center gap-3">
+        <GiteaBtn url={url} title={btnTitle} />
+      </div>
+    )
+  }
+</section>
+
+<style>
+  @keyframes animate-hover {
+    from {
+      transform: translateY(15px);
+    }
+
+    to {
+      transform: translateY(-15px);
+    }
+  }
+
+  .animate-hover {
+    animation: animate-hover ease-in-out;
+
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+  }
+
+  .animate-hover-1 {
+    animation-duration: 5s;
+  }
+
+  .animate-hover-2 {
+    animation-duration: 5.5s;
+  }
+
+  .animate-hover-3 {
+    animation-duration: 6s;
+  }
+</style>