SteamWar/Website
10
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Add 3D Card Effect

Browse Source
This commit is contained in:
Chaoscaot
2024-02-21 23:59:14 +01:00
parent 568e8dbf7d
commit 7448a77bb1
2 changed files with 80 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/index.astro
View File

@@ -2,6 +2,7 @@
import NavbarLayout from "@layouts/NavbarLayout.astro";
import {Image} from "astro:assets";
import Card from "@components/Card.svelte";
import localBau from "@images/2023-10-08_20.43.43.png";
import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons";
import {t} from "astro-i18n";
@@ -113,23 +114,23 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
</div>
<section class="w-full flex flex-col items-center justify-center shadow-2xl rounded-b-2xl pb-8">
<div class="py-10 flex flex-col lg:flex-row">
<div class="card">
<Card>
<Archive heigth="64" width="64"/>
<h1>{t("home.benefits.historic.title")}</h1>
<p>{t("home.benefits.historic.description.1")}</p>
<p>{t("home.benefits.historic.description.2")}</p>
</div>
<div class="card">
</Card>
<Card>
<Rocket heigth="64" width="64"/>
<h1>{t("home.benefits.server.title")}</h1>
<p>{t("home.benefits.server.description")}</p>
</div>
<div class="card">
</Card>
<Card>
<Bell heigth="64" width="64"/>
<h1>{t("home.benefits.events.title")}</h1>
<p>{t("home.benefits.events.description.1")}</p>
<p>{t("home.benefits.events.description.2")}</p>
</div>
</Card>
</div>
<a class="btn px-8 flex" href={l("/about")}>{t("home.benefits.read")}
<CaretRight width="24" heigth="24"/>
@@ -141,16 +142,14 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
<h2 class="dark:text-white text-4xl font-bold">{t("home.prefix." + key)}</h2>
<div class="flex my-4 md:flex-row flex-col flex-wrap justify-center">
{value.map(v => (
<div class="bg-zinc-50 border-gray-100 py-24 px-12 border-2 m-2 transition duration-300 ease-in-out rounded-xl shadow-lg
hover:scale-105 hover:shadow-2xl
dark:bg-neutral-900 dark:border-gray-800 dark:text-white">
<Card extraClasses="py-24 px-12" client:idle>
<figure class="flex flex-col items-center">
<figcaption class="text-center mb-4 text-2xl">{v.name}</figcaption>
<Image src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${v.uuid}`}
class="transition duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl"
alt={v.name + "s bust"} width="150" height="150"/>
</figure>
</div>
</Card>
))}
</div>
</div>