Merge pull request #42 from simonyiszk/dev

v1

.env.local.example

@@ -1,4 +1,6 @@
 SERVICE_ACCOUNT_JSON="<base-64 encoded creadentials.json of the service account>"
 SERVICE_ACCOUNT_SUBJECT="<subject of the service account>"
 JWT_SCOPE="<required scope for the service account>"
-GROUP_KEY="<email address of the google group>"
+GROUP_KEY="<email address of the google group>"
+BACKEND_URL="https://..."
+NEXT_PUBLIC_PLAUSIBLE_URL="<plausible url>"

next.config.js

@@ -1,4 +1,21 @@
+const { withPlausibleProxy } = require('next-plausible');
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = withPlausibleProxy({
+  customDomain: process.env.NEXT_PUBLIC_PLAUSIBLE_URL,
+})({
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'konf-api-staging.kir-dev.hu',
+      },
+      {
+        protocol: 'https',
+        hostname: 'konf-api.kir-dev.hu',
+      },
+    ],
+  },
+});
 
 module.exports = nextConfig;

package.json

@@ -19,12 +19,18 @@
   "dependencies": {
     "@headlessui/react": "^1.7.17",
     "clsx": "^2.0.0",
+    "date-fns": "^3.3.1",
     "email-validator": "^2.0.4",
     "googleapis": "^129.0.0",
     "next": "14.0.3",
+    "next-plausible": "^3.12.0",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^4.12.0"
+    "react-icons": "^4.12.0",
+    "react-markdown": "^9.0.1",
+    "react-snap-carousel": "^0.4.0",
+    "remark-gfm": "^4.0.0",
+    "yet-another-react-lightbox": "^3.16.0"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/contact/page.tsx

@@ -1,16 +1,36 @@
-import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import { OrganiserTile } from '@/components/tiles/organizer-tile';
+import { getIndexData } from '@/models/get-index-data';
+
+export default async function asyncontact() {
+  const data = await getIndexData();
+  if (!data) {
+    redirect('/error');
+  }
+  const sortedOrganizers = data.organisers.sort((o) => o.priority);
+
+  const org = {
+    main: sortedOrganizers.filter((o) => o.priority === 0),
+    other: sortedOrganizers.filter((o) => o.priority !== 0),
+  };
 
-export default function Contact() {
   return (
-    <div className='flex flex-col'>
-      <h2 className=' mb-20 text-center'>Vállalati és sajtómegkeresések, általános kérdések:</h2>
-      <Link
-        href='mailto:konferencia@simonyi.bme.hu'
-        className='text-xl sm:text-2xl md:text-3xl font-semibold text-center hover:text-brand'
-        target='blank'
-      >
-        konferencia@simonyi.bme.hu
-      </Link>
+    <div className='flex flex-col px-6 xl:px-0 max-w-6xl w-full'>
+      <h1 className='mb-16 mt-8'>Kapcsolat</h1>
+
+      <div className='flex flex-col gap-24'>
+        <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12'>
+          {org.main.map((organiser) => (
+            <OrganiserTile key={organiser.emailAddress} {...organiser} />
+          ))}
+        </div>
+        <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12'>
+          {org.other.map((organiser) => (
+            <OrganiserTile key={organiser.emailAddress} {...organiser} />
+          ))}
+        </div>
+      </div>
     </div>
   );
 }

src/app/error/page.tsx

@@ -0,0 +1,18 @@
+'use client';
+import Link from 'next/link';
+
+import { WhiteButton } from '@/components/white-button';
+
+export default function error() {
+  return (
+    <div className='px-6 xl:px-0 max-w-6xl w-full'>
+      <h1 className='mb-16 mt-8'>Hiba</h1>
+      <div className='w-full flex flex-col gap-4 items-center'>
+        <p className='text-xl font-semibold'>Sajnos nem várt hiba történt, kérlek próbáld újra később!</p>
+        <Link href='/'>
+          <WhiteButton onClick={() => {}}>Újrapróbálom</WhiteButton>
+        </Link>
+      </div>
+    </div>
+  );
+}

src/app/giveaway/page.tsx

@@ -0,0 +1,43 @@
+import { redirect } from 'next/navigation';
+
+// import ReactMarkdown from 'react-markdown';
+// import remarkGfm from 'remark-gfm';
+import { GiveawayTile } from '@/components/tiles/giveaway-tile';
+// import { Tile } from '@/components/tiles/tile';
+import { getIndexData } from '@/models/get-index-data';
+
+export default async function Giveaway() {
+  const data = await getIndexData();
+  if (!data) {
+    redirect('/error');
+  }
+  return (
+    <div className='grid sm:grid-col-6 max-w-6xl w-full my-10 px-6 xl:px-0 gap-y-20'>
+      <h1 className='sm:col-span-6'>Nyereményjáték</h1>
+      <GiveawayTile data={data.giveaway} showLink={false} />
+      {/* <Tile className='col-span-6'>
+        <Tile.Body className='markdown'>
+          <ReactMarkdown
+            children={data.giveaway.rules}
+            remarkPlugins={[remarkGfm]}
+            components={{
+              h1: ({ children }) => <h1 className='text-5xl font-bold mb-8'>{children}</h1>,
+              h2: ({ children }) => <h2 className='text-4xl font-bold my-4'>{children}</h2>,
+              p: ({ children }) => <p className='my-1'>{children}</p>,
+              a: ({ children, href }) => (
+                <a
+                  className='text-konf-yellow underline'
+                  href={href as string}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                >
+                  {children}
+                </a>
+              ),
+            }}
+          />
+        </Tile.Body>
+      </Tile> */}
+    </div>
+  );
+}

src/app/globals.css

@@ -2,26 +2,82 @@
 @tailwind components;
 @tailwind utilities;
 
+body:has(.yarl__root) {
+  @apply bg-none bg-black; /* TODO ez se szép, de jobb mint nélküle */
+}
+
 body {
-  @apply bg-space h-screen text-white bg-cover bg-center;
+  @apply bg-space h-screen text-white bg-contain bg-center;
+  font-family: var(--font-raleway);
 }
 img {
   @apply select-none;
 }
 
 h1 {
   @apply text-3xl sm:text-4xl md:text-5xl font-bold;
+  font-family: var(--font-recharge);
 }
 
 h2 {
   @apply text-2xl sm:text-3xl md:text-4xl font-bold;
 }
 
+.markdown ul {
+  @apply list-disc ml-6;
+}
+
+.markdown ol {
+  @apply list-decimal ml-6;
+}
+
+.markdown a {
+  @apply underline;
+}
+
+.markdown h2 {
+  @apply my-2;
+}
+
+.markdown h1 {
+  @apply mb-4;
+}
+
+.planet {
+  @apply absolute hidden xl:block select-none pointer-events-none;
+}
+
+.red-planet {
+  height: 300px;
+  width: 626px;
+  bottom: -170px;
+  right: -340px;
+}
+
+.white-planet {
+  height: 300px;
+  width: 626px;
+  bottom: -120px;
+  left: -350px;
+}
+
+/* generate filter to change the color of an svg here: https://codepen.io/sosuke/pen/Pjoqqp */
 .brand-link:hover {
-  filter: brightness(0) saturate(100%) invert(69%) sepia(40%) saturate(6364%) hue-rotate(307deg) brightness(88%)
-    contrast(87%);
+  filter: brightness(0) saturate(100%) invert(60%) sepia(7%) saturate(0%) hue-rotate(323deg) brightness(92%)
+    contrast(95%);
 }
 
 .hero-text-shadow {
   text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
+
+.tile {
+  @apply p-6 sm:p-10 min-h-[225px];
+  border-radius: 30px;
+  border: 1px solid var(--test-stroke, #fff);
+  background: var(
+    --test-item,
+    radial-gradient(165.3% 70.64% at 49.87% 50.22%, rgba(255, 255, 255, 0.1) 14.5%, rgba(0, 0, 0, 0.1) 100%),
+    #101010
+  );
+}

src/app/layout.tsx

@@ -2,11 +2,14 @@ import './globals.css';
 
 import type { Metadata } from 'next';
 import { Raleway } from 'next/font/google';
+import localFont from 'next/font/local';
+import PlausibleProvider from 'next-plausible';
 
 import { Footer } from '@/components/footer/footer';
 import { Navbar } from '@/components/navbar/navbar';
 
-const raleway = Raleway({ subsets: ['latin'] });
+const raleway = Raleway({ subsets: ['latin'], variable: '--font-raleway' });
+const recharge = localFont({ src: '../../public/recharge.otf', variable: '--font-recharge' });
 
 export const metadata: Metadata = {
   title: 'Simonyi Konferencia - 2024. 03. 19.',
@@ -18,8 +21,13 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang='hu'>
-      <body className={raleway.className}>
-        <main className='flex flex-col min-h-screen'>
+      <body className={`${raleway.variable} ${recharge.variable}`}>
+        <PlausibleProvider
+          domain='konferencia.simonyi.bme.hu'
+          customDomain={process.env.NEXT_PUBLIC_PLAUSIBLE_URL}
+          selfHosted
+        />
+        <main className='flex flex-col min-h-screen overflow-hidden'>
           <Navbar />
           <div className='flex-grow relative flex flex-col justify-center items-center'>{children}</div>
           <Footer />

src/app/page.tsx

@@ -1,30 +1,62 @@
 import Image from 'next/image';
+import { redirect } from 'next/navigation';
 
 import { metadata } from '@/app/layout';
-import { SocialButtons } from '@/components/footer/social-buttons';
-import { NewsletterModals } from '@/components/newsletter/newsletter-modals';
+import { ImageCarouselSection } from '@/components/image-carousel/image-carousel-section';
+import { SponsorSection } from '@/components/sponsors/sponsor-section';
+import CountdownTile from '@/components/tiles/countdown-tile/countdown-tile';
+import { GiveawayTile } from '@/components/tiles/giveaway-tile';
+import { NewsletterTile } from '@/components/tiles/newsletter-tile';
+import { PromoVideoTile } from '@/components/tiles/promo-video-tile';
+import { RegisterTile } from '@/components/tiles/register-tile';
+import { StatTile } from '@/components/tiles/stat-tile';
+import { getIndexData } from '@/models/get-index-data';
 
 import konfLogo from '../../public/img/konf.svg';
+import redPlanet from '../../public/img/red-planet.png';
+import whitePlanet from '../../public/img/white-planet.png';
 
-export default function Landing() {
+export default async function Landing() {
+  const data = await getIndexData();
+  if (!data) {
+    redirect('/error');
+  }
   return (
     <>
       <div className='p-10 relative'>
         <div className='max-w-md md:max-w-xl relative shadow-gloria rounded-full overflow-hidden mx-auto'>
-          <video className='h-full w-full' autoPlay playsInline loop muted>
+          <video className='h-full w-full' autoPlay playsInline loop muted poster='/img/nebula-thumbnail.png'>
             <source src='/video/nebula.mp4' type='video/mp4' />
           </video>
         </div>
         <div className='absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center flex-col gap-5 p-5'>
-          <Image src={konfLogo} alt='Simonyi Konferencia' className='w-full drop-shadow-hero' />
+          <Image src={konfLogo} alt='Simonyi Konferencia' className='w-full drop-shadow-hero' loading='eager' />
           <p className='font-bold text-xl sm:text-2xl text-center hero-text-shadow'>{metadata.description}</p>
           <p className='font-semibold text-4xl sm:text-6xl hero-text-shadow'>24. 03. 19.</p>
         </div>
       </div>
-      <div className='flex md:hidden flex-col items-center gap-10 mt-10'>
-        <SocialButtons />
-        <NewsletterModals />
+      <div className='relative'>
+        <div className='relative'>
+          <div className='grid grid-cols-1 sm:grid-cols-6 max-w-6xl w-full mt-40 gap-6 px-6 xl:px-0'>
+            {data.registration.cooltixEventId && <RegisterTile data={data.registration} />}
+
+            <StatTile desc='konferenciát rendeztünk már' number='20' />
+            <StatTile desc='percnyi előadás egy nap alatt' number='700+' />
+            <StatTile desc='előadó' number='14' />
+
+            {data.promoVideo.youtubeUrl && <PromoVideoTile data={data.promoVideo} />}
+            {data.giveaway.pictureUrl && <GiveawayTile data={data.giveaway} showLink={false} />}
+
+            <CountdownTile />
+            <NewsletterTile />
+            {/*{(data.mobilApp.androidUrl || data.mobilApp.iosUrl) && <MobilAppTile data={data.mobilApp} />} */}
+          </div>
+          <Image src={redPlanet} alt='Vörös bolygó' className='planet red-planet -z-10' />
+        </div>
+        {data.previousConferences.conferences.length > 0 && <ImageCarouselSection data={data.previousConferences} />}
+        <Image src={whitePlanet} alt='Fehér bolygó' className='planet white-planet' />
       </div>
+      <SponsorSection companies={data.sponsors.companies} sectionTitle={data.sponsors.sectionTitle} />
     </>
   );
 }