add app

web/src/components/Cards/Highlight.astro

@@ -0,0 +1,39 @@
+---
+export interface Props {
+  title: string;
+  description: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<div class="container">
+  <div class="icon-container mb-8">
+    <slot name="icon" />
+  </div>
+  <h3 class="mb-2">{title}</h3>
+  <p>{description}</p>
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 400px;
+
+    & p {
+      max-width: 300px;
+      line-height: 1.1;
+      text-align: center;
+    }
+
+    & .icon-container {
+      & svg {
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+</style>

web/src/components/Icons/Highlights/HighlightsIcon.astro

@@ -0,0 +1,21 @@
+---
+import SVG from "@jasikpark/astro-svg-loader";
+
+type IconName = "resolution" | "smooth" | "local";
+
+export interface Props {
+  name: IconName;
+}
+
+const { name } = Astro.props;
+
+const icons: Record<IconName, Promise<typeof import("*.svg")>> = {
+  resolution: import("./Icon_Resolution.svg?raw"),
+  smooth: import("./Icon_Smooth.svg?raw"),
+  local: import("./Icon_Local.svg?raw"),
+};
+
+const iconSrc = icons[name];
+---
+
+<SVG src={iconSrc} aria-label={name} />

web/src/components/Icons/Highlights/Icon_Local.svg

@@ -0,0 +1,4 @@
+<svg width="133" height="133" viewBox="0 0 133 133" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="66.5" cy="66.5" r="66.5" fill="#D9D9D9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M75 64.8956L90 53V75.3636L66.5 94L43 75.3636V53L56 63.3095L56 0H75L75 64.8956Z" fill="#161616"/>
+</svg>

web/src/components/Icons/Highlights/Icon_Resolution.svg

@@ -0,0 +1,23 @@
+<svg width="118" height="118" viewBox="0 0 118 118" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g style="mix-blend-mode:luminosity">
+<rect x="0.00012207" y="59.0001" width="59" height="59" fill="white"/>
+<rect x="59.0001" y="6.10352e-05" width="59" height="59" fill="#2D2D2D"/>
+<rect x="59.0001" y="59.0001" width="59" height="59" fill="#737373"/>
+</g>
+<g style="mix-blend-mode:luminosity">
+<rect y="29.5" width="29.5" height="29.5" fill="white"/>
+<rect x="29.5" width="29.5" height="29.5" fill="#2D2D2D"/>
+<rect x="29.5" y="29.5" width="29.5" height="29.5" fill="#737373"/>
+</g>
+<g style="mix-blend-mode:luminosity">
+<rect y="15" width="15" height="15" fill="white"/>
+<rect x="15" width="15" height="15" fill="#2D2D2D"/>
+<rect x="15" y="15" width="15" height="15" fill="#737373"/>
+</g>
+<g style="mix-blend-mode:luminosity">
+<rect y="7.5" width="7.5" height="7.5" fill="white"/>
+<rect x="7.5" width="7.5" height="7.5" fill="#2D2D2D"/>
+<rect x="7.5" y="7.5" width="7.5" height="7.5" fill="#737373"/>
+<rect width="7.5" height="7.5" fill="#828282"/>
+</g>
+</svg>

web/src/components/Icons/Highlights/Icon_Smooth.svg

@@ -0,0 +1,5 @@
+<svg width="133" height="133" viewBox="0 0 133 133" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="66.5" cy="40" rx="39.5" ry="39" fill="#D9D9D9" fill-opacity="0.4"/>
+<ellipse cx="66.5" cy="94" rx="39.5" ry="39" fill="#D9D9D9" fill-opacity="0.58"/>
+<circle cx="67" cy="68" r="39" fill="#D9D9D9" fill-opacity="0.4"/>
+</svg>

web/src/components/Layout/Footer.astro

@@ -0,0 +1,70 @@
+---
+type NavigationItem = {
+  path: string;
+  label: string;
+};
+
+type NavigationGroup = {
+  title: string;
+  items: Array<NavigationItem>;
+};
+
+const tree: Array<NavigationGroup> = [
+  {
+    title: "Overview",
+    items: [
+      {
+        path: "/",
+        label: "Landing",
+      },
+      {
+        path: "/blog",
+        label: "Blog",
+      },
+      {
+        path: "/contact",
+        label: "Contact",
+      },
+    ],
+  },
+  {
+    title: "Legal",
+    items: [
+      { path: "/legal/imprint", label: "Imprint" },
+      {
+        path: "/legal/privacy-policy",
+        label: "Privacy Policy",
+      },
+    ],
+  },
+];
+---
+
+<footer class="py-4">
+  <div class="m-auto flex flex-row flex-wrap gap-12 inner-container">
+    {
+      tree.map((group) => (
+        <div>
+          <h3 class="mb-2">{group.title}</h3>
+          <div class="flex flex-col">
+            {group.items.map((item) => (
+              <a href={item.path}>{item.label}</a>
+            ))}
+          </div>
+        </div>
+      ))
+    }
+  </div>
+</footer>
+
+<style>
+  footer {
+    background-color: var(--color-neutral-accent);
+
+    & .inner-container {
+      max-width: var(--content-max-width);
+      margin: auto;
+      padding: var(--padding-main);
+    }
+  }
+</style>

web/src/components/Layout/Header.astro

@@ -0,0 +1,48 @@
+---
+import Logo from "components/Logo.astro";
+---
+
+<header id="main-header">
+  <div class="inner-container">
+    <Logo />
+    <button id="get-started-button" class="button">Get Started</button>
+  </div>
+</header>
+<script>
+  import { animate } from "motion";
+  import { ease } from "@unom/style";
+
+  const getStartedButton = document.getElementById("get-started-button");
+  const header = document.getElementById("main-header");
+
+  if (header) {
+    animate(header, { opacity: [0, 1], y: ["-101%", 0] }, ease.quart(0.6).out);
+  }
+
+  if (getStartedButton) {
+    animate(
+      getStartedButton,
+      { scale: [0, 1] },
+      { ...ease.quart(0.6).out, delay: 0 }
+    );
+  }
+</script>
+<style lang="postcss">
+  header {
+    position: fixed;
+    width: 100%;
+    top: 2rem;
+    z-index: 99;
+
+    & .inner-container {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: row;
+      border-radius: 100px;
+      margin: auto;
+      max-width: var(--content-max-width);
+      padding: var(--padding-main);
+      background-color: var(--color-neutral-accent);
+    }
+  }
+</style>

web/src/components/Logo.astro

@@ -0,0 +1,42 @@
+<a id="logo" class="block" href="/">
+  <h1 class="text-4xl leading-8 font-bold">
+    <span>p</span><span>l</span><span>a</span><span>y</span>
+  </h1>
+</a>
+<style>
+  a {
+    display: block;
+    overflow: visible;
+  }
+  h1 {
+    display: block;
+    padding: 4px;
+    margin-bottom: 0.25rem;
+    background-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0.4));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    width: fit-content;
+
+    &:hover {
+      -webkit-text-stroke: 1px #eee;
+    }
+
+    & span {
+      display: inline-block;
+    }
+  }
+</style>
+<script>
+  import { animate, stagger } from "motion";
+  import { ease } from "@unom/style";
+
+  const logoText = document.querySelectorAll("#logo h1")[0];
+
+  console.log(logoText);
+
+  animate(
+    logoText.children as any,
+    { y: [-30, 0], opacity: [0, 1] },
+    { ...ease.quint(0.7).out, delay: stagger(0.1) }
+  );
+</script>

web/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

web/src/layouts/Layout.astro

@@ -0,0 +1,116 @@
+---
+import Header from "components/Layout/Header.astro";
+import Footer from "components/Layout/Footer.astro";
+
+export interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>tempblade Creator - {title}</title>
+  </head>
+  <body>
+    <Header />
+    <slot />
+    <Footer />
+  </body>
+</html>
+<style is:global>
+  :root {
+    --font-main: "Gilroy", system-ui, sans-serif;
+
+    --font-size-s: 0.8rem;
+    --font-size-m: 1rem;
+    --font-size-l: 1.2rem;
+    --font-size-xl: 2.5rem;
+    --font-size-xxl: 3rem;
+
+    --color-neutral: #222;
+    --color-neutral-accent: #333;
+    --color-main: #eee;
+
+    --padding-main: 24px 48px;
+
+    --content-max-width: 1600px;
+  }
+  html {
+    font-family: system-ui, sans-serif;
+    color: var(--color-main);
+    background-color: var(--color-neutral);
+  }
+  code {
+    font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
+      DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+  }
+
+  h1 {
+    font-weight: 800;
+    font-size: var(--font-size-xxl);
+  }
+
+  h2 {
+    font-weight: 700;
+
+    font-size: var(--font-size-xl);
+  }
+
+  h3 {
+    font-weight: 600;
+    font-size: var(--font-size-l);
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-weight: 500;
+    font-size: var(--font-size-m);
+  }
+
+  p {
+    max-width: 600px;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-main);
+    line-height: 1;
+  }
+
+  p,
+  li,
+  button,
+  a {
+    font-family: var(--font-main);
+  }
+
+  .button {
+    background-color: #563795;
+    padding: 0.75rem 1.25rem;
+    border-radius: 30px;
+    transition: filter 0.1s linear;
+    font-weight: 600;
+
+    &:hover {
+      filter: brightness(0.8);
+    }
+  }
+
+  .default-section {
+    max-width: var(--content-max-width);
+    padding: var(--padding-main);
+    margin: auto;
+  }
+</style>

