base

package.json

@@ -23,6 +23,7 @@
     "@vibrant/image": "3.2.1-alpha.1",
     "astro": "^4.3.2",
     "chroma-js": "^2.4.2",
+    "clsx": "^2.1.1",
     "date-fns": "^3.3.1",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",

src/components/3dCard/CardBody.svelte

@@ -0,0 +1,5 @@
+<div
+  class={`h-96 w-96 [transform-style:preserve-3d]  [&>*]:[transform-style:preserve-3d] ${$$restProps.class}`}
+>
+  <slot />
+</div>

src/components/3dCard/CardContainer.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" context="module">
+export type Card3dContext = Writable<{
+  hasMouseEntered: boolean
+  coordinates: [x: number, y: number]
+}>
+</script>
+
+<script lang="ts">
+import { setContext } from "svelte"
+import { writable, type Writable } from "svelte/store"
+
+export let containerClass: string | undefined = undefined
+
+let wrapperElement: HTMLDivElement
+const context = setContext(
+  "3dCard",
+  writable({
+    hasMouseEntered: false,
+    coordinates: [0, 0],
+  }) as Card3dContext,
+)
+
+function handleMouseMove(e: MouseEvent) {
+  const { left, top, width, height } = wrapperElement.getBoundingClientRect()
+  const x = e.clientX - left - width / 2
+  const y = e.clientY - top - height / 2
+
+  context.update((state) => ({ ...state, coordinates: [x, y] }))
+}
+
+function handleMouseEnter(e: MouseEvent) {
+  context.update((state) => ({ ...state, hasMouseEntered: true }))
+}
+
+function handleMouseLeave(e: MouseEvent) {
+  context.update((_) => ({ coordinates: [0, 0], hasMouseEntered: false }))
+}
+</script>
+
+<div class="flex items-center justify-center [perspective:1000px]">
+  <div
+    class={`${containerClass} group/card translate flex w-max  items-center  justify-center transition-all  [transform-style:preserve-3d]  `}
+    on:mouseenter={handleMouseEnter}
+    on:mouseleave={handleMouseLeave}
+    on:mousemove={handleMouseMove}
+    bind:this={wrapperElement}
+    role="contentinfo"
+    style:transform={`rotateY(${$context.coordinates[ 0 ] / 25}deg) rotateX(${$context.coordinates[ 1 ] / 25}deg) `}
+  >
+    <div
+      class={`${$$restProps.class} relative flex  items-center justify-center   transition-all duration-200 ease-linear [transform-style:preserve-3d] `}
+    >
+      <slot />
+    </div>
+  </div>
+</div>

src/components/3dCard/CardItem.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+import { getContext } from "svelte"
+import type { Card3dContext } from "./CardContainer.svelte"
+
+export let translateX: number = 0
+export let translateY: number = 0
+export let translateZ: number = 0
+export let rotateX: number = 0
+export let rotateY: number = 0
+export let rotateZ: number = 0
+
+const context: Card3dContext = getContext("3dCard")
+if (!context) {
+  throw new Error("No context found for CardItem provided")
+}
+</script>
+
+<div
+  class={`w-fit transition  duration-200 ease-linear [transform-style:preserve-3d] [&>*]:[transform-style:preserve-3d] ${$$restProps.class}`}
+  style:transform={$context.hasMouseEntered ? `translateX(${translateX }px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)` :`translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`}
+>
+  <slot>Forgot to add something here</slot>
+</div>
+
+<!-- style:transform={$context.hasMouseEntered ? `translateX(${translateX }px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)` :`translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`} -->

