Merge remote-tracking branch 'origin/dev/guerby' into dev/cedric

This commit is contained in:
cdricms
2025-01-13 18:57:23 +01:00
4 changed files with 166 additions and 1 deletions

View File

@@ -0,0 +1,63 @@
"use server"
export default async function HistoryDetails({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
const default_img: string = "https://shadcnblocks.com/images/block/placeholder-dark-1.svg"
const default_style: string = "blog-paragraph mb-5 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg"
const sub_header_style: string = "py-12 mb-3 text-pretty text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-3xl"
return (
<main className="flex flex-col w-full lg:md:py-24 sm:py-24">
<section className="container self-center max-w-2xl">
<div className="blog-title w-full h-28 justify-center">
<h1 className="mb-3 text-pretty text-3xl font-semibold lg:text-5xl">
{slug}
</h1>
</div>
<div className="content">
<div>
<h2 className={sub_header_style}>Subtitle 1</h2>
<p className={default_style}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
</p>
</div>
<div>
<img
src={default_img}
alt={slug}
className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
/>
</div>
<div>
<h2 className={sub_header_style}>Subtitle 2</h2>
<p className={default_style}>
Lorem ipsm dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
</p>
</div>
<div>
<img
src={default_img}
alt={slug}
className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
/>
</div>
<div>
<h2 className={sub_header_style}>Subtitle 3</h2>
<p className={default_style}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
</p>
<p className={default_style}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
</p>
</div>
</div>
</section>
</main>
)
}

View File

@@ -0,0 +1,9 @@
import Blog from "@/components/blog";
export default function History() {
return(
<div className="flex flex-col">
<Blog />
</div>
)
}

View File

@@ -0,0 +1,93 @@
import { ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
const posts = [
{
id: "post-1",
title: "Duis sem sem, gravida vel porttitor eu, volutpat ut arcu",
summary:
"Pellentesque eget quam ligula. Sed felis ante, consequat nec ultrices ut, ornare quis metus. Vivamus sit amet tortor vel enim sollicitudin hendrerit.",
label: "Ut varius dolor turpis",
author: "Jane Doe",
published: "1 Jan 2024",
href: "#",
image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
},
{
id: "post-2",
title: "Duis sem sem, gravida vel porttitor eu, volutpat ut arcu",
summary:
"Pellentesque eget quam ligula. Sed felis ante, consequat nec ultrices ut, ornare quis metus. Vivamus sit amet tortor vel enim sollicitudin hendrerit.",
label: "Ut varius dolor turpis",
author: "Jane Doe",
published: "1 Jan 2024",
href: "#",
image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
},
{
id: "post-3",
title: "Duis sem sem, gravida vel porttitor eu, volutpat ut arcu",
summary:
"Pellentesque eget quam ligula. Sed felis ante, consequat nec ultrices ut, ornare quis metus. Vivamus sit amet tortor vel enim sollicitudin hendrerit.",
label: "Ut varius dolor turpis",
author: "Jane Doe",
published: "1 Jan 2024",
href: "#",
image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
},
];
const Blog = () => {
return (
<section className="self-center lg:md:py-24 sm:py-12">
<div className="container flex flex-col items-center gap-16 lg:px-16">
<div className="text-center">
<h2 className="mb-3 text-pretty text-3xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl">
En savoir plus sur ce sport
</h2>
<p className="mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig
doloremque mollitia fugiat omnis! Porro facilis quo animi
consequatur. Explicabo.
</p>
<Button variant="link" className="w-full sm:w-auto">
Explore all posts
<ArrowRight className="ml-2 size-4" />
</Button>
</div>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
{posts.map((post) => (
<a
key={post.id}
href={post.href}
className="flex flex-col overflow-clip rounded-xl border border-border"
>
<div>
<img
src={post.image}
alt={post.title}
className="aspect-[16/9] h-full w-full object-cover object-center"
/>
</div>
<div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
{post.title}
</h3>
<p className="mb-3 text-muted-foreground md:mb-4 lg:mb-6">
{post.summary}
</p>
<p className="flex items-center hover:underline">
Read more
<ArrowRight className="ml-2 size-4" />
</p>
</div>
</a>
))}
</div>
</div>
</section>
);
};
export default Blog;

View File

@@ -56,7 +56,7 @@ const Testimonial = () => {
}, [api]); }, [api]);
return ( return (
<section className="py-32"> <section className="lg:md:py-24 sm:py-12">
<Carousel setApi={setApi}> <Carousel setApi={setApi}>
<CarouselContent> <CarouselContent>
{testimonials.map((testimonial) => ( {testimonials.map((testimonial) => (