LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-09 20:27:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: clean up landing

Browse Source
This commit is contained in:
Bereket Engida
2024-11-25 21:24:01 +03:00
parent 2fb2e8588f
commit 7cb29c413f
4 changed files with 19 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
docs/components/beta/badge.module.css
View File

@@ -1,119 +0,0 @@
.beta {
background-color: transparent;
border: 0.2px solid #eae2f6;
border-radius: 0;
box-sizing: border-box;
color: #970bf5;
cursor: pointer;
display: inline-block;
float: right;
letter-spacing: 0.05em;
margin: 0;
outline: none;
overflow: visible;
padding: 0.4em 2em;
position: relative;
text-align: center;
text-decoration: none;
text-transform: none;
transition: all 0.3s ease-in-out;
user-select: none;
font-size: 10px;
}
.beta::before {
content: " ";
width: 1.5625rem;
height: 2px;
background: white;
top: 50%;
left: 1.5em;
position: absolute;
transform: translateY(-50%);
transform-origin: center;
transition:
background 0.3s linear,
width 0.3s linear;
}
.beta .text {
font-size: 1.125em;
line-height: 1.33333em;
padding-left: 2em;
display: block;
text-align: left;
transition: all 0.3s ease-in-out;
text-transform: uppercase;
text-decoration: none;
color: white;
}
.beta .top_key {
height: 2px;
width: 1.5625rem;
top: -2px;
left: 0.625rem;
position: absolute;
background: #0c0a09;
transition:
width 0.5s ease-out,
left 0.3s ease-out;
}
.beta .bottom_key_1 {
height: 2px;
width: 1.5625rem;
right: 1.875rem;
bottom: -2px;
position: absolute;
background: #0c0a09;
transition:
width 0.5s ease-out,
right 0.3s ease-out;
}
.beta .bottom_key_2 {
height: 2px;
width: 0.625rem;
right: 0.625rem;
bottom: -2px;
position: absolute;
background: #0c0a09;
transition:
width 0.5s ease-out,
right 0.3s ease-out;
}
.beta {
color: white;
background: rgb(247, 247, 255);
}
.beta:hover {
background: none;
}
.beta:hover .text {
color: white;
}
.beta::before {
width: 0.9375rem;
background: rgb(39, 37, 42);
}
.beta .text {
color: black;
padding-left: 1.5em;
}
.beta:hover .top_key {
left: -2px;
width: 0px;
}
.beta:hover .bottom_key_1,
.beta:hover .bottom_key_2 {
right: 0;
width: 0;
}

27
docs/components/beta/badge.tsx
View File

@@ -1,27 +0,0 @@
import badgestyle from "./badge.module.css";
export const PulicBetaBadge = ({ text }: { text?: string }) => {
return (
<div className="flex flex-col">
<div className={badgestyle.beta}>
<span className={badgestyle.top_key}></span>
<span className={badgestyle.text}>{text}</span>
<span className={badgestyle.bottom_key_1}></span>
<span className={badgestyle.bottom_key_2}></span>
</div>
<div className="flex items-center gap-1 mt-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="0.8em"
height="0.8em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M13 4V2c4.66.5 8.33 4.19 8.85 8.85c.6 5.49-3.35 10.43-8.85 11.03v-2c3.64-.45 6.5-3.32 6.96-6.96A7.994 7.994 0 0 0 13 4m-7.33.2A9.8 9.8 0 0 1 11 2v2.06c-1.43.2-2.78.78-3.9 1.68zM2.05 11a9.8 9.8 0 0 1 2.21-5.33L5.69 7.1A8 8 0 0 0 4.05 11zm2.22 7.33A10.04 10.04 0 0 1 2.06 13h2c.18 1.42.75 2.77 1.63 3.9zm1.4 1.41l1.39-1.37h.04c1.13.88 2.48 1.45 3.9 1.63v2c-1.96-.21-3.82-1-5.33-2.26M12 17l1.56-3.42L17 12l-3.44-1.56L12 7l-1.57 3.44L7 12l3.43 1.58z"
></path>
</svg>
<span className="text-xs text-opacity-75">Own Your Auth</span>
</div>
</div>
);
};

34
docs/components/landing/hero.tsx
View File

