[FFDW][UXIT-2108] Setup Layout [skip percy] (#1094)

* Add metadata configuration for SEO and title templating * Add Manrope font * Include primary and secondary theme colors * Style main layout
FilecoinFoundationWeb · Feb 12, 2025 · a827ec6 · a827ec6
1 parent d99a444
commit a827ec6
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 5 deletions.
diff --git a/apps/ffdweb-site/src/app/_constants/siteMetadata.ts b/apps/ffdweb-site/src/app/_constants/siteMetadata.ts
@@ -0,0 +1,5 @@
+const BASE_DOMAIN = 'ffdweb.org'
+const BASE_URL = `https://${BASE_DOMAIN}`
+const ORGANIZATION_NAME = 'Filecoin Foundation for the Decentralized Web'
+
+export { BASE_DOMAIN, BASE_URL, ORGANIZATION_NAME }
diff --git a/apps/ffdweb-site/src/app/_styles/globals.css b/apps/ffdweb-site/src/app/_styles/globals.css
@@ -1 +1,23 @@
-@import "tailwindcss";
+@import 'tailwindcss';
+
+@theme {
+  --color-brand-primary-100: #f6f7ff;
+  --color-brand-primary-200: #d8d9ff;
+  --color-brand-primary-300: #b5b5fa;
+  --color-brand-primary-400: #9392d5;
+  --color-brand-primary-500: #7271b1;
+  --color-brand-primary-600: #53518d;
+  --color-brand-primary-700: #37326c;
+  --color-brand-primary-800: #1d144b;
+  --color-brand-primary-900: #09002c;
+
+  --color-brand-secondary-100: #d4ff5c;
+  --color-brand-secondary-200: #bafe36;
+  --color-brand-secondary-300: #97d800;
+  --color-brand-secondary-400: #75b400;
+  --color-brand-secondary-500: #559000;
+  --color-brand-secondary-600: #366e00;
+  --color-brand-secondary-700: #184d00;
+  --color-brand-secondary-800: #002d00;
+  --color-brand-secondary-900: #001100;
+}
diff --git a/apps/ffdweb-site/src/app/layout.tsx b/apps/ffdweb-site/src/app/layout.tsx
@@ -1,19 +1,33 @@
+import { Manrope } from 'next/font/google'
+
 import type { Metadata } from 'next'
 import '@/styles/globals.css'
 
+import { BASE_URL, ORGANIZATION_NAME } from '@/constants/siteMetadata'
+
 export const metadata: Metadata = {
-  title: 'FFDWeb',
-  description: 'FFDWeb Site',
+  title: {
+    template: `%s | ${ORGANIZATION_NAME}`,
+    default: ORGANIZATION_NAME,
+  },
+  metadataBase: new URL(BASE_URL),
 }
 
+const manrope = Manrope({
+  subsets: ['latin'],
+  display: 'swap',
+})
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
-      <body>{children}</body>
+    <html lang="en" className={manrope.className}>
+      <body className="m-auto flex max-w-[1032px] flex-col justify-between bg-neutral-950 px-6 pt-8 pb-6 tracking-wide text-neutral-100">
+        <main>{children}</main>
+      </body>
     </html>
   )
 }