feat(landing-page): make splash presentable

This commit is contained in:
Ayo 2022-11-07 11:42:25 +01:00
parent 0775cf571f
commit 7dc741e3b3
5 changed files with 11 additions and 13 deletions

View file

@ -21,9 +21,7 @@ const socials = [
class="absolute bottom-0 z-10 flex items-center justify-between w-full px-8 py-4 text-white border-b border-transparent" class="absolute bottom-0 z-10 flex items-center justify-between w-full px-8 py-4 text-white border-b border-transparent"
> >
<a class="flex items-center gap-3 hover:!text-default" href="#"> <a class="flex items-center gap-3 hover:!text-default" href="#">
<h1 class="sr-only">Astro</h1> <h1 class="text-">Astro Reactive</h1>
<Icon name="logomark" class="h-10" />
<Icon name="wordmark" class="hidden h-4 sm:block" />
</a> </a>
<div> <div>
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">

View file

@ -1,7 +1,7 @@
--- ---
import Header from "~/components/header.astro"; import Header from "~/components/header.astro";
// import Icon from "astro-icon"; // import Icon from "astro-icon";
import Splash from "~/components/splash.astro"; import Splash from "~/sections/splash.astro";
import "~/styles/index.css"; import "~/styles/index.css";
import AstroSection from "~/sections/astro-section.astro"; import AstroSection from "~/sections/astro-section.astro";
@ -78,6 +78,6 @@ const description =
> >
<Header /> <Header />
<Splash /> <Splash />
<AstroSection /> <!--AstroSection /-->
</body> </body>
</html> </html>

View file

@ -1,10 +1,10 @@
--- ---
import { Icon } from "astro-icon"; import { Icon } from "astro-icon";
import Starfield from "~/components/starfield.astro"; // import Starfield from "~/components/starfield.astro";
--- ---
<section class="h-screen flex flex-col px-10 astro relative"> <section class="h-screen flex flex-col px-10 astro relative">
<Starfield /> <!--Starfield /-->
<div class="flex"> <div class="flex">
<div class="flex-1"> <div class="flex-1">
<h1 class="text-6xl font-extrabold gradient-text"> <h1 class="text-6xl font-extrabold gradient-text">

View file

@ -1,7 +1,7 @@
--- ---
import { generateImage } from "astro-eleventy-img"; import { generateImage } from "astro-eleventy-img";
import { Icon } from "astro-icon"; import { Icon } from "astro-icon";
// import Starfield from "~/components/starfield.astro"; import Starfield from "~/sections/starfield.astro";
import Copynpm from "~/components/copynpm.astro"; import Copynpm from "~/components/copynpm.astro";
const widths = [450, 800]; const widths = [450, 800];
@ -19,8 +19,8 @@ const webpSrcset = webp.map(({ srcset }) => srcset).join(",");
const pngSrcset = png.map(({ srcset }) => srcset).join(","); const pngSrcset = png.map(({ srcset }) => srcset).join(",");
--- ---
<section class="relative h-full bg-black"> <section class="h-screen flex flex-col px-10 astro relative">
<!-- <Starfield /> --> <Starfield />
<div <div
class="relative flex flex-col-reverse justify-end pt-16 h-full astro-lg:grid-cols-2 place-items-center astro-lg:grid astro-lg:pt-0 astro-img:pt-10" class="relative flex flex-col-reverse justify-end pt-16 h-full astro-lg:grid-cols-2 place-items-center astro-lg:grid astro-lg:pt-0 astro-img:pt-10"
> >
@ -32,9 +32,9 @@ const pngSrcset = png.map(({ srcset }) => srcset).join(",");
<div <div
class="font-extrabold tracking-tighter text-center text-8xl gradient-text" class="font-extrabold tracking-tighter text-center text-8xl gradient-text"
> >
Build fast Build Astro
<br /> websites, <br />Applications
<br /> faster. <br />with Reactive UIs
</div> </div>
</h2> </h2>
<div <div