LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-11 04:19:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: landing copy

Browse Source
This commit is contained in:
Bereket Engida
2024-09-10 09:27:16 +03:00
parent 7c969aa306
commit e338347332
3 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/app/page.tsx
View File

@@ -1,18 +1,16 @@
import Link from "next/link";
import Section from "@/components/landing/section"; import Section from "@/components/landing/section";
import Hero from "@/components/landing/hero"; import Hero from "@/components/landing/hero";
import { Separator } from "@/components/ui/separator";
import { FeaturesSectionDemo } from "@/components/blocks/features-section-demo-3";
import Features from "@/components/features"; import Features from "@/components/features";
export default function HomePage() { export default function HomePage() {
return ( return (
<main> <main className="h-min">
<Section <Section
className="-z-1 mb-1" className="-z-1 mb-1"
crosses crosses
crossesOffset="lg:translate-y-[5.25rem]" crossesOffset="lg:translate-y-[5.25rem]"
customPaddings customPaddings
id="hero" id="hero"
> >
<Hero /> <Hero />
<Features /> <Features />

30
docs/components/features.tsx
View File

@@ -23,7 +23,7 @@ import { Ripple } from "./ripple";
export default function Features() { export default function Features() {
return ( return (
<div className="max-w-[1300px] font-geist relative my-32 mx-auto md:border-[1.2px] rounded-none md:w-full xl:w-4/5 2xl:w-3/5"> <div className="md:max-w-[1300px] font-geist relative mx-auto md:border-[1.2px] rounded-none">
<Plus className="absolute top-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" /> <Plus className="absolute top-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
<div className="grid grid-cols-1 md:grid-cols-3 grid-rows-10 md:grid-rows-4 w-full"> <div className="grid grid-cols-1 md:grid-cols-3 grid-rows-10 md:grid-rows-4 w-full">
<div className="relative items-start justify-start border-l-[1.2px] transform-gpu flex flex-col p-10 overflow-clip"> <div className="relative items-start justify-start border-l-[1.2px] transform-gpu flex flex-col p-10 overflow-clip">
@@ -36,7 +36,7 @@ export default function Features() {
<div className="mt-2"> <div className="mt-2">
<div className="max-w-full"> <div className="max-w-full">
<div className="flex gap-3 "> <div className="flex gap-3 ">
<p className="text-2xl tracking-tighter font-normal max-w-lg"> <p className="text-xl md:text-2xl tracking-tighter font-normal max-w-lg">
Supports popular <strong>frameworks</strong> Supports popular <strong>frameworks</strong>
</p> </p>
</div> </div>
@@ -91,7 +91,7 @@ export default function Features() {
<div className="max-w-full"> <div className="max-w-full">
<div className="flex gap-3 "> <div className="flex gap-3 ">
<p className="text-2xl tracking-tighter font-normal max-w-lg"> <p className="text-2xl tracking-tighter font-normal max-w-lg">
Support multiple <strong>providers.</strong> Support multiple <strong>OAuth providers.</strong>
</p> </p>
</div> </div>
</div> </div>
@@ -116,20 +116,20 @@ export default function Features() {
<div className="max-w-full"> <div className="max-w-full">
<div className="flex gap-3 "> <div className="flex gap-3 ">
<p className="text-2xl tracking-tighter font-normal max-w-lg"> <p className="text-2xl tracking-tighter font-normal max-w-lg">
2FA right out of <strong>the box.</strong> Two Factor <strong>Authentication</strong>
</p> </p>
</div> </div>
</div> </div>
<p className="text-left text-sm mt-2 text-muted-foreground"> <p className="text-left text-sm mt-2 text-muted-foreground">
Supports your favorite frontend, backend and meta frameworks, including React, Vue, Svelte, Solid, Next.js, Nuxt.js, Hono, and more, With our built-in two factor authentication plugin, you can add an extra layer of security to your account.
{" "} {" "}
<a <Link
className="text-gray-50" className="text-gray-50"
href="/docs" href="/docs"
target="_blank" target="_blank"
> >
Learn more Learn more
</a> </Link>
</p> </p>
</div> </div>
</div> </div>
@@ -189,10 +189,14 @@ export default function Features() {
<div className="flex flex-col gap-3 justify-center h-full items-center w-full"> <div className="flex flex-col gap-3 justify-center h-full items-center w-full">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
<Globe2Icon className="w-4 h-4" /> <Globe2Icon className="w-4 h-4" />
<p className="text-gray-600 dark:text-gray-400">Start in a minute</p> <p className="text-gray-600 dark:text-gray-400">
own your auth
</p>
</div> </div>
<p className="text-4xl md:text-4xl mt-4 tracking-tighter font-normal max-w-md mx-auto text-center"> <p className="text-4xl md:text-4xl mt-4 tracking-tighter font-normal max-w-md mx-auto text-center">
Start in a minute and. <strong>accelerate with 10x speed </strong> <strong>
Roll your own auth with confidence in minutes!
</strong>
</p> </p>
<div className="flex mt-[10px] z-20"> <div className="flex mt-[10px] z-20">
<TechStackDisplay <TechStackDisplay
@@ -208,16 +212,16 @@ export default function Features() {
/> />
</div> </div>
<Link href="/docs" className="z-50"> <Link href="/docs" className="z-50">
<Button className="mt-4 rounded-lg p-5 ml-auto"> <Button className="mt-4 rounded-none p-5 ml-auto">
Start now! Start now!
</Button> </Button>
</Link> </Link>
<Ripple /> <Ripple />
</div> </div>
</div> </div>
<Plus className="absolute bottom-[-15px] left-[-15px] text-black/20 dark:text-black/20 dark:text-white/40 w-8 h-8" /> <Plus className="absolute bottom-[-15px] left-[-15px] text-black/20 dark:text-black/20 w-8 h-8" />
<Plus className="absolute bottom-[-15px] right-[-15px] text-black/20 dark:text-black/20 dark:text-white/40 w-8 h-8" /> <Plus className="absolute bottom-[-15px] right-[-15px] text-black/20 dark:text-black/20 w-8 h-8" />
<Plus className="absolute top-[-15px] left-[-15px] text-black/20 dark:text-black/20 dark:text-white/40 w-8 h-8" /> <Plus className="absolute top-[-15px] left-[-15px] text-black/20 dark:text-black/20 w-8 h-8" />
</div> </div>
</div> </div>
</div> </div>

10
docs/components/landing/section.tsx
View File

@@ -21,11 +21,10 @@ const Section = ({
id={id} id={id}
className={` className={`
relative relative
${ ${customPaddings ||
customPaddings || `py-10 lg:py-16 ${crosses ? "" : ""}`
`py-10 lg:py-16 xl:py-20 ${crosses ? "lg:py-32 xl:py-40" : ""}`
} }
${className || ""}`} ${className || " "}`}
> >
{children} {children}
@@ -35,8 +34,7 @@ const Section = ({
{crosses && ( {crosses && (
<> <>
<div <div
className={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-[#26242C] ${ className={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-[#26242C] ${crossesOffset && crossesOffset
crossesOffset && crossesOffset
} pointer-events-none lg:block xl:left-16 right-16`} } pointer-events-none lg:block xl:left-16 right-16`}
/> />
<SectionSvg crossesOffset={crossesOffset} /> <SectionSvg crossesOffset={crossesOffset} />