new conf design — landing

.vscode/settings.json

@@ -8,5 +8,6 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "tailwindCSS.classFunctions": ["clsx"]
 }

next.config.js

@@ -31,12 +31,38 @@ export default withLess(
         rule.test?.test?.(".svg"),
       )
 
-      fileLoaderRule.exclude = ALLOWED_SVG_REGEX
+      fileLoaderRule.exclude = /\.svg$/i
+
+      config.module.rules.push(
+        // All .svg from /icons/ and with ?svgr are going to be processed by @svgr/webpack
+        {
+          test: ALLOWED_SVG_REGEX,
+          use: ["@svgr/webpack"],
+        },
+        {
+          test: /\.svg$/i,
+          exclude: ALLOWED_SVG_REGEX,
+          resourceQuery: /svgr/,
+          use: [
+            {
+              loader: "@svgr/webpack",
+              options: {
+                dimensions: false, // **adds** viewBox.
+              },
+            },
+          ],
+        },
+        // Otherwise, we use the default file loader
+        {
+          ...fileLoaderRule,
+          test: /\.svg$/i,
+          exclude: ALLOWED_SVG_REGEX,
+          resourceQuery: {
+            not: [...fileLoaderRule.resourceQuery.not, /svgr/],
+          },
+        },
+      )
 
-      config.module.rules.push({
-        test: ALLOWED_SVG_REGEX,
-        use: ["@svgr/webpack"],
-      })
       return config
     },
     output: "export",

package.json

@@ -23,6 +23,7 @@
     "@graphql-tools/schema": "10.0.15",
     "@headlessui/react": "^1.7.17",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
     "@tailwindcss/typography": "^0.5.10",
     "autoprefixer": "^10.4.17",
@@ -39,6 +40,7 @@
     "lucide-react": "^0.469.0",
     "markdown-to-jsx": "^7.4.0",
     "marked": "5.1.2",
+    "motion": "^12.11.0",
     "next": "^14.2.5",
     "next-image-export-optimizer": "^1.12.3",
     "next-query-params": "^5.0.0",
@@ -53,6 +55,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-medium-image-zoom": "5.2.13",
+    "react-use-measure": "^2.1.7",
     "rss": "1.2.2",
     "server-only": "0.0.1",
     "string-similarity": "^4.0.4",

src/app/colors.css

@@ -0,0 +1,40 @@
+:root,
+.light {
+  --color-pri-lighter: 319 100% 90%;
+  --color-pri-light: 318 100% 80%;
+  --color-pri-base: 319 100% 44.1%;
+  --color-pri-dark: 319 100% 30%;
+  --color-pri-darker: 319 100% 20%;
+
+  --color-sec-lighter: 79 80% 90%;
+  --color-sec-light: 79 82% 80%;
+  --color-sec-base: 79 90% 65%;
+  --color-sec-dark: 79 98% 37%;
+  --color-sec-darker: 79 98% 23%;
+
+  --color-neu-0: 0 0% 100%;
+  --color-neu-50: 75 57% 97%;
+  --color-neu-100: 75 15% 95%;
+  --color-neu-200: 77 14% 90%;
+  --color-neu-300: 76 14% 85%;
+  --color-neu-400: 77 14% 80%;
+  --color-neu-500: 74 14% 70%;
+  --color-neu-600: 76 15% 60%;
+  --color-neu-700: 76 15% 40%;
+  --color-neu-800: 77 14% 20%;
+  --color-neu-900: 75 15% 5%;
+}
+
+.dark {
+  --color-neu-900: 0 0% 100%;
+  --color-neu-800: 75 57% 97%;
+  --color-neu-700: 75 15% 95%;
+  --color-neu-600: 77 14% 90%;
+  --color-neu-500: 76 14% 85%;
+  --color-neu-400: 77 14% 80%;
+  --color-neu-300: 74 14% 70%;
+  --color-neu-200: 76 15% 60%;
+  --color-neu-100: 76 15% 40%;
+  --color-neu-50: 77 14% 20%;
+  --color-neu-0: 75 15% 5%;
+}

src/app/conf/2023/layout.tsx

@@ -4,6 +4,7 @@ import { Header } from "../_components/header"
 import { Footer } from "../_components/footer"
 import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
+import { OldFontsStyleTag } from "../../fonts/old-fonts"
 
 export const metadata = {
   description:
@@ -33,6 +34,7 @@ export default function ConfLayout({
   const hover = "#c026d3"
   return (
     <>
+      <OldFontsStyleTag />
       <style>{`
         .text-primary,
         .hover\\:text-primary:hover {

src/app/conf/2024/layout.tsx

@@ -4,6 +4,7 @@ import { Header } from "../_components/header"
 import { Footer } from "../_components/footer"
 import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
+import { OldFontsStyleTag } from "../../fonts/old-fonts"
 
 export const metadata = {
   description:
@@ -30,6 +31,7 @@ export default function Layout({
 }): ReactElement {
   return (
     <>
+      <OldFontsStyleTag />
       <Header
         logo={
           <NextLink