Skip to content

Commit ac995e1

Browse files
timokoesslertimokoessler
authored
feat: Redesign start page (#33)
1 parent eb2b538 commit ac995e1

6 files changed

Lines changed: 70 additions & 45 deletions

File tree

‎content/docs/setup/installation.mdx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ title: Installation
33
description: Get OrcaCD running quickly with Docker
44
---
55

6+
<Callout title="Project state" type="warn">
7+
OrcaCD is in early development and not yet production-ready. There are no stable releases. Expect
8+
breaking changes at any time.
9+
</Callout>
10+
611
## Start Hub and Agent [step]
712

813
Download the [`docker-compose.yml`](https://raw.githubusercontent.com/OrcaCD/orca-cd/main/docker-compose.yml) and [`.env`](https://raw.githubusercontent.com/OrcaCD/orca-cd/main/.env.example) file:

‎public/assets/docs/orca-apps-screenshot.avif‎

21.5 KB
Binary file not shown.

‎public/assets/docs/orca-apps-screenshot.png‎

84.7 KB
Loading

‎public/assets/docs/orca-apps-screenshot.webp‎

37.7 KB
Loading

‎src/routes/index.tsx‎

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -63,53 +63,51 @@ function SmallFeature({
6363
function Home() {
6464
return (
6565
<HomeLayout {...baseOptions()} links={navbarLinks}>
66-
<section className="relative overflow-hidden border-b border-fd-border">
67-
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,var(--color-fd-primary)/0.08,transparent_60%)]" />
68-
<div className="relative mx-auto max-w-5xl px-6 py-24 text-center md:py-36">
69-
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-fd-border bg-fd-card px-4 py-1.5 text-sm text-fd-muted-foreground">
70-
<Container className="size-4" />
71-
GitOps for Docker
72-
</div>
73-
<h1 className="mx-auto max-w-3xl text-4xl font-bold tracking-tight text-fd-foreground md:text-6xl">
74-
OrcaCD
75-
</h1>
76-
<p className="mx-auto mt-6 max-w-2xl text-lg text-fd-muted-foreground">
77-
OrcaCD is a simple GitOps controller for Docker Compose. Deploy and manage your services
78-
with ease, directly from your Git repository.
79-
</p>
80-
<div className="mt-10 flex flex-wrap items-center justify-center gap-4">
81-
<Link
82-
to="/docs/$"
83-
params={{ _splat: "setup/installation" }}
84-
className="inline-flex items-center gap-2 rounded-lg bg-fd-primary px-5 py-2.5 text-sm font-medium text-fd-primary-foreground transition-opacity hover:opacity-90"
85-
>
86-
<Rocket className="size-4" />
87-
Get Started
88-
</Link>
66+
<section className="px-6 py-24 md:py-36 border-b border-fd-border ">
67+
<div className="flex flex-col xl:flex-row gap-14 xl:gap-6 justify-between items-center max-w-6xl mx-auto">
68+
<div className="flex flex-col">
69+
<h1 className="text-4xl font-bold tracking-tight md:text-6xl leading-[1.4] hero-text-bg">
70+
OrcaCD
71+
</h1>
72+
<p className="max-w-2xl text-4xl font-medium text-fd-foreground tracking-tight">
73+
GitOps for Docker
74+
</p>
75+
<p className="max-w-[24rem] text-lg text-fd-muted-foreground mt-4">
76+
Deploy and manage your services with ease, directly from your Git repository.
77+
</p>
78+
<div className="flex flex-wrap items-center gap-4 mt-6">
79+
<Link
80+
to="/docs/$"
81+
params={{ _splat: "setup/installation" }}
82+
className="inline-flex items-center gap-2 rounded-lg bg-fd-primary px-5 py-2.5 text-sm font-medium text-fd-primary-foreground transition-opacity hover:opacity-90"
83+
>
84+
<Rocket className="size-4" />
85+
Get Started
86+
</Link>
8987

90-
<Link
91-
to="/docs/$"
92-
params={{ _splat: "demo" }}
93-
className="inline-flex items-center gap-2 rounded-lg bg-fd-secondary px-5 py-2.5 text-sm font-medium text-fd-secondary-foreground transition-opacity hover:opacity-90"
94-
>
95-
<Play className="size-4" />
96-
Demo
97-
</Link>
88+
<Link
89+
to="/docs/$"
90+
params={{ _splat: "demo" }}
91+
className="inline-flex items-center gap-2 rounded-lg bg-fd-secondary px-5 py-2.5 text-sm font-medium text-fd-secondary-foreground transition-opacity hover:opacity-90"
92+
>
93+
<Play className="size-4" />
94+
Demo
95+
</Link>
96+
</div>
9897
</div>
99-
</div>
100-
</section>
10198

102-
<section className="border-b border-fd-border">
103-
<div className="mx-auto max-w-5xl px-6 py-16 text-center">
104-
<div className="overflow-hidden rounded-xl border border-fd-border bg-fd-card shadow-lg">
105-
<div className="flex items-center gap-2 border-b border-fd-border px-4 py-3">
106-
<div className="size-3 rounded-full bg-fd-muted-foreground/20" />
107-
<div className="size-3 rounded-full bg-fd-muted-foreground/20" />
108-
<div className="size-3 rounded-full bg-fd-muted-foreground/20" />
109-
</div>
110-
<div className="flex items-center justify-center p-12 text-fd-muted-foreground">
111-
<p className="text-sm italic">TODO: Add OrcaCD dashboard screenshot image</p>
112-
</div>
99+
<div className="relative">
100+
<div className="hero-img-bg" />
101+
<picture>
102+
<source type="image/avif" srcSet="/assets/docs/orca-apps-screenshot.avif" />
103+
<source type="image/webp" srcSet="/assets/docs/orca-apps-screenshot.webp" />
104+
<img
105+
src="/assets/docs/orca-apps-screenshot.png"
106+
alt="OrcaCD Dashboard"
107+
className="rounded-2xl max-w-full md:max-w-2xl relative z-10"
108+
fetchPriority="high"
109+
/>
110+
</picture>
113111
</div>
114112
</div>
115113
</section>
@@ -151,7 +149,7 @@ function Home() {
151149
<FeatureCard
152150
icon={Rocket}
153151
title="Lightweight"
154-
description="Designed to be resource-efficient. OrcaCD runs with minimal overhead, perfect for home labs and small-scale deployments."
152+
description="Designed to be resource-efficient. OrcaCD runs with minimal overhead. Perfect for self-hosting on your infrastructure."
155153
/>
156154
</div>
157155
</div>

‎src/styles/app.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,25 @@ button:not([disabled]),
1515
[role="button"]:not([disabled]) {
1616
cursor: pointer;
1717
}
18+
19+
.hero-img-bg {
20+
position: absolute;
21+
top: 50%;
22+
left: 50%;
23+
border-radius: 50%;
24+
background-image: linear-gradient(45deg, #242d45 35%, #45669b 20%);
25+
filter: blur(64px);
26+
transform: translate(-50%, -50%);
27+
width: 100%;
28+
height: 120%;
29+
}
30+
31+
.hero-text-bg {
32+
background-color: white;
33+
background: linear-gradient(120deg, #cfe7fc, #24a8ff);
34+
color: transparent;
35+
-webkit-text-fill-color: transparent;
36+
background-clip: text;
37+
-webkit-background-clip: text;
38+
width: fit-content;
39+
}

0 commit comments

Comments
 (0)