feat: imporvement pass over sections

src/components/buttons/GiteaButton.astro

@@ -21,7 +21,7 @@ const { title, url } = Astro.props;
       class="h-4 w-4 md:h-6 md:w-6"
     />
     <span class="ml-2">
-      {title}
+      Continue to Gitea
     </span>
     <Icon
       name="mdi:keyboard-arrow-right"

src/components/sections/FeaturesSection.astro

@@ -8,9 +8,7 @@ const global = await directus.request(readSingleton('site_global'));
 ---
 
 <section class="mx-auto mb-20 max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
-  <div
+  <div class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0 lg:gap-x-24">
-    class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0 lg:gap-x-24"
-  >
     <div class="max-w-5xl sm:px-6 lg:px-8">
       <div class="flex flex-wrap gap-6 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 justify-center">
         <FeaturesCard

src/components/sections/GiteaSection.astro

@@ -1,22 +1,20 @@
 ---
 import GiteaButton from '@components/buttons/GiteaButton.astro';
 
-const { title, subTitle, url } = Astro.props;
-const btnTitle = 'Continue to Gitea';
-
 interface Props {
   title: string;
   subTitle?: string;
   url?: string;
 }
+
+const { title, subTitle, url } = Astro.props;
 ---
 
 <section class="lg:px- relative mx-auto mb-20 max-w-340 px-4 pt-30 pb-30 sm:px-6">
-  <div
+  <!-- Animated shapes -->
-    class="smooth-reveal absolute top-[55%] left-0 scale-90 md:top-[20%] xl:top-[25%] xl:left-[10%]"
+  <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"
+      class="gitea-animate-hover gitea-animate-hover-1"
       width="64"
       height="64"
       fill="none"