web/src/pages/index.astro

@@ -0,0 +1,78 @@
+---
+import Layout from "layouts/Layout.astro";
+import SectionHighlights from "sections/Start/Highlights.astro";
+---
+
+<Layout title="Free Intro Maker">
+  <main>
+    <section class="default-section" id="header">
+      <div class="heading-container">
+        <h1 class="my-4 font-bold">
+          Motion Graphics made easy, <br /> for free!
+        </h1>
+        <p>
+          Thats right! Create an intro, outro or other motion graphic elements
+          right in your browser for free. How is this possible? Through the
+          power of open source software!
+        </p>
+      </div>
+      <div class="illustration-container">
+        <svg viewBox="0 0 1000 1000">
+          <circle cx="500" cy="500" r="300"></circle>
+        </svg>
+      </div>
+    </section>
+    <SectionHighlights />
+  </main>
+  <script>
+    import { animate, stagger } from "motion";
+    import { ease } from "@unom/style";
+
+    const headingContainer = document.querySelectorAll(
+      "#header .heading-container"
+    )[0];
+
+    console.log(headingContainer);
+
+    animate(
+      headingContainer.children as any,
+      { y: [50, 0], opacity: [0, 1] },
+      { ...ease.quart(0.6).out, delay: stagger(0.1) }
+    );
+    window.sessionStorage.setItem("did_animation_run", "1");
+  </script>
+
+  <style>
+    #header {
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      & .heading-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+
+      & .illustration-container {
+        width: 100%;
+        height: 100%;
+
+        & svg {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    @screen 2xl {
+      #header {
+        flex-direction: row;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr;
+      }
+    }
+  </style>
+</Layout>

web/src/sections/Start/Highlights.astro

@@ -0,0 +1,40 @@
+---
+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>