mirror of
https://github.com/jimeh/commonflow.org.git
synced 2026-02-19 05:46:40 +00:00
feat(design): complete redesign of website
Redesign the website with a more modern look.
This commit is contained in:
149
src/components/Hero.astro
Normal file
149
src/components/Hero.astro
Normal file
@@ -0,0 +1,149 @@
|
||||
---
|
||||
import VersionSelector from "./VersionSelector.astro";
|
||||
import ThemeToggle from "./ThemeToggle.astro";
|
||||
import { config } from "../config";
|
||||
|
||||
interface Props {
|
||||
version: string;
|
||||
svgPath: string;
|
||||
}
|
||||
|
||||
const { version, svgPath } = Astro.props;
|
||||
---
|
||||
|
||||
<section
|
||||
id="hero"
|
||||
class="relative min-h-[75vh] flex flex-col items-center justify-center
|
||||
px-6 py-16 overflow-hidden"
|
||||
>
|
||||
<!-- Background gradient/texture -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-secondary)]
|
||||
to-[var(--color-bg-primary)]
|
||||
dark:from-[var(--color-dark-bg-secondary)]
|
||||
dark:to-[var(--color-dark-bg-primary)]"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Subtle grid pattern -->
|
||||
<div
|
||||
class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05]"
|
||||
style="background-image: linear-gradient(var(--color-text-primary) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--color-text-primary) 1px, transparent 1px);
|
||||
background-size: 60px 60px;"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Top bar with version & theme -->
|
||||
<div
|
||||
class="absolute top-0 inset-x-0 flex items-center justify-between
|
||||
px-6 py-4 animate-fade-in-down"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<VersionSelector
|
||||
currentVersion={version}
|
||||
versions={Array.from(config.versions)}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<ThemeToggle />
|
||||
<a
|
||||
href={config.repoUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="p-2 rounded-lg text-[var(--color-text-muted)]
|
||||
dark:text-[var(--color-dark-text-muted)]
|
||||
hover:text-[var(--color-text-primary)]
|
||||
dark:hover:text-[var(--color-dark-text-primary)]
|
||||
hover:bg-white/50 dark:hover:bg-white/10
|
||||
transition-colors"
|
||||
aria-label="View on GitHub"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="relative z-10 w-full max-w-4xl mx-auto text-center">
|
||||
<!-- Title -->
|
||||
<h1
|
||||
class="animate-fade-in-up mb-4
|
||||
text-[var(--color-text-primary)]
|
||||
dark:text-[var(--color-dark-text-primary)]"
|
||||
>
|
||||
Git Common-Flow
|
||||
</h1>
|
||||
|
||||
<!-- Tagline -->
|
||||
<p
|
||||
class="animate-fade-in-up delay-100
|
||||
text-lg sm:text-xl max-w-2xl mx-auto mb-8
|
||||
text-[var(--color-text-secondary)]
|
||||
dark:text-[var(--color-dark-text-secondary)]"
|
||||
>
|
||||
A sensible git workflow for teams who ship
|
||||
</p>
|
||||
|
||||
<!-- Version badge -->
|
||||
<div class="animate-fade-in-up delay-200 mb-10">
|
||||
<span class="version-badge">v{version}</span>
|
||||
</div>
|
||||
|
||||
<!-- SVG Diagram -->
|
||||
<div
|
||||
class="animate-fade-in-up delay-300
|
||||
relative mx-auto mb-12 p-4 sm:p-8
|
||||
bg-white dark:bg-[var(--color-dark-bg-secondary)]
|
||||
rounded-2xl shadow-lg dark:shadow-none
|
||||
border border-[var(--color-border)]
|
||||
dark:border-[var(--color-dark-border)]"
|
||||
>
|
||||
<img
|
||||
src={svgPath}
|
||||
alt="Git Common-Flow diagram"
|
||||
class="w-full h-auto max-w-3xl mx-auto
|
||||
dark:invert dark:hue-rotate-180 dark:contrast-90"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Navigation links -->
|
||||
<nav
|
||||
class="animate-fade-in-up delay-400
|
||||
flex flex-wrap items-center justify-center gap-4"
|
||||
>
|
||||
<a href="#about" class="btn btn-ghost">About</a>
|
||||
<a href="#spec" class="btn btn-primary">Read the Spec</a>
|
||||
<a href="#faq" class="btn btn-ghost">FAQ</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Scroll indicator -->
|
||||
<a
|
||||
href="#about"
|
||||
class="absolute bottom-8 left-1/2 -translate-x-1/2
|
||||
animate-fade-in delay-700
|
||||
text-[var(--color-text-muted)]
|
||||
dark:text-[var(--color-dark-text-muted)]
|
||||
hover:text-[var(--color-accent)] transition-colors"
|
||||
aria-label="Scroll to content"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 animate-bounce-subtle"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</section>
|
||||
Reference in New Issue
Block a user