V2 700 dynamic page migration

app/blog/[id]/page.js

@@ -0,0 +1,103 @@
+import Link from 'next/link'
+
+import { convertMarkdownToHtml, convertToStringDate } from '@/services/utils'
+import ArrowLeftIcon from '@/components/Icons/ArrowLeftIcon'
+import getAllArticle from '@/services/getAllArticle'
+import getOneArticle from '@/services/getOneArticle'
+import { Layout } from '@/components/Global/Layout'
+import Footer from '@/components/Global/Footer'
+import CTA from '@/components/Global/CTA'
+import Nav from '@/components/Global/Nav'
+
+export const dynamicParams = false
+export const revalidate = 10
+
+export const generateStaticParams = async () => {
+	const articleList = await getAllArticle()
+
+	const pathList = articleList?.map(record => ({
+		id: record.attributes.slug,
+	}))
+
+	return pathList || []
+}
+
+export const generateMetadata = async ({ params }) => {
+	const article = await getOneArticle(params.id)
+
+	const meta = article?.attributes
+	return {
+		description:
+			meta?.seo_description ??
+			'Découvrez cet article passionnant de la part de My-Makeup',
+		// seo tag canonical link
+		alternates: {
+			canonical: 'https://my-makeup.fr/blog/' + meta?.slug,
+		},
+		title: meta?.seo_title ?? 'My-Makeup',
+	}
+}
+
+const BlogArticle = async ({ params }) => {
+	const { id } = params
+	const article = await getOneArticle(id)
+	const articleWithConvertedContent = await convertMarkdownToHtml(article)
+	const articleAttributes = articleWithConvertedContent?.attributes
+
+	return (
+		<>
+			<Nav />
+			<main className={'relative'}>
+				<div
+					className={'relative mx-auto my-48 max-w-7xl px-4 md:px-8 2xl:px-0'}
+				>
+					<div className="mx-auto max-w-2xl">
+						{
+							<Link
+								aria-label="Go back to articles"
+								className="group mb-8 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-md shadow-gray-800/5 ring-1 ring-gray-900/5 transition 2xl:absolute 2xl:-top-1.5 2xl:left-0 2xl:mt-0"
+								href={'/blog'}
+								type="button"
+							>
+								<ArrowLeftIcon className="h-4 w-4 stroke-gray-500 transition group-hover:stroke-gray-700" />
+							</Link>
+						}
+						{articleAttributes && (
+							<article>
+								<header className="flex flex-col">
+									<h1 className="mt-6 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">
+										{articleAttributes.title}
+									</h1>
+									<time
+										className="order-first flex items-center text-base text-gray-700"
+										dateTime={articleAttributes.updatedAt.toString()}
+									>
+										<span className="h-4 w-0.5 rounded-full bg-gray-200" />
+										<span className="ml-3">
+											{convertToStringDate(articleAttributes.updatedAt)}
+										</span>
+									</time>
+								</header>
+								<div className={'flex flex-col'}>
+									<div className={'prose my-8 xl:prose-lg'}>
+										<Layout value={articleAttributes.content.toString()} />
+									</div>
+									<p className={'flex items-center text-base text-gray-600'}>
+										<span className="h-4 w-0.5 rounded-full bg-gray-200" />
+										<span className="ml-3">
+											Auteur.e : {articleAttributes.author}
+										</span>
+									</p>
+								</div>
+							</article>
+						)}
+					</div>
+				</div>
+				<CTA />
+			</main>
+			<Footer />
+		</>
+	)
+}
+
+export default BlogArticle

src/pages/blog.js → app/blog/page.js

@@ -1,36 +1,30 @@
-import React from 'react'
-
 import Image from 'next/image'
-import Head from 'next/head'
 import Link from 'next/link'
 
+import getAllArticleOrderedByDesc from '@/services/getAllArticleOrderedByDesc'
 import { convertToStringDate } from '@/services/utils'
 import Footer from '@/components/Global/Footer'
 import Hero from '@/components/Global/Hero'
 import Nav from '@/components/Global/Nav'
 import CTA from '@/components/Global/CTA'
 
