Merge pull request #257 from Dark-Matter-Labs/beta-launch

Beta launch!

components/nav.js

@@ -17,12 +17,8 @@ import BetaBanner from './beta-banner';
 import BetaBannerGen from './beta-banner-gen';
 import client from '../lib/sanity';
 import NieuwTooltip from '../components/nieuw-tooltip';
-import oldLogo from '../public/Circulaw_logotype_home_old.png';
 import animationData from '../public/CL_Home_Logo_Loop';
 
-// temp imports
-import AlphaBanner from './alpha-banner';
-
 function classNames(...classes) {
  return classes.filter(Boolean).join(' ');
 }
@@ -299,53 +295,6 @@ export default function Nav() {
  </Disclosure>
  );
  }
- // returns nav bar that is nested inside the header part of the index page
- else if (router.pathname == '/') {
- return (
- <div className='relative'>
- <video id='background-video' autoPlay loop muted playsInline poster='/bg-poster.png'>
- <source src='/01_circulaw.mov' type='video/mp4' />
- </video>
- <AlphaBanner />
- <div className='relative pt-6 pb-16 sm:pb-24'>
- <div className='flex items-baseline sm:justify-start '>
- <div className='hidden lg:block md:py-5 lg:py-0 pl-40'>
- <Link href='/'>
- <Image height={46} width={250} src={oldLogo} alt='CircuLaw logo' />
- </Link>
- </div>
- <div className='block lg:hidden py-4 pl-8'>
- <Link href='/'>
- <Image height={24} width={120} src={oldLogo} alt='CircuLaw logo' quality={100} />
- </Link>
- </div>
- </div>
-
- {/* TODO: move this into header component and out of nav*/}
- <main className='global-margin sm:mt-2'>
- <div className='text-center mx-auto max-w-4xl'>
- <div className='header hidden md:block text-black-white-200 py-10'>
- <span className='block '>
- Lancering CircuLaw <br />8 Februari
- </span>{' '}
- </div>
- <h1 className='text-left mobile block md:hidden text-black-white-200 py-4'>
- <span className='block '>
- Lancering CircuLaw <br />8 Februari
- </span>{' '}
- </h1>
- <p className='text-left sm:text-center mt-2 p-base max-w-sm sm:max-w-full sm:p-xl text-black-white-200 pb-8'>
- De afgelopen twee jaar is uit de samenwerking van een breed consortium aan partners
- CircuLaw ontstaan. Het doel van CircuLaw: meer en beter gebruikmaken van bestaande
- wet- en regelgeving door overheden. Tijdens de Week van de Circulaire Economie is
- het zover: samen met wethouder Zita Pels lanceren wij dit nieuwe kennisplatform!
- </p>
- </div>
- </main>
- </div>
- </div>
- );
- }
  return (
  <div className='bg-header'>
  <BetaBanner />

pages/index.js

@@ -1,35 +1,108 @@
+import { useState, useEffect } from 'react';
+import useSWR from 'swr';
+import { groq } from 'next-sanity';
+import Link from 'next/link';
 import Image from 'next/image';
 import { ArrowRightIcon } from '@heroicons/react/outline';
-import Layout from '/components/layouts/templayout';
-import launchImage from '../public/launch.png';
+import Layout from '../components/layouts/layout';
+import SectionTypes from '../components/section-types-list';
+import waaromImage from '../public/waarom.png';
+import watImage from '../public/wat.png';
+import hoeverImage from '../public/hoever.png';
+import client from '../lib/sanity';
 
-export default function TempIndex() {
+export default function Index() {
+ const { data } = useSWR(groq`*[_type == "aboutPage"]|order(order asc)`, (query) =>
+ client.fetch(query),
+ );
+
+ const [slugs, setSlugs] = useState();
+ useEffect(() => setSlugs(data?.map((page) => page.slug.current)), [data]);
+
+ const aboutSlugs = slugs?.filter((e) => e !== 'vraag-&-antwoord');
+ // const FAQslug = 'vraag-&-antwoord';
  return (
  <Layout page='home'>
+ <div className='bg-black-white-200 pb-20' name='thema'>
+ <div className='global-margin'>
+ <h2 className='pb-6 pt-8 mobile sm:desktop text-black-white-800'>Thema’s</h2>
+ <SectionTypes type='home' />
+ </div>
+ </div>
  <div className='bg-black-white-200 py-10'>
  <div className='global-margin'>
- <a href='https://circl.nl/programma/circulaw-regelgeving-voor-een-circulaire-economie'>
- <div className='grid grid-cols-1 lg:grid-cols-2 py-10 gap-x-8 gap-y-4'>
+ <h1
+ className='mobile sm:desktop text-black-white-800 border-b border-black-white-600 pb-4'
+ name='waarom'
+ >
+ Over CircuLaw
+ </h1>
+ <Link href={`/about/${encodeURIComponent(aboutSlugs?.[0])}`}>
+ <div className='grid grid-cols-1 lg:grid-cols-2 border-b border-black-white-600 py-10 gap-x-8 gap-y-4'>
  <div>
- <Image src={launchImage} width={556} alt='image for wat circulaw' />
+ <Image src={watImage} width={556} alt='image for wat circulaw' />
  </div>
  <div>
- <h2 className='mobile sm:desktop'>Het event</h2>
+ <h2 className='mobile sm:desktop'>Wat is CircuLaw?</h2>
  <p className=' p-lg py-5 max-w-4xl'>
- Met experts vanuit overheid, bedrijfsleven en kennisinstituten gaan we rond de
- tafel om te praten over de cruciale rol van ‘activerende regelgeving’ in de
- transitie naar een circulaire economie. En over CircuLaw, het kennisplatform dat
- inzicht en handelingsperspectief biedt in wet-en regelgeving zodat
- beleidsmedewerkers ermee aan de slag kunnen. We nodigen jou uit om dat gesprek
- online bij te wonen, op 8 februari van 10 tot 11.30 uur.
+ CircuLaw is een service waarmee we in de eerste plaats beleidsmakers en
+ transitiemanagers helpen meer en beter gebruik te maken van regelgeving om de
+ circulaire economie te bevorderen. Maar CircuLaw is ambitieus. Door stap voor stap
+ uit te breiden willen we uiteindelijk ook strategen, toezichthouders, juristen en
+ circulaire ondernemers bedienen.
  </p>
  <span className='text-green-500 link-lg'>
- Ja, ik wil dit event bijwonen{' '}
+ Lees verder <ArrowRightIcon className='inline-block h-4 w-4' aria-hidden='true' />
+ </span>
+ </div>
+ </div>
+ </Link>
+ <Link href={`/about/${encodeURIComponent(aboutSlugs?.[1])}`}>
+ <div className='grid grid-cols-1 lg:grid-cols-2 border-b border-black-white-600 py-10 gap-x-8 gap-y-4'>
+ <div>
+ <Image src={hoeverImage} width={556} alt='image for hoever' />
+ </div>
+ <div>
+ <h2 className='mobile sm:desktop'>Wat vind je nu op CircuLaw?</h2>
+ <ul className=' p-lg py-5 max-w-4xl list-disc pl-6'>
+ <li>
+ Een overzicht van wet- en regelgeving voor beleidsmakers die aan de slag willen
+ met instrumenten voor de thema’s houtbouw, circulaire windturbines en de
+ circulaire matrasketen
+ </li>
+ <li>Een leidraad voor 3 maatregelen die houtbouw stimuleren</li>
+ <li>
+ Goed inzicht in de samenhang tussen bevoegdheidsniveaus binnen regelgeving rond
+ circulaire houtbouw en circulaire windmolens
+ </li>
+ </ul>
+ <span className='text-green-500 link-lg'>
+ Lees verder
  <ArrowRightIcon className='inline-block h-4 w-4' aria-hidden='true' />
  </span>
  </div>
  </div>
- </a>
+ </Link>
+ <Link href={`/about/${encodeURIComponent(aboutSlugs?.[2])}`}>
+ <div className='grid grid-cols-1 lg:grid-cols-2 py-10 gap-x-8 gap-y-4'>
+ <div>
+ <Image src={waaromImage} width={556} alt='image for wararom circulaw' />
+ </div>
+ <div>
+ <h2 className='mobile sm:desktop'>Wie maken CircuLaw?</h2>
+ <p className=' p-lg py-5 max-w-4xl'>
+ Gemeente Amsterdam, Dark Matter Laboratories, EIT Climate-KIC, de Provincies
+ Noord-Holland en Flevoland, Rijksdienst voor Ondernemend Nederland (RVO), het MRA
+ (Metropoolregio Amsterdam) Kernteam Houtbouw, Belastingdienst, TU Delft, Erasmus
+ School of LAW, de VU, Wageningen Universiteit (WUR Law group), Stichting
+ Koninklijk Nederlands Normalisatie Instituut (NEN).
+ </p>
+ <span className='text-green-500 link-lg'>
+ Lees verder <ArrowRightIcon className='inline-block h-4 w-4' aria-hidden='true' />
+ </span>
+ </div>
+ </div>
+ </Link>
  </div>
  </div>
  </Layout>