update readme

recreate web
- now using tailwind instead of unocss
- created theme/design system
- created first components
- add first sections/content

web/src/sections/Features.astro

@@ -0,0 +1,26 @@
+---
+import CardFeature from "@/components/Cards/CardFeature.astro";
+type Feature = {
+    title: string;
+    description: string;
+};
+
+const features: Array<Feature> = [
+    {
+        title: "Fast",
+        description:
+            "Thanks to rust with multithreading and skia we're really fast!",
+    },
+];
+---
+
+<div class="flex flex-row">
+    {
+        features.map((feature) => (
+            <CardFeature
+                title={feature.title}
+                description={feature.description}
+            />
+        ))
+    }
+</div>

web/src/sections/Introduction.astro

@@ -0,0 +1,23 @@
+<div class="flex flex-col gap-4">
+    <h2>The next generation motion design tool</h2>
+    <p>
+        We believe tools for expressing yourself should be accessible to
+        everybody. Not constrained to proprietary operating systems or monthly
+        subscriptions. You should own the tools you work with.
+    </p>
+    <p>
+        tempblade Creator aims to get a feasable alternative to current motion
+        design tools, and even exceed them in certain aspects like
+        extensibility. This is only possible due to our open source approach.
+        Currently we are in a early alpha stage, and the program has to be seen
+        as a proof of concept rather then a finished product.
+    </p>
+    <p>
+        You're a developer, like our idea and want to help? Join our discord or
+        check out the repository!
+    </p>
+    <p>
+        You're not a developer but still want to support the work? I've got a
+        patreon!
+    </p>
+</div>

web/src/sections/Landing.astro

@@ -0,0 +1,50 @@
+---
+import Button from "@/components/Button.astro";
+---
+
+<div class="h-[80vh] relative">
+    <div
+        class="z-0 absolute top-0 flex items-center w-full h-full justify-center object-center object-contain"
+        id="landing-bg-container"
+    >
+        <canvas
+            width="1920"
+            height="1080"
+            style="filter:blur(100px)"
+            class="w-[800px]"
+            id="landing-bg"></canvas>
+    </div>
+    <div
+        class="z-10 relative w-full h-full flex items-center flex-col justify-center"
+    >
+        <div class="flex flex-col justify-center items-center gap-2">
+            <h1 class="text-5xl text-center font-black">tempblade Creator</h1>
+            <h2 class="text-center text-xl font-normal">
+                Rust Based Open Source Motion Design Editor & Toolkit
+            </h2>
+            <Button>Explore now!</Button>
+        </div>
+    </div>
+</div>
+
+<script>
+    import { animate, inView } from "motion";
+    import { ease } from "@unom/style";
+
+    const landingBgContainer = document.getElementById("landing-bg");
+
+    if (landingBgContainer) {
+        inView(landingBgContainer, () => {
+            animate(
+                landingBgContainer,
+                {
+                    scale: [0.7, 1],
+                    opacity: [0, 1],
+                },
+                { ...ease.quint(2).out }
+            );
+        });
+    }
+</script>
+
+<script src="./bg.ts"></script>

web/src/sections/Start/Highlights.astro

@@ -1,40 +0,0 @@
----
-import HighlightCard from "components/Cards/Highlight.astro";
-import HighlightIcon from "components/Icons/Highlights/HighlightsIcon.astro";
----
-
-<section class="default-section">
-  <HighlightCard
-    title="Local"
-    description="Unleash the power of any machine rocking a modern browser"
-  >
-    <HighlightIcon slot="icon" name="local" />
-  </HighlightCard>
-  <HighlightCard
-    title="Resolution"
-    description="Experience high fidelity motion graphics like never before"
-  >
-    <HighlightIcon slot="icon" name="resolution" />
-  </HighlightCard>
-  <HighlightCard
-    title="Smooth"
-    description="Our Animations range from 24-60FPS"
-  >
-    <HighlightIcon slot="icon" name="smooth" />
-  </HighlightCard>
-</section>
-
-<style>
-  section {
-    display: flex;
-    gap: 1rem;
-    flex-direction: column;
-    justify-content: space-around;
-  }
-
-  @screen l {
-    section {
-      flex-direction: row;
-    }
-  }
-</style>

web/src/sections/bg.ts

@@ -0,0 +1,75 @@
+interface Point {
+  x: number;
+  y: number;
+  color: string;
+}
+
+interface VoronoiCell {
+  site: Point;
+  vertices: Point[];
+}
+
+function generateVoronoiPattern(
+  canvas: HTMLCanvasElement,
+  points: Array<Point>
+) {
+  const ctx = canvas.getContext("2d");
+
+  if (ctx) {
+    // Draw Voronoi regions
+    for (let x = 0; x < canvas.width; x++) {
+      for (let y = 0; y < canvas.height; y++) {
+        let closestPointIndex = 0;
+        let closestDistance = distance(x, y, points[0].x, points[0].y);
+
+        for (let i = 1; i < points.length; i++) {
+          const dist = distance(x, y, points[i].x, points[i].y);
+          if (dist < closestDistance) {
+            closestDistance = dist;
+            closestPointIndex = i;
+          }
+        }
+
+        const { x: px, y: py, color } = points[closestPointIndex];
+        ctx.fillStyle = color;
+        ctx.fillRect(x, y, 1, 1);
+      }
+    }
+  }
+}
+
+function distance(x1: number, y1: number, x2: number, y2: number) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+// Get canvas element and generate Voronoi pattern
+const canvas = document.getElementById("landing-bg") as HTMLCanvasElement;
+generateVoronoiPattern(canvas, [
+  {
+    x: 200,
+    y: 200,
+    color: "#8AFFAD",
+  },
+  {
+    x: 800,
+    y: 500,
+    color: "#326CCC",
+  },
+  {
+    x: 1100,
+    y: 300,
+    color: "#95B2F5",
+  },
+  {
+    x: 1200,
+    y: 600,
+    color: "#32C3E3",
+  },
+  {
+    x: 300,
+    y: 900,
+    color: "purple",
+  },
+]);