mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-07 20:37:44 +00:00
fix/ui ux (#3)
* feat: hero section revamp * fix: lines and border issue * fix: changelog ux * fix: better * fix: ui revamp * fix: font --------- Co-authored-by: Bereket Engida <86073083+Bekacru@users.noreply.github.com>
This commit is contained in:
Kinfe Michael Tariku
committed by
GitHub
GitHub
parent
7180fca3a1
commit
854b7f342e
@@ -54,18 +54,18 @@ export function Intro() {
|
||||
All of the changes made will be {' '}
|
||||
<span className="">available here.</span>
|
||||
</h1>
|
||||
<p className="mt-4 text-sm/6 text-gray-300">
|
||||
<p className="mt-4 text-sm text-gray-600 dark:text-gray-300">
|
||||
Better Auth is advanced authentication library for typescript packed by customizable and extendible plugin ecosystem
|
||||
</p>
|
||||
<SignUpForm />
|
||||
<div className="mt-8 flex flex-wrap justify-center gap-x-1 gap-y-3 sm:gap-x-2 lg:justify-start">
|
||||
<IconLink href="/docs" icon={BookIcon} className="flex-none">
|
||||
<hr className='h-px bg-gray-300 mt-5' />
|
||||
<div className="mt-8 flex flex-wrap text-gray-600 dark:text-gray-300 justify-center gap-x-1 gap-y-3 sm:gap-x-2 lg:justify-start">
|
||||
<IconLink href="/docs" icon={BookIcon} className="flex-none text-gray-600 dark:text-gray-300">
|
||||
Documentation
|
||||
</IconLink>
|
||||
<IconLink href="https://github.com/better-auth/better-auth" icon={GitHubIcon} className="flex-none">
|
||||
<IconLink href="https://github.com/better-auth/better-auth" icon={GitHubIcon} className="flex-none text-gray-600 dark:text-gray-300">
|
||||
GitHub
|
||||
</IconLink>
|
||||
<IconLink href="/feed.xml" icon={FeedIcon} className="flex-none">
|
||||
<IconLink href="/feed.xml" icon={FeedIcon} className="flex-none text-gray-600 dark:text-gray-300">
|
||||
RSS
|
||||
</IconLink>
|
||||
</div>
|
||||
@@ -118,13 +118,13 @@ export function IconLink({
|
||||
{...props}
|
||||
className={clsx(
|
||||
className,
|
||||
'group relative isolate flex items-center rounded-lg px-2 py-0.5 text-[0.8125rem]/6 font-medium text-white/30 transition-colors hover:text-stone-300',
|
||||
'group relative isolate flex items-center rounded-lg px-2 py-0.5 text-[0.8125rem]/6 font-medium text-black/70 dark:text-white/30 transition-colors hover:text-stone-300',
|
||||
compact ? 'gap-x-2' : 'gap-x-3',
|
||||
)}
|
||||
>
|
||||
<span className="absolute inset-0 -z-10 scale-75 rounded-lg bg-white/5 opacity-0 transition group-hover:scale-100 group-hover:opacity-100" />
|
||||
{Icon && <Icon className="h-4 w-4 flex-none" />}
|
||||
<span className="self-baseline text-white">{children}</span>
|
||||
<span className="self-baseline text-black/70 dark:text-white">{children}</span>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,27 +3,21 @@ import { AnimatePresence } from "@/components/ui/fade-in"
|
||||
const ChangelogOne = () => {
|
||||
return (
|
||||
<AnimatePresence>
|
||||
|
||||
<div className="flex flex-col gap-4 items-start justify-center max-w-full md:max-w-2xl">
|
||||
|
||||
<img src="https://camo.githubusercontent.com/3282afc585d07e52e883ac2345467841e5c9cbe3befdec9dd6f84c603748e0d4/68747470733a2f2f726573656e642e636f6d2f5f6e6578742f696d6167653f75726c3d253246737461746963253246706f737473253246776562686f6f6b732e6a706726773d36343026713d3735" className="w-full h-[400px] rounded-lg" />
|
||||
<img src="https://camo.githubusercontent.com/3282afc585d07e52e883ac2345467841e5c9cbe3befdec9dd6f84c603748e0d4/68747470733a2f2f726573656e642e636f6d2f5f6e6578742f696d6167653f75726c3d253246737461746963253246706f737473253246776562686f6f6b732e6a706726773d36343026713d3735" className="w-full h-[400px] object-cover rounded-lg" />
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-2xl font-bold tracking-tighter">
|
||||
Commit message suggestions
|
||||
</h2>
|
||||
<hr className="h-px bg-gray-200 w-full" />
|
||||
|
||||
</div>
|
||||
<p className="text-gray-300 text-[0.855rem]">
|
||||
<p className="text-gray-600 dark:text-gray-300 text-[0.855rem]">
|
||||
In the latest release, I've added support for commit message and description suggestions via an integration with OpenAI. Commit looks at all of your changes, and feeds that into the machine with a bit of prompt-tuning to get back a commit message that does a surprisingly good job at describing the intent of your changes.
|
||||
It's also been a pretty helpful way to remind myself what the hell I was working on at the end of the day yesterday when I get back to my computer and realize I didn't commit any of my work.
|
||||
</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h4 className="text-xl tracking-tighter"> Improvement</h4>
|
||||
<hr className="h-px bg-gray-200 w-full" />
|
||||
</div>
|
||||
|
||||
<ul className="list-disc ml-10 text-[0.855rem]">
|
||||
<ul className="list-disc ml-10 text-[0.855rem] text-gray-600 dark:text-gray-300">
|
||||
<li>
|
||||
Added commit message and description suggestions powered by OpenAI
|
||||
</li>
|
||||
@@ -39,7 +33,6 @@ const ChangelogOne = () => {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</AnimatePresence >
|
||||
)
|
||||
}
|
||||
|
||||
@@ -8,8 +8,7 @@ const ChangelogPage = () => {
|
||||
{Logs.map((log) => {
|
||||
return (
|
||||
<div className="relative my-5 h-auto">
|
||||
<div className="md:sticky top-2 flex-1 h-full">
|
||||
|
||||
<div className="sticky top-2 flex-1 h-full">
|
||||
<FormattedDate className="absolute md:-left-32 left-0 text-sm -top-8 md:top-0 font-light" date={log.date} />
|
||||
</div>
|
||||
<log.component />
|
||||
|
||||
@@ -23,7 +23,7 @@ export default function Layout({ children }: { children: ReactNode }) {
|
||||
<head>
|
||||
<link rel="icon" href="/favicon/favicon.ico" sizes="any" />
|
||||
</head>
|
||||
<body className={`${GeistSans.variable} ${GeistMono.variable} font-sans`}>
|
||||
<body className={`${GeistSans.variable} ${GeistMono.variable} font-sans overflow-x-hidden`}>
|
||||
<RootProvider>
|
||||
<NavbarProvider>
|
||||
<Navbar />
|
||||
|
||||
@@ -3,9 +3,9 @@ import Hero from "@/components/landing/hero";
|
||||
import Features from "@/components/features";
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<main className="h-min">
|
||||
<main className="h-min mx-auto ">
|
||||
<Section
|
||||
className="-z-1 mb-1"
|
||||
className="-z-1 mb-1 overflow-y-clip"
|
||||
crosses
|
||||
crossesOffset="lg:translate-y-[5.25rem]"
|
||||
customPaddings
|
||||
@@ -13,6 +13,8 @@ export default function HomePage() {
|
||||
>
|
||||
<Hero />
|
||||
<Features />
|
||||
<hr className="h-px bg-gray-200"/>
|
||||
|
||||
</Section>
|
||||
</main>
|
||||
);
|
||||
|
||||
103
docs/components/beta/badge.module.css
Normal file
103
docs/components/beta/badge.module.css
Normal file
@@ -0,0 +1,103 @@
|
||||
.beta {
|
||||
background-color: transparent;
|
||||
border: 0.2px solid #e2dddd;
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
letter-spacing: 0.05em;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
overflow: visible;
|
||||
padding: 0.3em 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:hover {
|
||||
color: white;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.beta:hover::before {
|
||||
width: 0.9375rem;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.beta:hover .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;
|
||||
}
|
||||
11
docs/components/beta/badge.tsx
Normal file
11
docs/components/beta/badge.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import badgestyle from './badge.module.css'
|
||||
export const PulicBetaBadge = () => {
|
||||
return (
|
||||
<div className={badgestyle.beta}>
|
||||
<span className={badgestyle.top_key}></span>
|
||||
<span className={badgestyle.text}>BETA</span>
|
||||
<span className={badgestyle.bottom_key_1}></span>
|
||||
<span className={badgestyle.bottom_key_2}></span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -22,7 +22,7 @@ export const TechStackDisplay = ({
|
||||
className?: string;
|
||||
}) => {
|
||||
return (
|
||||
<div className={cn("flex gap-7 flex-wrap mt-3 items-center max-w-4xl", className)}>
|
||||
<div className={cn("flex gap-7 flex-wrap mt-3 justify-center items-center max-w-4xl", className)}>
|
||||
{skills.map((icon) => {
|
||||
return (
|
||||
<TooltipProvider key={icon} >
|
||||
|
||||
@@ -23,10 +23,10 @@ import { Ripple } from "./ripple";
|
||||
export default function Features() {
|
||||
|
||||
return (
|
||||
<div className="md:max-w-[1300px] font-geist relative mx-auto md:border-[1.2px] rounded-none">
|
||||
<div className="md:max-w-[1300px] mt-10 mx-auto font-geist relative md:border-l-0 md:border-[1.2px] rounded-none -pr-2">
|
||||
<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="relative items-start justify-start border-l-[1.2px] transform-gpu flex flex-col p-10 overflow-clip">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 md:mx-0 grid-rows-4 md:grid-rows-4 w-full">
|
||||
<div className="relative items-start justify-start border-l-[1.2px] border-t-[1.2px] md:border-t-0 transform-gpu flex flex-col p-10 overflow-clip">
|
||||
<Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
|
||||
|
||||
<div className="flex gap-2 items-center my-1">
|
||||
@@ -53,7 +53,7 @@ export default function Features() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative items-start justify-start border-l-[1.2px] transform-gpu flex flex-col p-10">
|
||||
<div className="relative items-start justify-start border-l-[1.2px] border-t-[1.2px] md:border-t-0 transform-gpu flex flex-col p-10">
|
||||
<Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
|
||||
|
||||
<div className="flex gap-2 items-center my-1">
|
||||
@@ -80,7 +80,7 @@ export default function Features() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative items-start justify-start md:border-l-[0.2px] flex flex-col p-10">
|
||||
<div className="relative items-start justify-start md:border-l-[0.2px] border-t-[1.2px] md:border-t-0 flex flex-col p-10">
|
||||
<Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
|
||||
|
||||
<div className="flex gap-2 items-center my-1">
|
||||
@@ -131,6 +131,7 @@ export default function Features() {
|
||||
Learn more
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="items-start justify-staart border-l-[1.2px] border-t-[1.2px] flex flex-col p-10 ">
|
||||
@@ -184,13 +185,15 @@ export default function Features() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative md:grid md:col-span-3 grid-cols-2 row-span-2 border-t-[1.2px] md:border-b-[1.2px] dark:border-b-0 h-full overflow-visible py-20 ">
|
||||
<div className="relative md:grid md:col-span-3 grid-cols-2 row-span-2 border-t-[1.2px] border-l-[1.2px] md:border-b-[1.2px] dark:border-b-0 h-full py-20 ">
|
||||
<Plus className="absolute top-[-15px] left-[-15px] text-black/20 dark:text-black/20 w-8 h-8 " />
|
||||
<Plus className="absolute top-[-15px] right-[-15px] text-black/20 dark:text-black/20 w-8 h-8 " />
|
||||
<div className="p-16 pt-10 md:px-10 h-full md:absolute top-0 left-0 w-full">
|
||||
<div className="flex flex-col gap-3 justify-center h-full items-center w-full">
|
||||
<div className="flex gap-2 items-center">
|
||||
<Globe2Icon className="w-4 h-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
own your auth
|
||||
Own your auth
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-4xl md:text-4xl mt-4 tracking-tighter font-normal max-w-md mx-auto text-center">
|
||||
@@ -198,7 +201,7 @@ export default function Features() {
|
||||
Roll your own auth with confidence in minutes!
|
||||
</strong>
|
||||
</p>
|
||||
<div className="flex mt-[10px] z-20">
|
||||
<div className="flex mt-[10px] z-20 justify-center items-start">
|
||||
<TechStackDisplay
|
||||
skills={[
|
||||
"nextJs",
|
||||
@@ -219,9 +222,8 @@ export default function Features() {
|
||||
<Ripple />
|
||||
</div>
|
||||
</div>
|
||||
<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 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>
|
||||
|
||||
@@ -92,9 +92,9 @@ export default function Hero() {
|
||||
const theme = useTheme();
|
||||
const [activeTab, setActiveTab] = useState("auth.ts");
|
||||
const code = tabs.find((tab) => tab.name === activeTab)?.code ?? "";
|
||||
|
||||
93
|
||||
return (
|
||||
<section className="flex mt-1 min-h-screen items-center justify-center gap-20 p-5">
|
||||
<section className="w-full mx-auto px-10 flex min-h-[85vh] py-16 items-center justify-center gap-20">
|
||||
<div className="overflow-hidden bg-transparent dark:-mb-32 dark:mt-[-4.75rem] dark:pb-32 dark:pt-[4.75rem] md:px-10">
|
||||
<div className="grid max-w-full mx-auto grid-cols-1 items-center gap-x-8 gap-y-16 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
|
||||
<div className="relative z-10 md:text-center lg:text-left">
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
|
||||
const SectionSvg = ({
|
||||
crossesOffset,
|
||||
}: {
|
||||
|
||||
@@ -4,6 +4,7 @@ import Image from "next/image";
|
||||
import { NavbarMobileBtn } from "./nav-mobile";
|
||||
import { NavLink } from "./nav-link";
|
||||
import { Logo } from "./logo";
|
||||
import { PulicBetaBadge } from "./beta/badge";
|
||||
|
||||
|
||||
const hideNavbar = process.env.NODE_ENV === "production"
|
||||
@@ -18,6 +19,7 @@ export const Navbar = () => {
|
||||
<div className="flex items-center gap-2">
|
||||
<Logo />
|
||||
<p>BETTER-AUTH.</p>
|
||||
<PulicBetaBadge />
|
||||
</div>
|
||||
</Link>
|
||||
<div className="md:col-span-9 lg:col-span-10 flex items-center justify-end ">
|
||||
|
||||
Reference in New Issue
Block a user