offres layout and starting page

2023-07-20 15:33:27 +02:00
3 changed files with 77 additions and 0 deletions
--- a/src/layouts/OffreLayout.astro
+++ b/src/layouts/OffreLayout.astro
@ -0,0 +1,43 @@
+---
+import { astroI18n } from "astro-i18n";
+astroI18n.init(Astro);
+
+import "../styles/style.css";
+
+import Head from "../components/Head.astro";
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
+
+const { pageTitle } = Astro.props;
+---
+
+<html lang={astroI18n.langCode} dir="ltr">
+	<Head pageTitle={pageTitle} />
+	<body class="offre-layout">
+		<div class="wrapper">
+			<!-- <Header /> -->
+			<main id="skip-content" role="main">
+				<slot />
+			</main>
+		</div>
+		<!-- <Footer /> -->
+		<style>
+			html {
+				--color-primary: rgb(255, 222, 223);
+				--color-secondary: rgb(150, 0, 13);
+			}
+			@supports (color: oklch(0% 0 0)) {
+				html {
+					--color-primary: oklch(92.9% 0.04480512547881144 16.3020144016784);
+					--color-secondary: oklch(42.3% 0.193 26.95);
+				}
+			}
+			.offre-layout {
+				background-color: var(--color-primary);
+			}
+			.offre-layout :global(*) {
+				color: var(--color-secondary);
+			}
+		</style>
+	</body>
+</html>
--- a/src/pages/en/offres/web-classique.astro
+++ b/src/pages/en/offres/web-classique.astro
@ -0,0 +1,6 @@
+---
+import Page from "../../offres/web-classique.astro"
+const { props } = Astro
+---
+
+<Page {...props} />
--- a/src/pages/offres/web-classique.astro
+++ b/src/pages/offres/web-classique.astro
@ -0,0 +1,28 @@
+---
+import OffreLayout from "../../layouts/OffreLayout.astro";
+
+const pageTitle = "Offre web classique";
+---
+
+<OffreLayout pageTitle={pageTitle}>
+	<div class="region">
+		<section class="flow">
+			<h1>{pageTitle}</h1>
+			<p class="h3">Un site rapide, moderne et (plus) accessible.</p>
+		</section>
+		<section class="flow">
+			<h2>Description</h2>
+			<p class="h3">
+				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est esse
+				molestias ipsam rerum, dolor libero dolores aperiam blanditiis,
+				provident, ut recusandae in quae non doloremque officia quia labore.
+				Tempore, sint!
+			</p>
+		</section>
+	</div>
+</OffreLayout>
+
+<style>
+	section {
+	}
+</style>