big card component
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user