mguilbert/matheoguilbert.fr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement blog subscription feature with modal and email handling

Browse Source
This commit is contained in:
Mathéo GUILBERT
2026-06-02 19:46:47 +02:00
parent 77f3c4ddbd
commit 3f985af13b
7 changed files with 108 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/blog/_components/BlogCTASection.tsx
+37 -30
View File
@@ -1,17 +1,17 @@
'use client';
import { useRef, useEffect } from 'react';
import Link from 'next/link';
import { useRef, useEffect, useState } from 'react';
import { BlogSubFormModal } from '@/components/ui/BlogSubFormModal';
type Props = {
locale: string;
title: string;
text: string;
cta: string;
};
export function BlogCTASection({ locale, title, text, cta }: Props) {
export function BlogCTASection({ title, text, cta }: Props) {
const sectionRef = useRef<HTMLDivElement>(null);
const [modalOpen, setModalOpen] = useState(false);
useEffect(() => {
const section = sectionRef.current;
@@ -36,35 +36,42 @@ export function BlogCTASection({ locale, title, text, cta }: Props) {
}, []);
return (
<div ref={sectionRef} className="w-full flex justify-center items-center pt-24 md:pt-36">
<div
className="w-full max-w-2xl reveal flex flex-col items-start gap-8 p-10 md:p-14 rounded-2xl border border-brand-brown/8 bg-white/40 transition-all duration-300 cursor-default"
style={{ transitionDelay: `120ms` }}
>
<div>
<h3 className="font-serif text-brand-brown text-left leading-[1.1] text-[clamp(1.4rem,2.2vw,1.65rem)] mb-4">
{title}
</h3>
<p className="font-sans text-sm text-left text-brand-brown/60 leading-relaxed">
{text}
</p>
</div>
<>
<div ref={sectionRef} className="pt-24 md:pt-36 px-8 md:px-14 lg:px-20 max-w-275 mx-auto">
<div
className="w-full reveal flex flex-col items-start gap-8 p-10 md:p-14 rounded-2xl border border-brand-brown/8 bg-white/40 transition-all duration-300 cursor-default"
style={{ transitionDelay: `120ms` }}
>
<div>
<h3 className="font-serif text-brand-brown text-left leading-[1.1] text-[clamp(1.4rem,2.2vw,1.65rem)] mb-4">
{title}
</h3>
<p className="font-sans text-sm text-left text-brand-brown/60 leading-relaxed">
{text}
</p>
</div>
<div className="w-full flex flex-row justify-end">
<Link href={`/${locale}/freelance`} className="group flex items-center gap-2 font-sans text-xs uppercase tracking-[0.18em] text-brand-brown border-b border-brand-brown/30 pb-0.5 hover:border-brand-brown transition-colors duration-200">
{cta}
<svg
className="w-3.5 h-3.5 group-hover:translate-x-1.5 transition-transform duration-200"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
<div className="w-full flex flex-row justify-end">
<button
onClick={() => setModalOpen(true)}
className="group flex items-center gap-2 font-sans text-xs uppercase tracking-[0.18em] text-brand-brown border-b border-brand-brown/30 pb-0.5 hover:border-brand-brown transition-colors duration-200 cursor-pointer"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</Link>
{cta}
<svg
className="w-3.5 h-3.5 group-hover:translate-x-1.5 transition-transform duration-200"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</button>
</div>
</div>
</div>
</div>
<BlogSubFormModal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
</>
);
}
app/[locale]/blog/page.tsx
-4
View File
@@ -3,7 +3,6 @@ import { BlogHero } from "@/app/[locale]/blog/_components/BlogHero";
import { BlogCTASection } from "@/app/[locale]/blog/_components/BlogCTASection";
import { ArticleList } from "@/app/[locale]/blog/[slug]/_components/ArticleList";
import { getTranslations } from "next-intl/server";
import { BlogSubFormController } from '@/components/ui/BlogSubFormController';
type props = {
params: Promise<{ locale: string }>;
@@ -16,12 +15,9 @@ export default async function BlogPage({ params }: props) {
return (
<main className="bg-brand-beige">
<BlogSubFormController />
<BlogHero />
<BlogCTASection
locale={locale}
title={t("title")}
text={t("text")}
cta={t("cta")}