sync
This commit is contained in:
parent
c91373419e
commit
c63ee04783
SSH Key Fingerprint:
SHA256:n9dMtOPzgsD+CCerUJslEnU2dzVanbaIv0XDQVRVjeg
13
src/components/About.astro
Normal file
13
src/components/About.astro
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
import SinglePage from "../layouts/SinglePage.astro"
|
||||
|
||||
import { dictionary } from "../i18n/dictionary";
|
||||
import AboutModule from "./AboutModule.astro";
|
||||
const { title, description } = dictionary[Astro.currentLocale];
|
||||
---
|
||||
<SinglePage>
|
||||
<div class="h-full max-h-dvh max-w-full grid grid-rows-3 gap-4">
|
||||
<AboutModule row="0" image="/temp.jpg"/>
|
||||
<AboutModule row="1" image="/temp.jpg" flipped />
|
||||
<AboutModule row="2" image="/temp.jpg" alt="image"/>
|
||||
</SinglePage>
|
||||
29
src/components/AboutModule.astro
Normal file
29
src/components/AboutModule.astro
Normal file
@ -0,0 +1,29 @@
|
||||
---
|
||||
const { row, flipped, image, alt } = Astro.props;
|
||||
---
|
||||
|
||||
<div class={`rows-start-${row} row-span-1 h-full w-full`}>
|
||||
<div class="grid grid-cols-3 h-full w-full gap-4">
|
||||
{
|
||||
flipped ? (
|
||||
<>
|
||||
<div class="bg-red-500 rounded-lg col-start-0 col-span-2 ">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="bg-yellow-500 h-full rounded-lg col-start-3 pb-50">
|
||||
<img src={image} alt={alt} class="object-cover h-full w-full rounded-lg"/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div class="h-full rounded-lg col-start-0">
|
||||
<img src={image} alt={alt} class="object-cover rounded-lg"/>
|
||||
</div>
|
||||
<div class="bg-red-500 rounded-lg col-start-2 col-span-2">
|
||||
<slot />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@ -1,23 +1,39 @@
|
||||
---
|
||||
import SinglePage from "../layouts/SinglePage.astro"
|
||||
import SinglePage from "../layouts/SinglePage.astro";
|
||||
|
||||
import { dictionary } from "../i18n/dictionary";
|
||||
const { title, description } = dictionary[Astro.currentLocale];
|
||||
---
|
||||
|
||||
<SinglePage>
|
||||
<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
|
||||
<div class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 h-full p-2 sm:p-6">
|
||||
<!-- Hero Image -->
|
||||
<div class="w-full flex justify-center mt-20">
|
||||
<img src="/temp.jpg" alt="" class="rounded-full"> <!-- https://loremflickr.com/g/200/200/cat,girl/all?lock=135 -->
|
||||
</div>
|
||||
<!-- Hero Text -->
|
||||
<div class="mt-[6rem]">
|
||||
<h1 class="text-accent text-4xl w-full text-center font-extrabold">Lorem Ipsum</h1>
|
||||
<h2 class="text-content text-lg w-full text-center mt-[3.2rem]">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A suscipit facilis doloribus, dicta cupiditate sint nisi ad explicabo cumque dolorem quaerat hic aliquid. Iste quia aspernatur nam distinctio, animi dolorum?</h2>
|
||||
</div>
|
||||
<!-- Call action buttons -->
|
||||
<div class="mt-[5.5rem] w-full grid justify-around grid-cols-2">
|
||||
<button type="button" class="text-3xl bg-accent text-bkg p-1 rounded-md bg-opacity-75 hover:bg-opacity-100 m-2">Lorem</button>
|
||||
<button type="button" class="text-2xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content ">ipsum dolor</button>
|
||||
</div>
|
||||
<!-- Hero Image -->
|
||||
<div class="w-full flex justify-center mt-20">
|
||||
<img src="/temp.jpg" alt="" class="rounded-full" />
|
||||
<!-- https://loremflickr.com/g/200/200/cat,girl/all?lock=135 -->
|
||||
</div>
|
||||
<!-- Hero Text -->
|
||||
<div class="mt-[6rem]">
|
||||
<h1 class="text-accent text-4xl w-full text-center font-extrabold">
|
||||
Lorem Ipsum
|
||||
</h1>
|
||||
<h2 class="text-content text-lg w-full text-center mt-[3.2rem]">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. A suscipit
|
||||
facilis doloribus, dicta cupiditate sint nisi ad explicabo cumque
|
||||
dolorem quaerat hic aliquid. Iste quia aspernatur nam distinctio,
|
||||
animi dolorum?
|
||||
</h2>
|
||||
</div>
|
||||
<!-- Call action buttons -->
|
||||
<div class="mt-[5.5rem] w-full grid justify-around grid-cols-2">
|
||||
<button
|
||||
type="button"
|
||||
class="text-3xl bg-accent text-bkg p-1 rounded-md bg-opacity-75 hover:bg-opacity-100 m-2"
|
||||
>Lorem</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="text-2xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content"
|
||||
>ipsum dolor</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</SinglePage>
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
<div class="snap-start w-screen h-screen">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="snap-start w-screen h-screen overflow-clip">
|
||||
<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
|
||||
<div
|
||||
class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 h-full p-2 sm:p-6"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
import MainLayout from "../../layouts/MainLayout.astro";
|
||||
import Hero from "../../components/Hero.astro";
|
||||
import About from "../../components/About.astro";
|
||||
|
||||
//@ts-ignore
|
||||
import { dictionary } from "../../i18n/dictionary";
|
||||
@ -14,6 +15,6 @@ export async function getStaticPaths() {
|
||||
---
|
||||
<MainLayout title={title} description={description} lang={Astro.currentLocale} themeOverride="dark">
|
||||
<Hero />
|
||||
<Hero />
|
||||
<About />
|
||||
<Hero />
|
||||
</MainLayout>
|
||||
Loading…
Reference in New Issue
Block a user