docs: refine UI components and styling

This commit is contained in:
Bereket Engida
2025-03-08 22:09:19 +03:00
parent 970918cb45
commit dd31d6c9e3
6 changed files with 6 additions and 6 deletions

View File

@@ -28,7 +28,7 @@ export default async function HomePage() {
return (
<main className="h-min mx-auto overflow-x-hidden">
<Section
className="-z-1 mb-1 overflow-y-clip"
className="mb-1 overflow-y-clip"
crosses
crossesOffset="lg:translate-y-[5.25rem]"
customPaddings

View File

@@ -269,7 +269,7 @@ export function Builder() {
<div className="flex gap-4 md:gap-12 flex-col md:flex-row items-center md:items-start">
<ScrollArea className="w-4/12">
<div className="overflow-scroll h-[580px] relate">
<div className="overflow-scroll h-[580px] relative">
{options.signUp ? (
<AuthTabs
tabs={[

View File

@@ -22,7 +22,7 @@ import { cn } from "@/lib/utils";
export default function SignIn() {
const [options] = useAtom(optionsAtom);
return (
<Card className="z-50 rounded-none max-w-md">
<Card className="z-50 rounded-none max-w-full">
<CardHeader>
<CardTitle className="text-lg md:text-xl">Sign In</CardTitle>
<CardDescription className="text-xs md:text-sm">

View File

@@ -74,7 +74,7 @@ export const AuthTabs = ({
zIndex: -idx,
opacity: idx < 3 ? 1 - idx * 0.1 : 0,
}}
className={cn("w-50 h-full", isActive(tab) ? "" : "hidden")}
className={cn("h-full", isActive(tab) ? "" : "hidden")}
>
{tab.content}
</div>

View File

@@ -49,7 +49,7 @@ function TrafficLightsIcon(props: React.ComponentPropsWithoutRef<"svg">) {
export default function Hero() {
return (
<section className="max-h-[40rem] relative z-[999] w-full flex md:items-center md:justify-center dark:bg-black/[0.96] antialiased bg-grid-white/[0.02] relative overflow-hidden px-8 md:min-h-[40rem]">
<section className="max-h-[40rem] relative w-full flex md:items-center md:justify-center dark:bg-black/[0.96] antialiased bg-grid-white/[0.02] overflow-hidden px-8 md:min-h-[40rem]">
<Spotlight />
<div className="overflow-hidden bg-transparent md:px-10 dark:-mb-32 dark:mt-[-4.75rem] dark:pb-32 dark:pt-[4.75rem]">
<div className="lg:max-w-8xl mx-auto grid max-w-full grid-cols-1 items-center gap-x-8 gap-y-16 px-4 py-2 lg:grid-cols-2 lg:px-8 lg:py-4 xl:gap-x-16 xl:px-12">

View File

@@ -57,7 +57,7 @@ function DialogContent({
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
"fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg w-11/12",
className,
)}
{...props}