oier/pole-book
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

big card component

Browse Source
This commit is contained in:
Oier Bravo
2025-06-22 00:46:31 +02:00
parent 470a53484b
commit 6c48ed2925
2 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/components/BigCard.astro
View File

@@ -2,9 +2,12 @@
// BigCard component - configurable card with link // BigCard component - configurable card with link
interface Props { interface Props {
url: string; 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"> <div class="max-w-4xl mx-auto">
@@ -20,18 +23,17 @@ const { url } = Astro.props;
<!-- Title --> <!-- Title -->
<h2 class="text-4xl font-bold mb-4 group-hover:text-white transition-colors"> <h2 class="text-4xl font-bold mb-4 group-hover:text-white transition-colors">
Pole Elements {title}
</h2> </h2>
<!-- Description --> <!-- Description -->
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto leading-relaxed"> <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. {description}
From basic spins to advanced tricks, discover everything you need to master pole sport.
</p> </p>
<!-- CTA Button --> <!-- 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"> <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"> <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> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg> </svg>

9
client/src/pages/index.astro
View File

@@ -1,13 +1,18 @@
--- ---
// Import necessary components and utilities // Import necessary components and utilities
import Layout from "../layouts/Layout.astro"; 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"> <Layout title="Pole Elements" description="Pole Elements">
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
<div class="py-12"> <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>
</div> </div>
</Layout> </Layout>