Skip to content

Commit 6365b5d

Browse files
pankajvaghelapankajvaghela
committed
v6-docs: Create landing page v1
1 parent 91b7f44 commit 6365b5d

File tree

5 files changed

+358
-20
lines changed

5 files changed

+358
-20
lines changed

‎apps/sequelize-guard-docs/src/app/(home)/layout.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
1-
"use client";
1+
'use client';
22

3-
import { HomeLayout } from "fumadocs-ui/layouts/home";
4-
import { baseOptions } from "@/lib/layout.shared";
3+
import { HomeLayout } from 'fumadocs-ui/layouts/home';
4+
import { baseOptions } from '@/lib/layout.shared';
55

6-
export default function Layout({ children }: LayoutProps<"/">) {
7-
return <HomeLayout {...baseOptions()}>{children}</HomeLayout>;
6+
export default function Layout({ children }: LayoutProps<'/'>) {
7+
return (
8+
<HomeLayout
9+
{...baseOptions()}
10+
nav={{
11+
enabled: false,
12+
}}
13+
>
14+
{children}
15+
</HomeLayout>
16+
);
817
}

‎apps/sequelize-guard-docs/src/app/(home)/page.tsx‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,7 @@
1-
import Link from 'next/link';
1+
'use client';
2+
3+
import { HomePageScreen } from '@/components/screen/home';
24

35
export default function HomePage() {
4-
return (
5-
<div className="flex flex-col justify-center text-center flex-1">
6-
<h1 className="text-2xl font-bold mb-4">Hello World</h1>
7-
<p>
8-
You can open{' '}
9-
<Link href="/docs" className="font-medium underline">
10-
/docs
11-
</Link>{' '}
12-
and see the documentation.
13-
</p>
14-
</div>
15-
);
6+
return <HomePageScreen />;
167
}

‎apps/sequelize-guard-docs/src/components/screen/home/HomePageScreen.tsx‎

Lines changed: 337 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,337 @@
1+
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
2+
import {
3+
Zap,
4+
CheckCircle2,
5+
Key,
6+
Star,
7+
Github,
8+
ArrowRight,
9+
Sparkles,
10+
ShieldCheck,
11+
Code,
12+
Database,
13+
} from 'lucide-react';
14+
import Link from 'next/link';
15+
16+
export const HomePageScreen = () => {
17+
return (
18+
<>
19+
<div className="min-h-screen bg-gradient-to-b from-slate-50 via-white to-slate-50">
20+
{/* Navigation */}
21+
<nav className="border-b border-slate-200 bg-white/80 backdrop-blur sticky top-0 z-50">
22+
<div className="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
23+
<div className="flex items-center gap-3">
24+
<ShieldCheck className="w-9 h-9 text-emerald-600" />
25+
<span className="text-2xl font-bold text-slate-900">
26+
Sequelize Guard
27+
</span>
28+
</div>
29+
<div className="flex items-center gap-8">
30+
<Link
31+
href="/docs"
32+
className="text-slate-600 hover:text-slate-900 font-medium transition"
33+
>
34+
Documentation
35+
</Link>
36+
<a
37+
href="#features"
38+
className="text-slate-600 hover:text-slate-900 font-medium transition"
39+
>
40+
Features
41+
</a>
42+
<a
43+
href="#usage"
44+
className="text-slate-600 hover:text-slate-900 font-medium transition"
45+
>
46+
Usage
47+
</a>
48+
<a
49+
href="#demo"
50+
className="text-slate-600 hover:text-slate-900 font-medium transition"
51+
>
52+
Demo
53+
</a>
54+
<a
55+
href="https://github.com/lotivo/sequelize-guard"
56+
target="_blank"
57+
rel="noopener noreferrer"
58+
className="flex items-center gap-2 text-slate-600 hover:text-slate-900 transition"
59+
>
60+
<Github className="w-5 h-5" />
61+
GitHub
62+
</a>
63+
</div>
64+
</div>
65+
</nav>
66+
67+
{/* Hero */}
68+
<section className="pt-32 pb-24 px-6">
69+
<div className="max-w-5xl mx-auto text-center">
70+
<div>
71+
<div className="inline-flex items-center gap-2 bg-indigo-100 text-indigo-700 px-4 py-2 rounded-full text-sm font-medium mb-6">
72+
<Zap className="w-4 h-4" />
73+
Now with Sequelize v6 & v7 support
74+
</div>
75+
<br />
76+
77+
<div className="inline-flex items-center gap-2 bg-emerald-100 text-emerald-700 px-4 py-2 rounded-full text-sm font-medium mb-6">
78+
<Sparkles className="w-4 h-4" />
79+
Powerful RBAC for Sequelize.js
80+
</div>
81+
</div>
82+
<h1 className="text-5xl md:text-6xl font-bold text-slate-900 mb-6 leading-tight">
83+
Role-Based Access Control
84+
<br />
85+
<span className="text-emerald-600">Made Simple & Fast</span>
86+
</h1>
87+
<p className="text-xl text-slate-600 max-w-3xl mx-auto mb-10 leading-relaxed">
88+
A fluent, high-performance authorization library for Sequelize
89+
<br /> that brings Laravel-style permissions to Node.js <br />{' '}
90+
with caching, events, and zero dependencies.
91+
</p>
92+
93+
<div className="flex flex-col sm:flex-row gap-5 justify-center items-center mb-12">
94+
<Link
95+
href="/docs/guide/installation"
96+
className="inline-flex items-center gap-3 bg-emerald-600 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-emerald-700 transition shadow-lg"
97+
>
98+
Get Started
99+
<ArrowRight className="w-5 h-5" />
100+
</Link>
101+
<a
102+
href="https://github.com/lotivo/sequelize-guard"
103+
target="_blank"
104+
rel="noopener noreferrer"
105+
className="inline-flex items-center gap-3 border-2 border-slate-300 px-8 py-4 rounded-xl font-bold text-lg text-gray-900 hover:border-slate-400 transition"
106+
>
107+
<Star className="w-5 h-5" />
108+
Star on GitHub
109+
</a>
110+
</div>
111+
</div>
112+
</section>
113+
114+
{/* Features Section */}
115+
<section id="features" className="py-16 bg-gray-50 sm:py-24">
116+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
117+
<div className="lg:text-center">
118+
<h2 className="text-base text-indigo-600 font-semibold tracking-wide uppercase">
119+
Core Features
120+
</h2>
121+
<p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
122+
The Authorization Toolkit You Need
123+
</p>
124+
</div>
125+
126+
<div className="mt-16">
127+
<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
128+
{features.map((feature) => (
129+
<div key={feature.title} className="pt-6">
130+
<div className="flow-root bg-white rounded-lg px-6 pb-8 shadow-lg h-full">
131+
<div className="-mt-6">
132+
<div>
133+
<span className="inline-flex items-center justify-center p-3 border border-indigo-100 bg-indigo-50 rounded-md shadow-lg">
134+
<feature.icon
135+
className="h-6 w-6 text-indigo-600"
136+
aria-hidden="true"
137+
/>
138+
</span>
139+
</div>
140+
<h3 className="mt-4 text-xl font-semibold text-gray-900">
141+
{feature.title}
142+
</h3>
143+
<p className="mt-2 text-base text-gray-500">
144+
{feature.description}
145+
</p>
146+
</div>
147+
</div>
148+
</div>
149+
))}
150+
</div>
151+
</div>
152+
</div>
153+
</section>
154+
155+
{/* Demo / Code */}
156+
<section id="demo" className="py-24 bg-slate-50">
157+
<div className="max-w-5xl mx-auto px-6">
158+
<div className="lg:text-center mb-20">
159+
<h2 className="text-base text-indigo-600 font-semibold tracking-wide uppercase">
160+
Usage
161+
</h2>
162+
<p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
163+
Start guarding your API in Minutes
164+
</p>
165+
</div>
166+
167+
<div className="grid md:grid-cols-2 gap-12 items-center">
168+
<div>
169+
<h3 className="text-xl font-bold mb-6 text-center text-gray-900 ">
170+
Define Permissions Like a Pro
171+
</h3>
172+
<DynamicCodeBlock
173+
lang="ts"
174+
code={definePermissionCode}
175+
options={{
176+
themes: {
177+
light: 'github-dark',
178+
dark: 'github-dark',
179+
},
180+
components: {
181+
// override components (e.g. `pre` and `code`)
182+
},
183+
theme: 'github-dark',
184+
}}
185+
/>
186+
</div>
187+
188+
<div>
189+
<h3 className="text-xl font-bold mb-6 text-center text-gray-900 ">
190+
Authorize in Style
191+
</h3>
192+
193+
<DynamicCodeBlock
194+
lang="ts"
195+
code={checkPermissionCode}
196+
options={{
197+
themes: {
198+
light: 'github-dark',
199+
dark: 'github-dark',
200+
},
201+
components: {
202+
// override components (e.g. `pre` and `code`)
203+
},
204+
theme: 'github-dark',
205+
}}
206+
/>
207+
</div>
208+
</div>
209+
210+
<div className="mt-16 text-center">
211+
<div className="inline-flex items-center gap-3 text-emerald-600 font-semibold">
212+
<CheckCircle2 className="w-6 h-6" />
213+
<span>Feels like Laravel Permission — but for Node.js</span>
214+
</div>
215+
</div>
216+
</div>
217+
</section>
218+
219+
{/* Installation */}
220+
<section id="installation" className="py-24 bg-emerald-50">
221+
<div className="max-w-4xl mx-auto px-6 text-center">
222+
<h2 className="text-4xl font-bold text-slate-900 mb-8">
223+
Ready to Level Up Your Auth?
224+
</h2>
225+
<div className="bg-white p-8 rounded-2xl shadow-xl inline-block max-w-2xl mt-4">
226+
<code className="text-xl font-mono text-slate-800">
227+
yarn add sequelize-guard
228+
</code>
229+
</div>
230+
<div className="mt-8 flex flex-wrap justify-center gap-6 text-slate-600 font-medium ">
231+
<span className="flex items-center gap-2">
232+
<CheckCircle2 className="w-5 h-5 text-emerald-600" />{' '}
233+
Plug-n-Play
234+
</span>
235+
<span className="flex items-center gap-2">
236+
<CheckCircle2 className="w-5 h-5 text-emerald-600" /> Full
237+
TypeScript Support
238+
</span>
239+
<span className="flex items-center gap-2">
240+
<CheckCircle2 className="w-5 h-5 text-emerald-600" />{' '}
241+
Event-Driven
242+
</span>
243+
</div>
244+
</div>
245+
</section>
246+
247+
{/* Footer */}
248+
<footer className="bg-slate-900 text-white py-16">
249+
<div className="max-w-7xl mx-auto px-6 text-center">
250+
<div className="flex items-center justify-center gap-3 mb-6">
251+
<ShieldCheck className="w-10 h-10 text-emerald-500" />
252+
<span className="text-3xl font-bold">Sequelize Guard</span>
253+
</div>
254+
<p className="text-slate-400 text-lg mb-8">
255+
The missing authorization layer for Sequelize.js
256+
</p>
257+
<div className="flex justify-center gap-8 text-slate-400">
258+
<a
259+
href="https://github.com/lotivo/sequelize-guard"
260+
className="hover:text-white transition flex items-center gap-2"
261+
>
262+
GitHub
263+
</a>
264+
<div className="border-l border-slate-600 h-5" />
265+
<a
266+
href="https://www.npmjs.com/package/sequelize-guard"
267+
className="hover:text-white transition flex items-center gap-2"
268+
>
269+
NPM
270+
</a>
271+
<div className="border-l border-slate-600 h-5" />
272+
<Link href="/docs" className="hover:text-white transition">
273+
Documentation
274+
</Link>
275+
</div>
276+
<p className="mt-10 text-slate-500 text-sm">
277+
Made with love by{' '}
278+
<a
279+
href="https://github.com/pankajvaghela"
280+
className="text-emerald-400 hover:underline"
281+
>
282+
Pankaj Vaghela
283+
</a>
284+
</p>
285+
</div>
286+
</footer>
287+
</div>
288+
</>
289+
);
290+
};
291+
292+
const features = [
293+
{
294+
icon: Key,
295+
title: 'Role & Permission Based',
296+
description:
297+
'Implement fine-grained access control by easily assigning multiple roles and specific permissions to your users.',
298+
},
299+
{
300+
icon: Zap,
301+
title: 'Super-Fast Caching',
302+
description:
303+
'Leverage a built-in, highly optimized caching layer for near-instant permission resolution, minimizing database lookups.',
304+
},
305+
{
306+
icon: Code,
307+
title: 'Fluent Semantic API',
308+
description:
309+
"Check permissions using a simple, readable API: `user.can('action resource')`. Authorization is straightforward and intuitive.",
310+
},
311+
{
312+
icon: Database,
313+
title: 'Seamless Sequelize Integration',
314+
description:
315+
'A native, lightweight extension for Sequelize, ensuring zero friction with your existing Node.js and ORM setup.',
316+
},
317+
];
318+
319+
export const definePermissionCode = `// Using Guard-Control builder
320+
guard.init()
321+
.allow('admin')
322+
.to(['view', 'edit', 'delete'])
323+
.on('blog')
324+
.commit();
325+
326+
// Or one-liner
327+
guard.allow('editor', ['view', 'edit'], 'post');`;
328+
329+
export const checkPermissionCode = `// Permission checks
330+
user.can('edit blog');
331+
user.can('* blog'); // all actions on blog
332+
user.can('view *'); // view everything
333+
user.can('*'); // superadmin
334+
335+
// Role checks
336+
user.isA('admin');
337+
user.isAnyOf(['admin', 'editor']);`;

‎apps/sequelize-guard-docs/src/components/screen/home/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './HomePageScreen';

‎apps/sequelize-guard-docs/src/lib/layout.shared.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
1+
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
22

33
export function baseOptions(): BaseLayoutProps {
44
return {
55
nav: {
6-
title: "Sequelize Guard",
6+
title: 'Sequelize Guard',
77
},
88
};
99
}

0 commit comments

Comments
 (0)
⚡