-/**
- * @param props
- * @constructor
- */
-function Blog({ articles }) {
-	// take only the first 3 articles
-	const lastArticles = articles.slice(0, 3)
+export const metadata = {
+	description:
+		"L'actualité de My-Makeup, ce que nous faisons pour améliorer votre quotidien ! Et les nouveautés qui arrivent bientôt !",
+	// seo tag canonical link
+	alternates: {
+		canonical: 'https://my-makeup.fr/blog',
+	},
+	title: 'Blog de My-Makeup',
+}
+
+async function Blog() {
+	const articles = await getAllArticleOrderedByDesc()
+
+	const lastArticles = articles?.slice(0, 3)
 
 	return (
 		<>
-			<Head>
-				<title>Blog de My-Makeup</title>
-				<meta
-					content="L'actualité de My-Makeup, ce que nous faisons pour améliorer votre quotidien !
-					Et les nouveautés qui arrivent bientôt !"
-					name="description"
-				/>
-				{/*	seo tag canonical link */}
-				<link href={'https://my-makeup.fr/blog'} rel="canonical" />
-			</Head>
-
 			<Nav />
 			<main className={'relative'}>
 				<Hero
@@ -140,24 +134,3 @@ function Blog({ articles }) {
 }
 
 export default Blog
-
-export async function getServerSideProps() {
-	const res = await fetch(
-		`${process.env.NEXT_PUBLIC_API_URL}/api/articles?sort[publishedAt]=desc`,
-		{
-			headers: {
-				// 	token
-				'Content-Type': 'application/json',
-				Accept: 'application/json',
-			},
-			method: 'GET',
-		}
-	)
-	const data = await res.json()
-
-	return {
-		props: {
-			articles: data.data,
-		},
-	}
-}

app/contact/page.js

@@ -0,0 +1,154 @@
+import ContactForm from '@/components/Contact/ContactForm'
+import Footer from '@/components/Global/Footer'
+import Hero from '@/components/Global/Hero'
+import Nav from '@/components/Global/Nav'
+import CTA from '@/components/Global/CTA'
+
+export const metadata = {
+	description:
+		"Contactez-nous pour toute question, suggestion ou collaboration ! L'équipe My-Makeup est à votre écoute !",
+	alternates: {
+		canonical: 'https://my-makeup.fr/contact',
+	},
+	title: 'Contact - My-Makeup',
+}
+
+function Contact() {
+	return (
+		<>
+			<Nav />
+			<main className={'relative'}>
+				<Hero
+					description={
+						<>
+							{
+								"Une idée, une envie de collaborer, une question ? N'hésitez pas à nous contacter !"
+							}
+						</>
+					}
+					imgBackgroundSrc={'/assets/back/maquilleuse_europeenne_white.webp'}
+					isCTALoginDisplayed={false}
+					isSearchDisplayed={false}
+					isSimpleVersionDisplayed={true}
+					title={<>Contact</>}
+				/>
+				<div className="mx-auto mt-32 max-w-2xl px-4 text-center md:px-0">
+					<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+						Un message en particulier ?
+					</h2>
+					<p className="mt-2 text-lg leading-8 text-gray-600">
+						{
+							"Une demande particulière, un bug, une idée ? N'hésitez pas à nous contacter via le formulaire ci-dessous !"
+						}
+					</p>
+				</div>
+				<ContactForm />
+				<section className={'relative py-20'}>
+					<div className="mx-auto flex max-w-7xl flex-col px-4 md:flex-row md:px-8 xl:px-0">
+						<div className="mx-auto mb-10 w-full md:w-1/2">
+							<h2 className="w-full text-start text-4xl font-bold tracking-tight text-gray-900 sm:text-4xl md:w-1/2">
+								Contactez-nous
+							</h2>
+							<p className="mt-6 w-full text-start text-lg text-gray-700 md:w-1/2">
+								{
+									"My-Makeup, plus qu'une plateforme de mise en relation, une équipe de passionnés à votre service !"
+								}
+							</p>
+						</div>
+						<div className="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 md:w-1/2 lg:col-span-2 lg:gap-8">
+							<div className="rounded-2xl bg-gray-50 p-10">
+								<h3 className="text-base font-semibold leading-7 text-gray-900">
+									Contact général
+								</h3>
+								<dl className="mt-3 space-y-1 text-sm leading-6 text-gray-600">
+									<div>
+										<dt className="sr-only">Email</dt>
+										<dd>
+											<a
+												className="font-semibold text-indigo-600"
+												href="mailto:contact@my-makeup.fr"
+											>
+												contact@my-makeup.fr
+											</a>
+										</dd>
+									</div>
+									<div className="mt-1">
+										<dt className="sr-only">Phone number</dt>
+										<dd>06 21 58 26 84</dd>
+									</div>
+								</dl>
+							</div>
+							<div className="rounded-2xl bg-gray-50 p-10">
+								<h3 className="text-base font-semibold leading-7 text-gray-900">
+									Travailler avec nous
+								</h3>
+								<dl className="mt-3 space-y-1 text-sm leading-6 text-gray-600">
+									<div>
+										<dt className="sr-only">Email</dt>
+										<dd>
+											<a
+												className="font-semibold text-indigo-600"
+												href="mailto:jobs@my-makeup.fr"
+											>
+												jobs@my-makeup.fr
+											</a>
+										</dd>
+									</div>
+								</dl>
+							</div>
+							<div className="rounded-2xl bg-gray-50 p-10">
+								<h3 className="text-base font-semibold leading-7 text-gray-900">
+									Relation entreprise
+								</h3>
+								<dl className="mt-3 space-y-1 text-sm leading-6 text-gray-600">
+									<div>
+										<dt className="sr-only">Email</dt>
+										<dd>
+											<a
+												className="font-semibold text-indigo-600"
+												href="mailto:pro@my-makeup.fr"
+											>
+												pro@my-makeup.fr
+											</a>
+										</dd>
+									</div>
+									<div className="mt-1">
+										<dt className="sr-only">Numéro de téléphone</dt>
+										<dd>06 21 58 26 84</dd>
+									</div>
+								</dl>
+							</div>
+							<div className="rounded-2xl bg-gray-50 p-10">
+								<h3 className="text-base font-semibold leading-7 text-gray-900">
+									Aide et questions
+								</h3>
+								<dl className="mt-3 space-y-1 text-sm leading-6 text-gray-600">
+									<div>
+										<dt className="sr-only">Email</dt>
+										<dd>
+											<a
+												className="font-semibold text-indigo-600"
+												href="mailto:help@my-makeup.fr"
+											>
+												help@my-makeup.fr
+											</a>
+										</dd>
+									</div>
+									<div className="mt-1">
+										<dt className="sr-only">Phone number</dt>
+										<dd>06 21 58 26 84</dd>
+									</div>
+								</dl>
+							</div>
+						</div>
+					</div>
+				</section>
+
+				<CTA />
+			</main>
+			<Footer />
+		</>
+	)
+}
+
+export default Contact

app/layout.js

@@ -41,12 +41,10 @@ export default function RootLayout({ children }) {
         `}
 			</Script>
 			<body className={'bg-neutral-50'}>
-				<main>
-					<SessionProvider>
-						{children}
-						<ToastContainer />
-					</SessionProvider>
-				</main>
+				<SessionProvider>
+					{children}
+					<ToastContainer />
+				</SessionProvider>
 			</body>
 		</html>
 	)

app/search/page.js

@@ -0,0 +1,23 @@
+import SearchContainer from '@/components/Global/Search/SearchContainer'
+import Footer from '@/components/Global/Footer'
+import Nav from '@/components/Global/Nav'
+
+export const metadata = {
+	// seo tag canonical link
+	alternates: {
+		canonical: 'https://my-makeup.fr/search',
+	},
+	title: 'Recherche de maquilleuse - My-Makeup',
+}
+
+const Search = () => {
+	return (
+		<>
+			<Nav />
+			<SearchContainer />
+			<Footer />
+		</>
+	)
+}
+
+export default Search