big card component

This commit is contained in:
2025-06-22 00:46:31 +02:00
parent 470a53484b
commit 6c48ed2925
2 changed files with 14 additions and 7 deletions

View File

@@ -2,9 +2,12 @@
// BigCard component - configurable card with link
interface Props {
url: string;
title: string;
description: string;
ctaText: string;
}
const { url } = Astro.props;
const { url, title, description, ctaText } = Astro.props;
---
<div class="max-w-4xl mx-auto">
@@ -20,18 +23,17 @@ const { url } = Astro.props;
<!-- Title -->
<h2 class="text-4xl font-bold mb-4 group-hover:text-white transition-colors">
Pole Elements
{title}
</h2>
<!-- Description -->
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto leading-relaxed">
Explore a comprehensive collection of pole dance elements, techniques, and combinations.
From basic spins to advanced tricks, discover everything you need to master pole sport.
{description}
</p>
<!-- CTA Button -->
<div class="inline-flex items-center space-x-2 bg-white/20 backdrop-blur-sm rounded-full px-8 py-4 group-hover:bg-white/30 transition-all duration-300">
<span class="text-lg font-semibold">Explore Elements</span>
<span class="text-lg font-semibold">{ctaText}</span>
<svg class="w-5 h-5 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>

View File

@@ -1,13 +1,18 @@
---
// Import necessary components and utilities
import Layout from "../layouts/Layout.astro";
import ElementsCard from "../components/ElementsCard.astro";
import BigCard from "../components/BigCard.astro";
---
<Layout title="Pole Elements" description="Pole Elements">
<div class="container mx-auto p-4">
<div class="py-12">
<ElementsCard url="/elements" />
<BigCard
url="/elements"
title="Pole Elements"
description="Explore a comprehensive collection of pole dance elements, techniques, and combinations. From basic spins to advanced tricks, discover everything you need to master pole sport."
ctaText="Explore Elements"
/>
</div>
</div>
</Layout>