✨(front) add a grist paris summit landing page

new page to explain what's the Grist Paris Summit is
and allow people to register

currently with some unfinished wording and a (so) secret way to toggle
between page versions as a previewing tool

package.json

@@ -36,7 +36,7 @@
     "remark-parse": "11.0.0",
     "remark-rehype": "11.1.0",
     "remark-unwrap-images": "4.0.0",
-    "sharp": "^0.33.5",
+    "sharp": "0.33.5",
     "swiper": "11.0.5",
     "unified": "11.0.4"
   },

src/components/Button.tsx

@@ -1,11 +1,13 @@
 import Link from 'next/link'
 import React from 'react'
+import classNames from 'classnames'
 
 interface ButtonProps {
   children: React.ReactNode
   href?: string
   'aria-label'?: string
   variant?: 'outline'
+  size?: 'large'
 }
 
 const transition = 'transition ease-in-out delay-50 duration-300'
@@ -15,25 +17,30 @@ const core =
 export const buttonStyles = {
   default: `${core} ${transition} font-medium text-white bg-blue-1 hover:bg-dsfr-blue-2`,
   outline: `${core} ${transition} bg-transparent border border-2 font-bold border-blue-1 text-blue-1 hover:backdrop-brightness-95 hover:bg-transparent`,
+  largeSize: '!text-xl md:!py-4 md:!px-8',
 }
 
 export const Button: React.FC<ButtonProps> = ({
   children,
   href,
   variant,
+  size,
   'aria-label': ariaLabel,
 }) => {
-  const classNames =
-    variant === 'outline' ? buttonStyles.outline : buttonStyles.default
-
+  const classes = classNames({
+    [buttonStyles.default]: !variant,
+    [buttonStyles.outline]: variant === 'outline',
+    [buttonStyles.largeSize]: size === 'large',
+  })
+  const LinkComponent = href?.startsWith('#') ? 'a' : Link
   return (
     <>
       {href ? (
-        <Link href={href} className={classNames} aria-label={ariaLabel}>
+        <LinkComponent href={href} className={classes} aria-label={ariaLabel}>
           {children}
-        </Link>
+        </LinkComponent>
       ) : (
-        <button className={classNames}>{children}</button>
+        <button className={classes}>{children}</button>
       )}
     </>
   )

src/components/ContentSection.tsx

@@ -7,6 +7,7 @@ interface ContentSectionProps
   padding?: boolean
   horizontalPadding?: boolean
   verticalPadding?: boolean
+  center?: boolean
   gap?: string
 }
 
@@ -16,6 +17,7 @@ export const ContentSection: React.FC<ContentSectionProps> = ({
   padding = true,
   horizontalPadding = true,
   verticalPadding = true,
+  center = true,
   gap = 'gap-[50px]',
   ...props
 }) => {
@@ -24,7 +26,7 @@ export const ContentSection: React.FC<ContentSectionProps> = ({
       className={`justify-center overflow-hidden flex ${background === 'gray' && 'bg-white-1'} ${padding && verticalPadding && 'py-[50px] md:py-20'}`}
     >
       <div
-        className={`flex flex-col items-center w-full lg:w-[70em] ${gap} ${padding && horizontalPadding && 'px-4'}`}
+        className={`flex flex-col ${center ? 'items-center' : 'items-start'} w-full lg:w-[70em] ${gap} ${padding && horizontalPadding && 'px-4'}`}
         {...props}
       >
         {children}