From 9b5d157267bb5d38da8ce802da1576873ae3c2b9 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Mon, 12 Feb 2024 17:17:04 +0400
Subject: [PATCH] Update website configuration and improve UI

The website's configuration is updated with new site URL and vercelStatic adapter modified with image configuration. The UI is also enhanced, with color and aspect ratio adjustments in PricingSection and TabContent. Moreover, image sizes in ClientsSection are regularized.
---
 astro.config.mjs                          |  9 ++++++--
 src/components/ClientsSection.astro       | 27 ++++++++++-------------
 src/components/PricingSection.astro       |  2 +-
 src/components/ui/blocks/TabContent.astro |  2 +-
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 79dbadb..9f81aec 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -5,8 +5,13 @@ import sitemap from "@astrojs/sitemap";
 
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://screwfast.uk',
+  site: 'https://screw-fast.vercel.app',
   integrations: [tailwind(), sitemap()],
   output: 'static',
-  adapter: vercelStatic(),
+  adapter: vercelStatic({
+    imagesConfig: {
+      sizes: [400, 600, 800, 1000, 1200, 1600, 2000],
+    },
+    imageService: true,
+  }),
 });
\ No newline at end of file
diff --git a/src/components/ClientsSection.astro b/src/components/ClientsSection.astro
index b9fa9fc..68dc1c1 100644
--- a/src/components/ClientsSection.astro
+++ b/src/components/ClientsSection.astro
@@ -1,9 +1,10 @@
 ---
 /* `title` variable used to customise the heading. */
-const title:string = "Trusted by Industry Leaders";
+const title: string = "Trusted by Industry Leaders";
 
 /* `subTitle` variable used to customise the sub-heading text. */
-const subTitle:string = "Experience the reliability chosen by industry giants.";
+const subTitle: string =
+  "Experience the reliability chosen by industry giants.";
 
 /*
   In the above, the title and subTitle attributes are variables part of the ClientsSection component.
@@ -30,9 +31,8 @@ const subTitle:string = "Experience the reliability chosen by industry giants.";
     <!-- Clients Group SVGs -->
     <!-- First -->
     <svg
-      class="mx-auto h-auto w-auto py-3 sm:mx-0 lg:py-5"
-      width="150"
-      height="38"
+      class="mx-auto h-auto w-24 py-3 sm:mx-0 md:w-32 lg:w-40 lg:py-5"
+      viewBox="0 0 150 38"
       fill="none"
     >
       <mask
@@ -2428,9 +2428,8 @@ const subTitle:string = "Experience the reliability chosen by industry giants.";
 
     <!-- Second -->
     <svg
-      class="mx-auto h-auto w-auto py-3 sm:mx-0 lg:py-5"
-      width="150"
-      height="40"
+      class="mx-auto h-auto w-24 py-3 sm:mx-0 md:w-32 lg:w-40 lg:py-5"
+      viewBox="0 0 150 40"
       fill="none"
     >
       <path
@@ -2456,9 +2455,8 @@ const subTitle:string = "Experience the reliability chosen by industry giants.";
 
     <!-- Third -->
     <svg
-      class="mx-auto h-auto w-auto py-3 sm:mx-0 lg:py-5"
-      width="150"
-      height="39"
+      class="mx-auto h-auto w-24 py-3 sm:mx-0 md:w-32 lg:w-40 lg:py-5"
+      viewBox="0 0 150 39"
       fill="none"
     >
       <g clip-path="url(#a)">
@@ -2491,12 +2489,11 @@ const subTitle:string = "Experience the reliability chosen by industry giants.";
         </clipPath>
       </defs>
     </svg>
-    
+
     <!-- Fourth -->
     <svg
-      class="mx-auto h-auto w-auto py-3 sm:mx-0 lg:py-5"
-      width="83"
-      height="42"
+      class="mx-auto h-auto w-24 py-3 sm:mx-0 md:w-32 lg:w-40 lg:py-5"
+      viewBox="0 0 150 42"
       fill="none"
     >
       <path
diff --git a/src/components/PricingSection.astro b/src/components/PricingSection.astro
index 6d2695e..f94e635 100644
--- a/src/components/PricingSection.astro
+++ b/src/components/PricingSection.astro
@@ -147,7 +147,7 @@ const professionalToolbox: Product = {
         <span class="text-6xl font-bold text-neutral-200"
           >{professionalToolbox.price}</span
         >
-        <span class="text-lg font-bold text-neutral-300"
+        <span class="text-lg font-bold text-orange-100"
           >{professionalToolbox.cents}</span
         >
         <span class="ms-3 text-orange-200"
diff --git a/src/components/ui/blocks/TabContent.astro b/src/components/ui/blocks/TabContent.astro
index 2d37967..51e1353 100644
--- a/src/components/ui/blocks/TabContent.astro
+++ b/src/components/ui/blocks/TabContent.astro
@@ -33,7 +33,7 @@ Example:
   <Image
     src={src}
     alt={alt}
-    class={`${second ? "shadow-xl aspect-[5/3] bg-neutral-300 dark:bg-neutral-600 object-cover p-3 lg:aspect-auto shadow-neutral-200 rounded-xl dark:shadow-neutral-900/[.2]" : "shadow-xl aspect-[3/2] object-cover lg:aspect-auto shadow-neutral-200 rounded-xl dark:shadow-neutral-900/[.2]"}`}
+    class={`${second ? "shadow-xl aspect-[5/4] bg-neutral-300 dark:bg-neutral-600 object-cover p-3 lg:aspect-auto shadow-neutral-200 rounded-xl dark:shadow-neutral-900/[.2]" : "shadow-xl aspect-[3/2] object-cover lg:aspect-auto shadow-neutral-200 rounded-xl dark:shadow-neutral-900/[.2]"}`}
     draggable={"false"}
   />
 </div>