Skip to content

Commit bcf7bb8

Browse files
Merge pull request #660 from aXenDeveloper/landing_page
docs: Add simple landing page
2 parents d7faed0 + a95031d commit bcf7bb8

File tree

20 files changed

+1186
-27
lines changed

20 files changed

+1186
-27
lines changed

apps/docs/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
"motion": "^12.19.1",
1919
"next": "^15.3.4",
2020
"react": "^19.1.0",
21-
"react-dom": "^19.1.0"
21+
"react-dom": "^19.1.0",
22+
"react-use": "^17.6.0"
2223
},
2324
"devDependencies": {
2425
"@tailwindcss/postcss": "^4.1.11",

apps/docs/src/app/(home)/page.tsx

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import Link from 'fumadocs-core/link';
2-
import { PlusIcon } from 'lucide-react';
32
import { Metadata } from 'next';
43
import { buttonVariants } from '@vitnode/core/components/ui/button';
54
import { cn } from '@vitnode/core/lib/utils';
5+
import { CallToActionSection } from './sections/call-to-action';
6+
import { PoweringBySection } from './sections/powering-by/powering-by';
7+
import { AdminSection } from './sections/admin/admin';
68

79
export const metadata: Metadata = {
810
title: 'VitNode: Extendable Framework for Building Apps',
@@ -13,8 +15,8 @@ export const metadata: Metadata = {
1315
export default function HomePage() {
1416
return (
1517
<div className="container">
16-
<section className="relative mt-8 border px-8 py-10 text-center sm:py-20">
17-
<div className="mx-auto flex max-w-xl flex-col items-center justify-center">
18+
<section className="my-20 flex flex-col justify-between gap-20 lg:flex-row">
19+
<div className="flex max-w-2xl flex-col">
1820
<span className="group relative mx-0 mb-6 flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40">
1921
<div
2022
className={`animate-gradient absolute inset-0 block h-full w-full bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-[1px] [border-radius:inherit] ![mask-composite:subtract] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]`}
@@ -24,27 +26,27 @@ export default function HomePage() {
2426
{/* <ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" /> */}
2527
</span>
2628

27-
<h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-5xl">
29+
<h1 className="text-balance text-5xl font-semibold tracking-tight sm:text-6xl">
2830
Extendable <span className="text-primary">Framework</span> for
2931
Building <span className="text-primary">Apps</span>
3032
</h1>
31-
<p className="text-muted-foreground mt-8 text-balance text-center text-base font-medium leading-relaxed tracking-tight md:text-lg">
33+
34+
<p className="text-muted-foreground mt-6 text-balance leading-relaxed md:text-lg">
3235
Simplifies development with a powerful Plugin System, Admin Control
3336
Panel and extensible architecture.
3437
</p>
3538

36-
<div className="mt-6 flex flex-wrap items-center justify-center gap-4">
37-
{/* <Link
39+
<div className="mt-6 flex flex-wrap items-center gap-4">
40+
<Link
3841
className={cn(
3942
buttonVariants({
4043
size: 'lg',
4144
}),
4245
)}
4346
href="/docs/dev"
44-
prefetch
4547
>
4648
Get Started
47-
</Link> */}
49+
</Link>
4850

4951
<Link
5052
className={cn(
@@ -71,17 +73,15 @@ export default function HomePage() {
7173
View on GitHub
7274
</Link>
7375
</div>
74-
75-
<p className="text-muted-foreground sm:text-md mt-8 max-w-xl text-pretty text-sm">
76-
Powered by Next.js & Hono.js.
77-
</p>
7876
</div>
7977

80-
<PlusIcon className="absolute -left-2.5 -top-2.5 size-5" />
81-
<PlusIcon className="absolute -bottom-2.5 -left-2.5 size-5" />
82-
<PlusIcon className="absolute -bottom-2.5 -right-2.5 size-5" />
83-
<PlusIcon className="absolute -right-2.5 -top-2.5 size-5" />
78+
<div>Here will be some img or something else</div>
8479
</section>
80+
81+
<PoweringBySection />
82+
<AdminSection />
83+
84+
<CallToActionSection />
8585
</div>
8686
);
8787
}
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { CpuIcon, LockIcon, SparklesIcon, ZapIcon } from 'lucide-react';
2+
import Image from 'next/image';
3+
import debugPanelImg from './debug_panel.png';
4+
5+
export const AdminSection = () => {
6+
return (
7+
<section className="py-16 md:py-32">
8+
<div className="mx-auto max-w-6xl space-y-12 px-6">
9+
<div className="flex items-center justify-center text-center">
10+
<h2 className="max-w-xl text-4xl font-semibold">
11+
Powerful AdminCP brings together all management tools
12+
</h2>
13+
</div>
14+
<div className="relative rounded-3xl p-3 md:-mx-8 lg:col-span-3">
15+
<div className="aspect-88/36 relative">
16+
<div className="bg-linear-to-t z-1 from-background absolute inset-0 to-transparent"></div>
17+
<Image
18+
src={debugPanelImg}
19+
className="hidden dark:block"
20+
alt="payments illustration dark"
21+
width={2797}
22+
height={1137}
23+
/>
24+
<Image
25+
src={debugPanelImg}
26+
className="dark:hidden"
27+
alt="payments illustration light"
28+
width={2797}
29+
height={1137}
30+
/>
31+
</div>
32+
</div>
33+
<div className="relative mx-auto grid grid-cols-2 gap-x-3 gap-y-6 sm:gap-8 lg:grid-cols-4">
34+
<div className="space-y-3">
35+
<div className="flex items-center gap-2">
36+
<CpuIcon className="size-4" />
37+
<h3 className="text-sm font-medium">Powerful</h3>
38+
</div>
39+
<p className="text-muted-foreground text-sm">
40+
Manage users, content and settings from one powerful command
41+
center.
42+
</p>
43+
</div>
44+
<div className="space-y-2">
45+
<div className="flex items-center gap-2">
46+
<CpuIcon className="size-4" />
47+
<h3 className="text-sm font-medium">Powerful</h3>
48+
</div>
49+
<p className="text-muted-foreground text-sm">
50+
Manage users, content and settings from one powerful command
51+
center.
52+
</p>
53+
</div>
54+
<div className="space-y-2">
55+
<div className="flex items-center gap-2">
56+
<LockIcon className="size-4" />
57+
<h3 className="text-sm font-medium">Powerful</h3>
58+
</div>
59+
<p className="text-muted-foreground text-sm">
60+
Manage users, content and settings from one powerful command
61+
center.
62+
</p>
63+
</div>
64+
<div className="space-y-2">
65+
<div className="flex items-center gap-2">
66+
<SparklesIcon className="size-4" />
67+
68+
<h3 className="text-sm font-medium">Powerful</h3>
69+
</div>
70+
<p className="text-muted-foreground text-sm">
71+
Manage users, content and settings from one powerful command
72+
center.
73+
</p>
74+
</div>
75+
</div>
76+
</div>
77+
</section>
78+
);
79+
};
258 KB
Loading
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Card } from '@vitnode/core/components/ui/card';
2+
import { CodeBlock } from '../../../components/fumadocs/code-block';
3+
import { cn } from '@vitnode/core/lib/utils';
4+
5+
export const CallToActionSection = () => {
6+
return (
7+
<section className="py-16">
8+
<Card className="flex flex-col items-center gap-4 px-6 py-16 text-center">
9+
<h2 className="text-balance text-4xl font-semibold tracking-tight sm:text-5xl">
10+
Start <span className="text-primary">Building</span>
11+
</h2>
12+
<p className="text-muted-foreground text-balance leading-relaxed md:text-lg">
13+
Everything you need for modern web apps, zero config.
14+
</p>
15+
16+
<div className="flex w-full max-w-xl justify-center">
17+
<CodeBlock
18+
code="npx create-vitnode-app@canary"
19+
lang="bash"
20+
wrapper={{
21+
className: cn(
22+
'bg-background m-0 w-full sm:w-[calc(100%_-_10rem)]',
23+
),
24+
}}
25+
/>
26+
</div>
27+
</Card>
28+
</section>
29+
);
30+
};
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
export const DrizzleORMLogo = () => {
2+
return (
3+
<svg
4+
viewBox="0 0 202 72"
5+
fill="none"
6+
xmlns="http://www.w3.org/2000/svg"
7+
className="h-10 w-32"
8+
aria-label="DrizzleORM logotype"
9+
>
10+
<rect
11+
width="5.25365"
12+
height="22.2834"
13+
rx="2.62683"
14+
transform="matrix(0.873028 0.48767 -0.497212 0.867629 16.0791 30.3292)"
15+
fill="currentColor"
16+
></rect>
17+
<rect
18+
width="5.25365"
19+
height="22.2834"
20+
rx="2.62683"
21+
transform="matrix(0.873028 0.48767 -0.497212 0.867629 34.3301 19)"
22+
fill="currentColor"
23+
></rect>
24+
<rect
25+
width="5.25365"
26+
height="22.2834"
27+
rx="2.62683"
28+
transform="matrix(0.873028 0.48767 -0.497212 0.867629 62.4131 19.0005)"
29+
fill="currentColor"
30+
></rect>
31+
<rect
32+
width="5.25365"
33+
height="22.2834"
34+
rx="2.62683"
35+
transform="matrix(0.873028 0.48767 -0.497212 0.867629 44.1562 30.3292)"
36+
fill="currentColor"
37+
></rect>
38+
<path
39+
d="M85.96 49.44C84.2533 49.44 82.7467 49.0267 81.44 48.2C80.16 47.3733 79.16 46.1867 78.44 44.64C77.72 43.0933 77.36 41.2667 77.36 39.16C77.36 37.0533 77.72 35.24 78.44 33.72C79.16 32.2 80.16 31.0267 81.44 30.2C82.7467 29.3733 84.2533 28.96 85.96 28.96C87.5067 28.96 88.8667 29.3333 90.04 30.08C91.24 30.8267 92.0533 31.8 92.48 33H92.04V23.52C92.04 22.5067 92.2933 21.7467 92.8 21.24C93.3067 20.7067 94.0533 20.44 95.04 20.44C96 20.44 96.7467 20.7067 97.28 21.24C97.8133 21.7467 98.08 22.5067 98.08 23.52V46.28C98.08 47.2667 97.8133 48.0267 97.28 48.56C96.7733 49.0933 96.04 49.36 95.08 49.36C94.12 49.36 93.3733 49.0933 92.84 48.56C92.3333 48.0267 92.08 47.2667 92.08 46.28V43.56L92.52 45.12C92.1467 46.4267 91.3467 47.48 90.12 48.28C88.92 49.0533 87.5333 49.44 85.96 49.44ZM87.76 44.92C88.64 44.92 89.4 44.7067 90.04 44.28C90.68 43.8533 91.1867 43.2267 91.56 42.4C91.9333 41.5467 92.12 40.4667 92.12 39.16C92.12 37.2133 91.72 35.7867 90.92 34.88C90.12 33.9467 89.0667 33.48 87.76 33.48C86.9067 33.48 86.1467 33.68 85.48 34.08C84.84 34.48 84.3333 35.1067 83.96 35.96C83.6133 36.7867 83.44 37.8533 83.44 39.16C83.44 41.1067 83.84 42.56 84.64 43.52C85.44 44.4533 86.48 44.92 87.76 44.92ZM105.854 49.36C104.841 49.36 104.067 49.0933 103.534 48.56C103.001 48.0267 102.734 47.2667 102.734 46.28V32.08C102.734 31.0933 102.987 30.3467 103.494 29.84C104.027 29.3067 104.761 29.04 105.694 29.04C106.654 29.04 107.387 29.3067 107.894 29.84C108.401 30.3467 108.654 31.0933 108.654 32.08V34.16H108.254C108.574 32.56 109.281 31.32 110.374 30.44C111.467 29.56 112.881 29.0667 114.614 28.96C115.281 28.9067 115.787 29.08 116.134 29.48C116.507 29.8533 116.707 30.48 116.734 31.36C116.787 32.1867 116.614 32.84 116.214 33.32C115.841 33.8 115.201 34.0933 114.294 34.2L113.374 34.28C111.854 34.4133 110.721 34.8533 109.974 35.6C109.254 36.3467 108.894 37.4267 108.894 38.84V46.28C108.894 47.2667 108.627 48.0267 108.094 48.56C107.587 49.0933 106.841 49.36 105.854 49.36ZM122.258 49.32C121.272 49.32 120.512 49.04 119.978 48.48C119.472 47.8933 119.218 47.08 119.218 46.04V32.36C119.218 31.2933 119.472 30.48 119.978 29.92C120.512 29.3333 121.272 29.04 122.258 29.04C123.218 29.04 123.952 29.3333 124.458 29.92C124.992 30.48 125.258 31.2933 125.258 32.36V46.04C125.258 47.08 125.005 47.8933 124.498 48.48C123.992 49.04 123.245 49.32 122.258 49.32ZM122.258 25.76C121.138 25.76 120.272 25.5067 119.658 25C119.072 24.4667 118.778 23.72 118.778 22.76C118.778 21.7733 119.072 21.0267 119.658 20.52C120.272 19.9867 121.138 19.72 122.258 19.72C123.378 19.72 124.232 19.9867 124.818 20.52C125.405 21.0267 125.698 21.7733 125.698 22.76C125.698 23.72 125.405 24.4667 124.818 25C124.232 25.5067 123.378 25.76 122.258 25.76ZM131.602 49C131.015 49 130.522 48.8533 130.122 48.56C129.722 48.24 129.455 47.84 129.322 47.36C129.188 46.88 129.188 46.36 129.322 45.8C129.482 45.24 129.788 44.72 130.242 44.24L140.042 32.48V33.88H131.362C130.642 33.88 130.082 33.68 129.682 33.28C129.282 32.88 129.082 32.3333 129.082 31.64C129.082 30.8933 129.282 30.3333 129.682 29.96C130.082 29.56 130.642 29.36 131.362 29.36H142.922C143.642 29.36 144.215 29.52 144.642 29.84C145.068 30.16 145.348 30.56 145.482 31.04C145.642 31.4933 145.655 32 145.522 32.56C145.415 33.0933 145.135 33.6 144.682 34.08L134.642 46.08V44.52H143.922C145.442 44.52 146.202 45.2667 146.202 46.76C146.202 47.48 146.002 48.04 145.602 48.44C145.202 48.8133 144.642 49 143.922 49H131.602ZM150.82 49C150.234 49 149.74 48.8533 149.34 48.56C148.94 48.24 148.674 47.84 148.54 47.36C148.407 46.88 148.407 46.36 148.54 45.8C148.7 45.24 149.007 44.72 149.46 44.24L159.26 32.48V33.88H150.58C149.86 33.88 149.3 33.68 148.9 33.28C148.5 32.88 148.3 32.3333 148.3 31.64C148.3 30.8933 148.5 30.3333 148.9 29.96C149.3 29.56 149.86 29.36 150.58 29.36H162.14C162.86 29.36 163.434 29.52 163.86 29.84C164.287 30.16 164.567 30.56 164.7 31.04C164.86 31.4933 164.874 32 164.74 32.56C164.634 33.0933 164.354 33.6 163.9 34.08L153.86 46.08V44.52H163.14C164.66 44.52 165.42 45.2667 165.42 46.76C165.42 47.48 165.22 48.04 164.82 48.44C164.42 48.8133 163.86 49 163.14 49H150.82ZM175.439 49.44C173.066 49.44 171.292 48.7867 170.119 47.48C168.946 46.1467 168.359 44.1733 168.359 41.56V23.52C168.359 22.5067 168.612 21.7467 169.119 21.24C169.652 20.7067 170.412 20.44 171.399 20.44C172.359 20.44 173.092 20.7067 173.599 21.24C174.132 21.7467 174.399 22.5067 174.399 23.52V41.32C174.399 42.4133 174.626 43.2267 175.079 43.76C175.559 44.2667 176.186 44.52 176.959 44.52C177.172 44.52 177.372 44.5067 177.559 44.48C177.746 44.4533 177.946 44.44 178.159 44.44C178.586 44.3867 178.879 44.52 179.039 44.84C179.226 45.1333 179.319 45.7333 179.319 46.64C179.319 47.44 179.159 48.0533 178.839 48.48C178.519 48.88 178.026 49.1467 177.359 49.28C177.092 49.3067 176.786 49.3333 176.439 49.36C176.092 49.4133 175.759 49.44 175.439 49.44ZM191.684 49.44C189.364 49.44 187.364 49.0267 185.684 48.2C184.031 47.3467 182.751 46.16 181.844 44.64C180.964 43.0933 180.524 41.28 180.524 39.2C180.524 37.1733 180.951 35.4 181.804 33.88C182.657 32.3333 183.844 31.1333 185.364 30.28C186.911 29.4 188.657 28.96 190.604 28.96C192.017 28.96 193.297 29.2 194.444 29.68C195.591 30.1333 196.577 30.8 197.404 31.68C198.231 32.5333 198.857 33.5867 199.284 34.84C199.711 36.0667 199.924 37.44 199.924 38.96C199.924 39.4667 199.764 39.8533 199.444 40.12C199.124 40.36 198.657 40.48 198.044 40.48H185.484V37.36H195.564L194.924 37.92C194.924 36.8267 194.764 35.92 194.444 35.2C194.124 34.4533 193.657 33.8933 193.044 33.52C192.457 33.1467 191.724 32.96 190.844 32.96C189.857 32.96 189.017 33.1867 188.324 33.64C187.631 34.0933 187.097 34.7467 186.724 35.6C186.351 36.4533 186.164 37.48 186.164 38.68V39C186.164 41.0267 186.631 42.52 187.564 43.48C188.524 44.44 189.937 44.92 191.804 44.92C192.444 44.92 193.177 44.84 194.004 44.68C194.831 44.52 195.604 44.2667 196.324 43.92C196.937 43.6267 197.484 43.5333 197.964 43.64C198.444 43.72 198.817 43.9333 199.084 44.28C199.351 44.6267 199.497 45.0267 199.524 45.48C199.577 45.9333 199.484 46.3867 199.244 46.84C199.004 47.2667 198.604 47.6267 198.044 47.92C197.137 48.4267 196.111 48.8 194.964 49.04C193.844 49.3067 192.751 49.44 191.684 49.44Z"
40+
fill="currentColor"
41+
></path>
42+
</svg>
43+
);
44+
};
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export const HonoJSLogo = () => {
2+
return (
3+
<>
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
viewBox="0 0 76 98"
7+
height={32}
8+
className="grayscale"
9+
aria-label="HonoJS logotype"
10+
>
11+
<path
12+
fill="url(#a)"
13+
d="m11 25 7 9s9-18 22-34c17 20 36 48 36 64 0 20-19 34-37 34C17 98 0 81 0 61c0-6 3-24 11-36Z"
14+
/>
15+
<path fill="#F95" d="M39 21c47 51 14 66 0 66-11 0-51-11 0-66Z" />
16+
<defs>
17+
<linearGradient id="a" x2="0%" y2="100%">
18+
<stop stopColor="#F84" />
19+
<stop offset="100%" stopColor="#F30" />
20+
</linearGradient>
21+
</defs>
22+
</svg>
23+
<span className="text-xl font-bold">Hono</span>
24+
</>
25+
);
26+
};

0 commit comments

Comments
 (0)