new conf design — landing (#1995)

* Add Hans Grotesk as --font-sans

* Clean up the font setup to make sure .font-sans works consistently

* Add Commit Mono as --font-mono

* Add new colors

* Use relative rgb colors to support alpha

* Use unwraped custom properties for colors to support older browsers

* Add typography styles

* Make the texts switch to different size starting from `lg`

* Go back to switching on 768px

* Add README.md to explain the new directory

* Add Anchor component for internal and external links

* Add clsx to classFunctions in Tailwind VSCode settings

* Add Button component

* Add `variant` prop

* Fix Button colors

* Tweak hover color

* Set text color in dark mode

* Add RegisterToday section

* Tweak RegisterToday section spacing

* Improve mobile styles

* Improve paddings for medium screen sizes

* Add a global focus style className

* Improve medium screen size styles

* Add Calendar and Pin from Pixelarticons

* Move typography styles to a Tailwind plugin so they autocomplete

* Extract the event links

* Move RegisterToday to components dir

* Fix typography-d1 size

* Use next-theems from transitive dep (for now) (we need `dark:` prefix for Hero)

* Draft Hero component

* Move Pixelarticons to .tsx files

* Make the Hero match designs

* Redo the Hero stripes in CSS

* Tweak focus outline

* Use alternative gradients in dark mode

* Animate mask bean on load to avoid blinking

* Tweak styles for mobiles and large screen sizes

* Remove todo comment

* Clean up more comments

* Add Navbar

* Improve the backdrop layer

* Make the gradient match Figma

* Add What to Expect section

* Improve gql-conf-container class

* Style What to Expect section nicely

* Remove the old Intro section

* Add a two hacky classes to make the old part of website still readable

* Make the gradient match Figma

* Add top minds section

* improve styles

* Improve social buttons

* Add more socials

* Update styles

* More responsive styles

* Show [Become as speakser] if there is no /speakers page yet

* Improve the contrast of secondary button in dark mode

* Make Tanmai's photo as green as the others

* Add GetYourTicket section

* Improve GetYourTicket styles

* Improve the stripes

* Lower the opacity to make text readable

* Fix borders

* Update text

* Make the padding and borders better

* Add RegisterSection

* Underline links

* Add Sponsors section

* Tweak styles

* Use SVGR to load sponsor logos and fix the grid layout

* Make it less transparent and get rid of border radius

* Remove a redundant comment

* Remove unused import

* Fix a type name

* Use a proper icon

* Fix alignment

* Add Call for Proposals section

* make the dates table

* Improve styles

* Begin mobile version

* Tweak styles

* Add the stripes

* Add missing keys

* Add .typography-link utility

* Add FrequentlyAskedQuestions section

* Tweak spacing

* Bump navbar opacities

* Make the Navbar okay

* Add background strips per section

* Remove unused import

* Make the navbar more mobile friendly

* Make the navbar consistent color at the top

* Supress hydration warning from next-themes

* Make the FAQ work better on medium screens

* Fix the CallForProposals on mobile

* Take a random shot at fixing the stripes glitch

* Fix the navbar root link

* Make the logo link to / and the text to conf root

* Remove the old Register section

* Update old sections to new typography styles

* Fix Tyk logo

* Add shrink-0 to arrows

* Update navbar icons to pixelarticons

* Make CallForProposals better on tablet screens

* Fix border colors

* Tweak spacing

* Tweak the top minds for medium screens

* Tweak the heading width

* Add GraphQLFoundationCard

* Use proper trademark color

* Tweak spacings

* Improve mobile styles

* Refactor the logo link out, restyle old footer

* Add stripes to the footer

* Add grid borders to the footer

* Tweak the blur blob position

* Unify paddings

* Make the Stripes look more like the design

* Remove old pnpm-workspace.yaml

* Add a basic Marquee with Motion

* Copy the content of the marquee way too many times

* Make the decoration look like on the design

* Add remaining marquee sections

* Unify colors and block scroll in navbar

* Switch to current sponsors

* Restyle the Sponsorship perks section

* Run Prettier on SVGs

* Change dl to ul in WhatToExpectSection

* Show previous edition speakers in the top minds section

* Restyle Resources

* Unify widths per @saihaj's suggestion

Co-authored-by: Saihajpreet Singh <[email protected]>

* Unify more widths per @saihaj's suggestion

Co-authored-by: Saihajpreet Singh <[email protected]>

* Tweak styles

---------

Co-authored-by: Saihajpreet Singh <[email protected]>

Author: hasparus

.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",

pnpm-lock.yaml

@@ -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%;
+}

pnpm-workspace.yaml

@@ -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 {

public/img/conf/Sponsors/Tyk.svg

@@ -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