src/components/organizationPage/TeamCards.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+import CardBody from "#components/3dCard/CardBody.svelte"
+import CardContainer from "#components/3dCard/CardContainer.svelte"
+import CardItem from "#components/3dCard/CardItem.svelte"
+</script>
+
+<!-- Context doesnt work with Astro, so lets create this slice fully in Svelte -->
+
+<div
+  class="flex max-w-full flex-wrap items-center justify-center gap-8 px-8 lg:grid lg:grid-cols-3"
+>
+  <CardContainer containerClass="mt-20">
+    <CardBody
+      class="group/card relative h-auto w-auto rounded-xl border border-white/[0.2] bg-black p-6 hover:shadow-2xl hover:shadow-emerald-500/[0.1] sm:w-[30rem]"
+    >
+      <CardItem class="w-full text-xl font-bold  text-white" translateZ={20}>
+        <div class="mb-4 flex w-full items-center justify-center">
+          <img
+            src="https://images-ext-1.discordapp.net/external/Sfe4WDX8-BapzTSt6PBRm7G3JtznnVE8dCN0-pWQmn8/https/s.mj.run/nG05gh6Li-w?format=webp&width=979&height=979"
+            class="-mt-20 size-80 rounded-xl shadow-2xl shadow-purple-500 outline outline-pink-500/20"
+            alt="RFC Team logo"
+          />
+        </div>
+      </CardItem>
+      <CardItem class="text-xl font-bold  text-white" translateZ={40}>
+        <h3 class="">RFC Steering Committee</h3>
+      </CardItem>
+      <CardItem class="text-base  text-white" translateZ={120}>
+        <p class="font-medium text-slate-400">
+          Ideate. Debate. Progress. Debate again.
+        </p>
+      </CardItem>
+    </CardBody>
+
+    <div
+      class="absolute inset-[-2px] -z-10 rounded-xl bg-gradient-to-tl from-pink-500 via-purple-500 to-cyan-500"
+    ></div>
+  </CardContainer>
+
+  <CardContainer containerClass="mt-20">
+    <CardBody
+      class="group/card relative h-auto w-auto rounded-xl border border-white/[0.2] bg-black p-6 hover:shadow-2xl hover:shadow-emerald-500/[0.1] sm:w-[30rem]"
+    >
+      <CardItem class="w-full text-xl font-bold  text-white" translateZ={20}>
+        <div class="flex w-full items-center justify-center">
+          <img
+            src="https://images-ext-1.discordapp.net/external/Sfe4WDX8-BapzTSt6PBRm7G3JtznnVE8dCN0-pWQmn8/https/s.mj.run/nG05gh6Li-w?format=webp&width=979&height=979"
+            class="-mt-20 size-80 rounded-xl shadow-2xl shadow-cyan-500 outline outline-cyan-500/20"
+            alt="RFC Team logo"
+          />
+        </div>
+      </CardItem>
+      <CardItem class="text-xl font-bold  text-white" translateZ={40}>
+        <h3 class="">RFC Steering Committee</h3>
+      </CardItem>
+      <CardItem class="text-xl font-bold  text-white" translateZ={120}>
+        <p class="font-medium text-slate-400">
+          Ideate. Debate. Progress. Debate again.
+        </p>
+      </CardItem>
+    </CardBody>
+
+    <div
+      class="absolute inset-[-2px] -z-10 rounded-xl bg-gradient-to-tr from-pink-500 via-purple-500 to-cyan-500"
+    ></div>
+  </CardContainer>
+  <CardContainer containerClass="mt-20">
+    <CardBody
+      class="group/card relative h-auto w-auto rounded-xl border border-white/[0.2] bg-black p-6 hover:shadow-2xl hover:shadow-emerald-500/[0.1] sm:w-[30rem]"
+    >
+      <CardItem class="w-full text-xl font-bold  text-white" translateZ={20}>
+        <div class="flex w-full items-center justify-center">
+          <img
+            src="https://images-ext-1.discordapp.net/external/Sfe4WDX8-BapzTSt6PBRm7G3JtznnVE8dCN0-pWQmn8/https/s.mj.run/nG05gh6Li-w?format=webp&width=979&height=979"
+            class="-mt-20 size-80 rounded-xl shadow-2xl shadow-cyan-500 outline outline-cyan-500/20"
+            alt="RFC Team logo"
+          />
+        </div>
+      </CardItem>
+      <CardItem class="text-xl font-bold  text-white" translateZ={40}>
+        <h3 class="">RFC Steering Committee</h3>
+      </CardItem>
+      <CardItem class="text-xl font-bold  text-white" translateZ={120}>
+        <p class="font-medium text-slate-400">
+          Ideate. Debate. Progress. Debate again.
+        </p>
+      </CardItem>
+    </CardBody>
+
+    <div
+      class="absolute inset-[-2px] -z-10 rounded-xl bg-gradient-to-tr from-pink-500 via-purple-500 to-cyan-500"
+    ></div>
+  </CardContainer>
+</div>

src/pages/organization.astro

@@ -0,0 +1,33 @@
+---
+import FancyTitle from "#components/FancyTitle.astro"
+import Layout from "#layouts/HomeLayout.astro"
+import TeamCards from "#components/organizationPage/TeamCards.svelte"
+---
+
+<Layout title="Hyprland Community Organization">
+  <main
+    class="flex min-h-[max(42rem,calc(100vh-8rem))] w-full min-w-0 flex-col items-center justify-center gap-8 p-4 md:gap-12 md:p-8"
+  >
+    <FancyTitle
+      label="Organization"
+      colors={["#0ee7f6", "#00237a", "#00A2F8"]}
+    />
+
+    <p
+      class="mb-6 text-center text-lg font-bold text-slate-300 lg:text-xl xl:text-2xl"
+    >
+      Our structure and teams
+    </p>
+
+    <TeamCards client:idle />
+  </main>
+
+  <ul
+    class="z-20 mx-auto mb-24 grid w-full max-w-screen-3xl grid-cols-1 justify-center gap-4 px-8 lg:gap-5 lg:px-12 xl:grid-cols-6 xl:gap-8"
+  >
+    <li class="xl:col-span-4"></li>
+    <li class="col-span-2"></li>
+  </ul>
+</Layout>
+
+<!-- class="group/card relative h-auto w-auto rounded-xl border border-black/[0.1] bg-gray-50 p-6 sm:w-[30rem] dark:border-white/[0.2] dark:bg-black dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1]" -->