tempblade/creator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update readme

Browse Source 
recreate web
- now using tailwind instead of unocss
- created theme/design system
- created first components
- add first sections/content
This commit is contained in:
Enrico Bühler
2023-06-25 13:31:24 +02:00
parent 5791b61a48
commit 518b819fe8
34 changed files with 1643 additions and 2091 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
web/src/pages/index.astro
View File

@@ -1,78 +1,43 @@
---
import Layout from "layouts/Layout.astro";
import SectionHighlights from "sections/Start/Highlights.astro";
import RootLayout from "@/layouts/RootLayout.astro";
import Section from "@/components/Section.astro";
import Button from "@/components/Button.astro";
import Landing from "@/sections/Landing.astro";
import Introduction from "@/sections/Introduction.astro";
import Features from "@/sections/Features.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>
<RootLayout title="tempblade - Creator">
<main>
<Section>
<Landing />
</Section>
<Section>
<Introduction />
</Section>
<Section>
<Features />
</Section>
<Section id="test">
<h1>Hallo!</h1>
<h2>Wie gehts</h2>
<h3>Wie gehts</h3>
<h4>Wie gehts</h4>
<h5>Wie gehts</h5>
<p>
cssnano is powered by PostCSS, a tool for transforming styles
with JavaScript. Specifically, its plugin architecture allows us
to compose cssnano out of small modules with limited
responsibilities. It also allows you to easily insert cssnano
into your build step, along with other processors that can lint
your CSS for errors, or transpile future syntax.
</p>
<Button>Hallo</Button>
<Button variant="secondary">Hallo</Button>
<Button variant="ghost">Hallo</Button>
<Button variant="destructive">Hallo</Button>
<Button variant="outline">Hallo</Button>
<Button variant="link">Hallo</Button>
</Section>
</main>
</RootLayout>