@@ -7,18 +7,10 @@ import clsx from "clsx";
import { GridPattern } from "./grid-pattern"; import { GridPattern } from "./grid-pattern";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Check, Copy, Github, Icon, PlusIcon } from "lucide-react"; import { Check, Copy } from "lucide-react";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import { Highlight, themes } from "prism-react-renderer"; import { Highlight, themes } from "prism-react-renderer";
import { import { AnimatePresence, motion, MotionConfig } from "framer-motion";
AnimatePresence,
LayoutGroup,
motion,
MotionConfig,
} from "framer-motion";
import { Icons } from "../icons";
import { Cover } from "../ui/cover";
import { PulicBetaBadge } from "../beta/badge";
import { Builder } from "../builder"; import { Builder } from "../builder";
const tabs: { name: "auth.ts" | "client.ts"; code: string }[] = [ const tabs: { name: "auth.ts" | "client.ts"; code: string }[] = [
@@ -64,15 +56,27 @@ export default function Hero() {
<div className="relative z-10 md:text-center lg:text-left"> <div className="relative z-10 md:text-center lg:text-left">
<div className="relative"> <div className="relative">
<div className="flex flex-col items-start gap-2"> <div className="flex flex-col items-start gap-2">
<Link href="/v1"> <div className="flex items-center gap-1 mt-2">
<PulicBetaBadge text="v1 is out now!" /> <svg
</Link> xmlns="http://www.w3.org/2000/svg"
width="0.8em"
height="0.8em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M13 4V2c4.66.5 8.33 4.19 8.85 8.85c.6 5.49-3.35 10.43-8.85 11.03v-2c3.64-.45 6.5-3.32 6.96-6.96A7.994 7.994 0 0 0 13 4m-7.33.2A9.8 9.8 0 0 1 11 2v2.06c-1.43.2-2.78.78-3.9 1.68zM2.05 11a9.8 9.8 0 0 1 2.21-5.33L5.69 7.1A8 8 0 0 0 4.05 11zm2.22 7.33A10.04 10.04 0 0 1 2.06 13h2c.18 1.42.75 2.77 1.63 3.9zm1.4 1.41l1.39-1.37h.04c1.13.88 2.48 1.45 3.9 1.63v2c-1.96-.21-3.82-1-5.33-2.26M12 17l1.56-3.42L17 12l-3.44-1.56L12 7l-1.57 3.44L7 12l3.43 1.58z"
></path>
</svg>
<span className="text-xs text-opacity-75">Own Your Auth</span>
</div>
<div className="relative mt-2 flex items-center gap-2"> <div className="relative mt-2 flex items-center gap-2">
<Cover> <div className="relative group/cover inline-block dark:bg-neutral-950 bg-neutral-100 px-4 py-2 border-l-4 dark:border-zinc-900">
<p className="2xl relative inline tracking-tight opacity-90 md:text-3xl lg:text-5xl dark:text-white"> <p className="2xl relative inline tracking-tight opacity-90 md:text-3xl lg:text-5xl dark:text-white">
Better Auth. Better Auth.
</p> </p>
</Cover> </div>
</div> </div>
</div> </div>

48
docs/components/ui/cover.tsx
View File

@@ -1,48 +0,0 @@
"use client";
import React, { useEffect, useId, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { useRef } from "react";
import { cn } from "@/lib/utils";
import { SparklesCore } from "@/components/ui/sparkles";
export const Cover = ({
children,
className,
}: {
children?: React.ReactNode;
className?: string;
}) => {
return (
<div className="relative hover:bg-neutral-900 group/cover inline-block dark:bg-neutral-900 bg-neutral-100 px-4 py-2 transition duration-200 rounded-sm">
<span
className={cn(
"dark:text-white inline-block text-neutral-900 relative z-20 group-hover/cover:text-white transition duration-200",
className,
)}
>
{children}
</span>
<CircleIcon className="absolute -right-[2px] -top-[2px]" />
<CircleIcon className="absolute -bottom-[2px] -right-[2px]" delay={0.4} />
<CircleIcon className="absolute -left-[2px] -top-[2px]" delay={0.8} />
<CircleIcon className="absolute -bottom-[2px] -left-[2px]" delay={1.6} />
</div>
);
};
export const CircleIcon = ({
className,
delay,
}: {
className?: string;
delay?: number;
}) => {
return (
<div
className={cn(
`pointer-events-none animate-pulse group-hover/cover:hidden group-hover/cover:opacity-100 group h-2 w-2 rounded-full bg-neutral-600 dark:bg-white opacity-20 group-hover/cover:bg-white`,
className,
)}
></div>
);
};