tweaking the "Used by" text

withastro · Jul 20, 2023 · 2d926fc · 2d926fc
1 parent 9c98844
commit 2d926fc
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 59 deletions.
diff --git a/src/icons/logos/nbc-news.svg b/src/icons/logos/nbc-news.svg
diff --git a/src/pages/_components/Hero.astro b/src/pages/_components/Hero.astro
@@ -5,72 +5,72 @@ import ExternalLink from "~/components/ExternalLink.astro"
 import PageTitleBlock from "~/components/PageTitleBlock.astro"
 
 const logos = [
-	{ src: "logos/google", alt: "Google Logo", class: "py-1 -mb-1 md:-mb-2 lg:-mb-2.5" },
-	{ src: "logos/microsoft", alt: "Microsoft Logo", class: "py-2" },
-	{ src: "logos/nordvpn", alt: "NordVPN Logo", class: "py-1" },
-	{ src: "logos/rokt", alt: "Rokt Logo", class: "py-2" },
-	{ src: "logos/theguardian", alt: "The Guardian Logo", class: "py-1.5" },
-	{ src: "logos/trivago", alt: "Trivago Logo", class: "py-1" },
+  { src: "logos/google", alt: "Google Logo", class: "py-1 -mb-1 md:-mb-2 lg:-mb-2.5" },
+  { src: "logos/microsoft", alt: "Microsoft Logo", class: "py-2" },
+  { src: "logos/nordvpn", alt: "NordVPN Logo", class: "py-1" },
+  { src: "logos/rokt", alt: "Rokt Logo", class: "py-2" },
+  { src: "logos/theguardian", alt: "The Guardian Logo", class: "py-1.5" },
+  { src: "logos/trivago", alt: "Trivago Logo", class: "py-1" },
 ]
 ---
 
 <section class="landing-section relative overflow-x-hidden pb-40 pt-14 sm:pt-20 lg:pt-32">
-	<div class="noise-underlay absolute inset-0"></div>
-	<PageTitleBlock
-		lg
-		body="Astro is the all-in-one web framework designed for speed. Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries."
-	>
-		<h1
-			slot="title"
-			class="heading-2 mb-10 max-w-[10ch] px-4 text-center lg:heading-1 sm:max-w-[15ch]"
-		>
-			Build the web
-			<br class="hidden sm:block" />
-			you want
-		</h1>
-	</PageTitleBlock>
+  <div class="noise-underlay absolute inset-0"></div>
+  <PageTitleBlock
+    lg
+    body="Astro is the all-in-one web framework designed for speed. Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries."
+  >
+    <h1
+      slot="title"
+      class="heading-2 mb-10 max-w-[10ch] px-4 text-center lg:heading-1 sm:max-w-[15ch]"
+    >
+      Build the web
+      <br class="hidden sm:block" />
+      you want
+    </h1>
+  </PageTitleBlock>
 
-	<div
-		class="isolate mb-14 mt-8 flex w-full justify-center gap-6 sm:mb-16 md:mb-20 lg:mb-24 xl:mb-28"
-	>
-		<ExternalLink href="https://docs.astro.build/" class="button button-white">
-			Get Started
-		</ExternalLink>
-		<div class="hidden sm:block">
-			<CodeBlock>npm create astro@latest</CodeBlock>
-		</div>
-	</div>
+  <div
+    class="isolate mb-14 mt-8 flex w-full justify-center gap-6 sm:mb-16 md:mb-20 lg:mb-24 xl:mb-28"
+  >
+    <ExternalLink href="https://docs.astro.build/" class="button button-white">
+      Get Started
+    </ExternalLink>
+    <div class="hidden sm:block">
+      <CodeBlock>npm create astro@latest</CodeBlock>
+    </div>
+  </div>
 
-	<div class="flex flex-col gap-x-6 gap-y-8 px-4 md:px-6 lg:flex-row lg:items-center">
-		<p class="body px-8 text-astro-gray-200 lg:max-w-[12rem] lg:px-0 lg:text-left xl:text-lg">
-			Used by over 100,000 developers and teams around the world:
-		</p>
-		<div class="flex flex-wrap items-center justify-center gap-x-8 gap-y-6 px-4">
-			{
-				logos.map((logo) => (
-					<Icon
-						name={logo.src}
-						aria-label={logo.alt}
-						height={48}
-						class:list={["h-8 object-contain text-white sm:h-10 lg:h-11 xl:h-12", logo.class]}
-					/>
-				))
-			}
-		</div>
-	</div>
+  <div class="flex flex-col gap-x-6 gap-y-8 px-4 md:px-6 lg:flex-row lg:items-center">
+    <p class="body px-8 text-astro-gray-200 lg:max-w-[12rem] lg:px-0 lg:text-left xl:text-lg">
+      Used by the best developers and teams around the world:
+    </p>
+    <div class="flex flex-wrap items-center justify-center gap-x-8 gap-y-6 px-4">
+      {
+        logos.map((logo) => (
+          <Icon
+            name={logo.src}
+            aria-label={logo.alt}
+            height={48}
+            class:list={["h-8 object-contain text-white sm:h-10 lg:h-11 xl:h-12", logo.class]}
+          />
+        ))
+      }
+    </div>
+  </div>
 </section>
 
 <style>
-	section::before {
-		position: absolute;
-		content: "";
-		z-index: -1;
-		top: 0%;
-		bottom: 10%;
-		width: 150%;
-		left: -25%;
-		background: url(/assets/noise.webp) repeat, linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
-		background-blend-mode: overlay;
-		mask-image: radial-gradient(rgba(0, 0, 0, 0.5), transparent 70%);
-	}
+  section::before {
+    position: absolute;
+    content: "";
+    z-index: -1;
+    top: 0%;
+    bottom: 10%;
+    width: 150%;
+    left: -25%;
+    background: url(/assets/noise.webp) repeat, linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
+    background-blend-mode: overlay;
+    mask-image: radial-gradient(rgba(0, 0, 0, 0.5), transparent 70%);
+  }
 </style>