@@ -46,7 +44,7 @@ interface Props {
   </div>
   <div class="smooth-reveal absolute top-0 left-[85%] scale-75">
     <svg
-      class="animate-hover animate-hover-2"
+      class="gitea-animate-hover gitea-animate-hover-2"
       width="64"
       height="64"
       fill="none"
@@ -80,11 +78,9 @@ interface Props {
         d="M10.5 19H9M15 19h-1.5"></path>
     </svg>
   </div>
-  <div
+  <div class="smooth-reveal absolute bottom-[5%] left-[60%] scale-[.6] xl:bottom-[15%] xl:left-[35%]">
-    class="smooth-reveal absolute bottom-[5%] left-[60%] scale-[.6] xl:bottom-[15%] xl:left-[35%]"
-  >
     <svg
-      class="animate-hover animate-hover-3"
+      class="gitea-animate-hover gitea-animate-hover-3"
       width="64"
       height="64"
       fill="none"
@@ -106,59 +102,54 @@ interface Props {
       ></path>
     </svg>
   </div>
-  <!-- Hero Section Heading -->
+  <!-- Heading -->
   <div class="smooth-reveal-2 mx-auto mt-5 max-w-xl text-center">
-    <h2
+    <h1 class="card-text-header block">
-      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>
+    </h1>
   </div>
-  <!-- Hero Section Sub-heading -->
+  <!-- Sub-heading -->
   <div class="smooth-reveal-2 mx-auto mt-5 max-w-3xl text-center">
-    {
+    {subTitle && (
-      subTitle && (
+    <p class="card-text-header-description">
-        <p class="text-lg text-pretty text-neutral-600 dark:text-neutral-400">{subTitle}</p>
+      {subTitle}
-      )
+    </p>
-    }
+    )}
   </div>
-  <!-- Github Button -->
+  <!-- Gitea Button -->
-  {
+  {url && (
-    url && (
+  <div class="smooth-reveal-2 flex justify-center mt-8 gap-3">
-      <div class="smooth-reveal-2 mt-8 flex justify-center gap-3">
+    <GiteaButton url={url}/>
-        <GiteaButton url={url} title={btnTitle} />
+  </div>
-      </div>
+  )}
-    )
-  }
 </section>
 
 <style>
-  @keyframes animate-hover {
+  @keyframes gitea-animate-hover {
     from {
       transform: translateY(15px);
     }
-
     to {
       transform: translateY(-15px);
     }
   }
 
-  .animate-hover {
+  .gitea-animate-hover {
-    animation: animate-hover ease-in-out;
+    animation: gitea-animate-hover ease-in-out;
 
     animation-iteration-count: infinite;
     animation-direction: alternate;
   }
 
-  .animate-hover-1 {
+  .gitea-animate-hover-1 {
     animation-duration: 5s;
   }
 
-  .animate-hover-2 {
+  .gitea-animate-hover-2 {
     animation-duration: 5.5s;
   }
 
-  .animate-hover-3 {
+  .gitea-animate-hover-3 {
     animation-duration: 6s;
   }
 </style>

src/components/sections/HeaderSection.astro

@@ -15,21 +15,17 @@ const { title, subTitle, btnExists, btnTitle, btnURL } = Astro.props;
 <section class="mx-auto mt-10 px-4 sm:px-6 lg:px-8 lg:pt-10 2xl:max-w-full">
   <div class="flex-wrap md:flex md:items-center md:justify-between">
     <div class="w-full md:w-auto">
-      <h1
+      <h1 class="smooth-reveal card-text-header block lg:text-6xl">
-        class="smooth-reveal block text-4xl font-bold tracking-tight text-balance text-neutral-800 md:text-5xl lg:text-6xl dark:text-neutral-200"
-      >
         {title}
       </h1>
-      <p class="smooth-reveal mt-4 text-lg text-pretty text-neutral-600 dark:text-neutral-400">
+      <p class="smooth-reveal card-text-header-description mt-4">
         {subTitle}
       </p>
-      {
+      {btnExists ? (
-        btnExists ? (
+      <div class="smooth-reveal mt-4 md:mt-8">
-          <div class="smooth-reveal mt-4 md:mt-8">
+        <GoLinkPrimary title={btnTitle} url={btnURL}/>
-            <GoLinkPrimary title={btnTitle} url={btnURL} />
+      </div>
-          </div>
+      ) : null}
-        ) : null
-      }
     </div>
   </div>
 </section>

src/components/sections/HeroSection.astro

@@ -3,9 +3,6 @@ import GoLinkPrimary from '@components/buttons/GoLinkPrimary.astro';
 import GoLinkSecondary from '@components/buttons/GoLinkSecondary.astro';
 import Image from '@components/ui/images/Image.astro';
 
-const { title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL, src, alt } =
-  Astro.props;
-
 interface Props {
   title: string;
   subTitle?: string;
@@ -18,49 +15,42 @@ interface Props {
   rounded?: boolean;
 }
 
+const { title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL, src, alt } = Astro.props;
+
 const roundedClasses = Astro.props.rounded ? "rounded-xl" : null;
 ---
 
-<section
+<section class="mx-auto grid max-w-340 gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full">
-  class="mx-auto grid max-w-340 gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full"
->
   <div>
-    <h1
+    <h1 class="smooth-reveal card-text-header block lg:text-7xl">
-      class="smooth-reveal block text-3xl font-bold tracking-tight text-balance text-neutral-800 sm:text-4xl lg:text-7xl lg:leading-tight dark:text-neutral-200"
-    >
       <Fragment set:html={title} />
     </h1>
-    {
+    {subTitle && (
-      subTitle && (
+    <p class="smooth-reveal card-text-header-description lg:w-4/5 mt-6">
-        <p class="smooth-reveal mt-6 text-lg leading-relaxed text-pretty text-neutral-700 lg:w-4/5 dark:text-neutral-300">
+      {subTitle}
-          {subTitle}
+    </p>
-        </p>
+    )}
-      )
+    <div class="smooth-reveal grid sm:inline-flex mt-7 w-full gap-3">
-    }
-
-    <div class="smooth-reveal mt-7 grid w-full gap-3 sm:inline-flex">
       {primaryBtn && <GoLinkPrimary title={primaryBtn} url={primaryBtnURL} />}
       {secondaryBtn && <GoLinkSecondary title={secondaryBtn} url={secondaryBtnURL} />}
     </div>
   </div>
 
-  <div class="smooth-reveal-fade hidden w-full md:block">
+  <div class="smooth-reveal-fade md:block w-full hidden">
-    <div class="top-12 flex w-full justify-center overflow-hidden md:ml-4">
+    <div class="flex justify-center w-full top-12 md:ml-4 overflow-hidden">
-      {
+      {src && alt && (
-        src && alt && (
+      <Image
-          <Image
+        src={src}
-            src={src}
+        alt={alt}
-            alt={alt}
+        class={`h-full w-105 scale-100 object-cover object-center ${roundedClasses}`}
-            class={`h-full w-[420px] scale-100 object-cover object-center ${roundedClasses}`}
+        draggable="false"
-            draggable="false"
+        loading="eager"
-            loading="eager"
+        format="webp"
-            format="webp"
+        quality="low"
-            quality="low"
+        widths={[840]}
-            widths={[840]}
+        disableBlur={true}
-            disableBlur={true}
+      />
-          />
+      )}
-        )
-      }
     </div>
   </div>
 </section>

src/components/sections/WeatherSection.astro

@@ -8,7 +8,7 @@ const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, ti
 
 <section class="mx-auto mb-20 max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
   <div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
-    <h1 class="card-text-header smooth-reveal block font-bold md:leading-tight">
+    <h1 class="smooth-reveal card-text-header block">
       Weather in my Area 
     </h1>
     <div class="smooth-reveal mx-auto mt-5 max-w-3xl text-center">

src/styles/utilities.css

@@ -73,8 +73,8 @@
 
 @utility card-text-header {
   @apply text-header
-         md:text-5xl
+         text-4xl md:text-5xl
-         text-4xl
+         font-bold leading-tight tracking-tight text-balance
 }
 
 @utility card-text-header-minor {
@@ -87,7 +87,7 @@
 @utility card-text-header-description {
   @apply text-primary
          text-lg
-         text-pretty
+         text-pretty leading-relaxed
 }
 
 @utility card-text-title {