enricobuehler
0dfa43c4ed
All checks were successful
continuous-integration/drone/push Build is passing
75 lines
2.0 KiB
Plaintext
75 lines
2.0 KiB
Plaintext
---
|
|
import CardFeature from "@/components/Cards/CardFeature.astro";
|
|
import Heading from "@/components/Heading.astro";
|
|
type Feature = {
|
|
title: string;
|
|
iconName: string;
|
|
description: string;
|
|
};
|
|
|
|
const features: Array<Feature> = [
|
|
{
|
|
title: "Fast",
|
|
iconName: "Fast",
|
|
description:
|
|
"Thanks to rust with multithreading and skia we're really fast!",
|
|
},
|
|
{
|
|
title: "Extensible",
|
|
iconName: "Extensible",
|
|
description:
|
|
"Modular structured and thanks to our dual language approach you even decide in which language you want to extend!",
|
|
},
|
|
{
|
|
title: "Community driven & Free",
|
|
iconName: "Open",
|
|
description:
|
|
"The project is MIT licensed and we're open to new ideas for further development. Also since this product is not profit driven we won't screw you over!",
|
|
},
|
|
];
|
|
---
|
|
|
|
<div>
|
|
<div class="p-main py-0">
|
|
<Heading>Core Features & Values</Heading>
|
|
</div>
|
|
<div
|
|
id="features-cards-container"
|
|
class="flex flex-row flex-nowrap overflow-x-auto snap-x snap-mandatory gap-card overflow-y-clip p-main snap-center"
|
|
>
|
|
{
|
|
features.map((feature) => (
|
|
<CardFeature
|
|
iconName={feature.iconName}
|
|
title={feature.title}
|
|
description={feature.description}
|
|
/>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
import { animate, inView, stagger } from "motion";
|
|
import { ease } from "@unom/style";
|
|
|
|
const cardsContainer = document.getElementById("features-cards-container");
|
|
|
|
const cards = document.querySelectorAll("#features-cards-container .card");
|
|
|
|
if (cardsContainer) {
|
|
inView(cardsContainer, () => {
|
|
animate(
|
|
cards,
|
|
{
|
|
scale: [0.8, 1],
|
|
opacity: [0, 1],
|
|
},
|
|
{ ...ease.quint(0.8).out, delay: stagger(0.1) }
|
|
);
|
|
});
|
|
}
|
|
|
|
console.log(cardsContainer);
|
|
</script>
|