feat: new design for koodiklinikka.fi

Co-authored-by: Aarni Koskela <akx@iki.fi>
2026-03-18 04:05:09 +00:00 · 2024-05-30 15:25:21 +03:00
parent 2791108118
commit 33f35b4a5a
98 changed files with 2519 additions and 3843 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -0,0 +1,99 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .text-shadow {
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.title-highlight {
+  background: linear-gradient(200deg, #ff0098 20%, #0ef 80%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(0 0 20px rgba(255, 0, 234, 0.2));
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  .title-highlight {
+    background: linear-gradient(200deg, oklch(68% 0.5 340) 20%, oklch(90% 0.5 200) 100%);
+
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    filter: drop-shadow(0 0 20px oklch(80% 0.41 211 / 20%));
+  }
+}
+
+.bg-button {
+  background: linear-gradient(200deg, #f0f 20%, #ff00c4 100%);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  .bg-button {
+    background: linear-gradient(200deg, oklch(100% 0.5 340) 20%, oklch(86% 0.5 360) 100%);
+  }
+}
+
+html {
+  background: #070b1e url('../public/background.webp');
+  background-size: 1024px auto;
+  background-position: top center;
+  background-repeat: no-repeat;
+  scroll-behavior: smooth;
+}
+
+@media (min-width: 1024px) {
+  html {
+    background-size: 100% auto;
+  }
+}
+
+h1,
+h2,
+h3 {
+  text-wrap: balance;
+}
+
+.checkbox svg {
+  display: none;
+}
+
+input[type='checkbox']:checked + .checkbox {
+  background-color: #ef008e;
+  border-color: #ff0099;
+}
+
+input[type='checkbox']:checked + .checkbox svg {
+  display: block;
+  align-items: center;
+  justify-items: center;
+  width: 80%;
+  height: auto;
+}
+
+input[type='checkbox']:focus + .checkbox {
+  outline: 2px solid var(--tw-color-red-800);
+  outline-offset: 2px;
+}
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 20%;
+  }
+  50% {
+    opacity: 100%;
+  }
+  100% {
+    opacity: 20%;
+  }
+}
+
+.fade-in-out {
+  opacity: 20%;
+  animation: fadeInOut 4s ease-in-out infinite;
+}
--- a/app/icon.png
+++ b/app/icon.png
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -0,0 +1,27 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import BottomFade from '@/components/BottomFade';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Koodiklinikka',
+  description: 'Yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille harrastajille ja ammattilaisille',
+  robots: 'noindex',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="fi">
+      <body className={`${inter.className} pb-24 text-white`}>
+        {children}
+        <BottomFade />
+      </body>
+    </html>
+  );
+}
--- a/app/opengraph-image.alt.txt
+++ b/app/opengraph-image.alt.txt
@@ -0,0 +1 @@
+Koodiklinikka on Suomen suurin ohjelmistoalan yhteisö, joka tuo alan ammattilaiset ja harrastajat yhteen
--- a/app/opengraph-image.jpg
+++ b/app/opengraph-image.jpg
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -0,0 +1,105 @@
+import shuffle from 'lodash.shuffle';
+
+import ChannelGrid from '@/components/ChannelGrid';
+import FeatureImage from '@/components/FeatureImage';
+import Footer from '@/components/Footer';
+import Hero from '@/components/Hero';
+import Nav from '@/components/Nav';
+import Wrapper from '@/components/Wrapper';
+
+async function getChannels() {
+  const res = await fetch('https://stats.koodiklinikka.fi/api/channels', { next: { revalidate: 3600 } });
+
+  if (!res.ok) {
+    // This will activate the closest `error.js` Error Boundary
+    throw new Error('Failed to fetch data');
+  }
+
+  return res.json();
+}
+
+export default async function Home() {
+  let channels: Channel[] = await getChannels();
+  channels = channels.sort((a, b) => (a.messages_today > b.messages_today ? -1 : 1));
+
+  return (
+    <>
+      <Nav />
+      <main className="mt-20">
+        <Wrapper>
+          <Hero />
+
+          <div className="text-shadow py-16 lg:my-24">
+            <h2 className="mx-auto max-w-screen-xs text-center text-2xl font-extrabold md:max-w-none md:text-3xl">
+              Suosituimmat keskustelunaiheet tänään
+            </h2>
+
+            <ChannelGrid channels={channels.splice(0, 12)} />
+
+            <div className="mx-auto max-w-md p-6 text-center font-mono text-sm leading-relaxed text-fuchsia-100/60 lg:max-w-3xl">
+              Ja paljon muuta:{' '}
+              {shuffle(channels.splice(0, 20))
+                .map<React.ReactNode>((channel) => (
+                  <a
+                    key={channel.id}
+                    href={`https://app.slack.com/client/T03BQ3NU9/${channel.id}`}
+                    target="_blank"
+                    className="underline-offset-4 hover:underline"
+                  >
+                    #{channel.name}
+                  </a>
+                ))
+                .reduce((prev, curr) => [prev, ', ', curr])}
+              …
+            </div>
+          </div>
+
+          <div className="mx-auto max-w-lg space-y-14 p-6 md:p-12 lg:max-w-none lg:space-y-28">
+            <div className="text-shadow grid gap-10 lg:grid-cols-2 lg:gap-16">
+              <div className="lg:order-2">
+                <FeatureImage src="/meetup.webp" alt="" width="1792" height="1024" />
+              </div>
+              <div className="flex flex-col justify-center space-y-5 lg:order-1">
+                <h2 className="text-3xl font-extrabold">Yhteisö ohjelmoinnista kiinnostuneille</h2>
+                <div className="space-y-5 font-mono text-sm leading-relaxed text-pink-100">
+                  <p>
+                    Koodiklinikka on Suomen suurin ohjelmistoalan yhteisö, joka kokoaa yhteen ammattilaiset, harrastajat
+                    ja vasta-alkajat. Tavoitteenamme on yhdistää ja kasvattaa suomalaista ohjelmointiyhteisöä sekä
+                    tarjota apua ja uusia kontakteja kaikille ohjelmoinnista innostuneille.
+                  </p>
+
+                  <p>
+                    Liittyminen on ilmaista ja helppoa. Jätä sähköpostiosoitteesi{' '}
+                    <a href="#liity" className="underline underline-offset-4">
+                      yllä olevaan kenttään
+                    </a>
+                    , niin lähetämme sinulle kutsun Slack-yhteisöömme.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="text-shadow grid gap-10 lg:grid-cols-2 lg:gap-16">
+              <div>
+                <FeatureImage src="/opensource.webp" alt="" width="1792" height="1024" />
+              </div>
+              <div className="flex flex-col justify-center space-y-5">
+                <h2 className="text-3xl font-extrabold">Avoin lähdekoodi &lt;3</h2>
+                <div className="space-y-5 font-mono text-sm leading-relaxed text-pink-100">
+                  <p>
+                    Suosimme avointa lähdekoodia ja kaikki käyttämämme koodi on vapaasti saatavilla sekä
+                    hyödynnettävissä Github-organisaatiomme sivulta. Organisaation jäseneksi otamme kaikki
+                    Slack-yhteisömme jäsenet. Koodiklinikan projekteihin voi osallistua kuka tahansa ja muutosideat ovat
+                    aina lämpimästi tervetulleita!
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Wrapper>
+      </main>
+
+      <Footer />
+    </>
+  );
+}
--- a/app/twitter-image.alt.txt
+++ b/app/twitter-image.alt.txt
@@ -0,0 +1 @@
+Koodiklinikka on Suomen suurin ohjelmistoalan yhteisö, joka tuo alan ammattilaiset ja harrastajat yhteen
--- a/app/twitter-image.jpg
+++ b/app/twitter-image.jpg
				`@@ -0,0 +1 @@`
				`Koodiklinikka on Suomen suurin ohjelmistoalan yhteisö, joka tuo alan ammattilaiset ja harrastajat yhteen`