76 lines
1.9 KiB
Plaintext
76 lines
1.9 KiB
Plaintext
---
|
|
import { Image } from "astro:assets";
|
|
|
|
import SiteLayout from "../layouts/SiteLayout.astro";
|
|
import SolarIcon from "../assets/solar.svg";
|
|
import SolianIcon from "../assets/solian.png";
|
|
---
|
|
|
|
<SiteLayout>
|
|
<div class="container px-12 mx-auto">
|
|
<div class="landing-slide">
|
|
<div class="landing-slide-first">
|
|
<div
|
|
class="aspect-square w-[128px] bg-neutral rounded-xl mb-6 ml-[-4px] flex justify-center items-center"
|
|
>
|
|
<Image
|
|
src={SolarIcon}
|
|
alt="Studio Avatar"
|
|
class="w-[90px] h-[96px] block"
|
|
/>
|
|
</div>
|
|
|
|
<h2 class="text-2xl">Hi, there!</h2>
|
|
<h1 class="text-6xl font-bold">We're Solsynth</h1>
|
|
|
|
<section class="mt-8 text-lg">
|
|
<p>
|
|
We're the world youngest Software <strike>Company</strike> Studio who
|
|
make the software that everyone love.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="landing-slide-second">
|
|
<div class="card w-full md:w-5/6 bg-base-100 shadow-xl">
|
|
<div class="card-body pb-0">
|
|
<h2 class="card-title">Products!</h2>
|
|
<p>Take a look of all our lovely products!</p>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="card-body pt-0 grid grid-cols-4">
|
|
<a href="/products/solar-network">
|
|
<Image
|
|
src={SolianIcon}
|
|
alt="Solar Network"
|
|
class="min-w-[64px] min-h-[64px] w-[64px] h-[64px] aspect-square block"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SiteLayout>
|
|
|
|
<style>
|
|
.landing-slide {
|
|
gap: 1rem;
|
|
height: 40rem;
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
@media (min-width: 720px) {
|
|
.landing-slide {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.landing-slide-second {
|
|
display: flex;
|
|
justify-content: end;
|
|
}
|
|
}
|
|
</style>
|