mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-09 20:27:44 +00:00
docs: clean up landing
This commit is contained in:
Bereket Engida
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -7,18 +7,10 @@ import clsx from "clsx";
|
||||
|
||||
import { GridPattern } from "./grid-pattern";
|
||||
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 { Highlight, themes } from "prism-react-renderer";
|
||||
import {
|
||||
AnimatePresence,
|
||||
LayoutGroup,
|
||||
motion,
|
||||
MotionConfig,
|
||||
} from "framer-motion";
|
||||
import { Icons } from "../icons";
|
||||
import { Cover } from "../ui/cover";
|
||||
import { PulicBetaBadge } from "../beta/badge";
|
||||
import { AnimatePresence, motion, MotionConfig } from "framer-motion";
|
||||
import { Builder } from "../builder";
|
||||
|
||||
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">
|
||||
<div className="flex flex-col items-start gap-2">
|
||||
<Link href="/v1">
|
||||
<PulicBetaBadge text="v1 is out now!" />
|
||||
</Link>
|
||||
<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 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">
|
||||
Better Auth.
|
||||
</p>
|
||||
</Cover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user