fix some bug in some blocks
This commit is contained in:
mr.sabri
+46
-46
@@ -29,11 +29,11 @@ const Feature271 = ({ className }: Feature271Props) => {
|
||||
<section
|
||||
dir="rtl"
|
||||
lang="fa"
|
||||
className={cn("h-full w-screen overflow-hidden", className)}
|
||||
className={cn("relative h-full w-full overflow-hidden", className)}
|
||||
>
|
||||
<AuroraBackground>
|
||||
<div className="relative container flex h-full flex-col items-center justify-center gap-15 text-center">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<div className="relative container flex h-full min-w-0 flex-col items-center justify-center gap-15 text-center">
|
||||
<div className="flex min-w-0 flex-col items-center justify-center">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="mb-5 w-fit rounded-full bg-background/70 px-4 py-1 text-sm tracking-tight"
|
||||
@@ -44,16 +44,19 @@ const Feature271 = ({ className }: Feature271Props) => {
|
||||
داده پراکنده را به تصمیم تبدیل کنید
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex w-full max-w-lg items-center gap-4 px-5">
|
||||
<span className="h-px w-full bg-muted-foreground/20" />
|
||||
<p className="text-sm text-muted-foreground/50">گزارشهای بصری نشان میدهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.</p>
|
||||
<span className="h-px w-full bg-muted-foreground/20" />
|
||||
<div className="flex w-full min-w-0 max-w-lg items-center gap-4 px-5">
|
||||
<span className="h-px min-w-0 flex-1 bg-muted-foreground/20" />
|
||||
<p className="min-w-0 max-w-[14rem] shrink text-sm text-balance text-muted-foreground/50 sm:max-w-xs">
|
||||
گزارشهای بصری نشان میدهند کدام اقدام بیشترین اثر را روی درآمد و
|
||||
نگهداشت مشتری داشته است.
|
||||
</p>
|
||||
<span className="h-px min-w-0 flex-1 bg-muted-foreground/20" />
|
||||
</div>
|
||||
<ul className="grid grid-cols-2 gap-3 text-start">
|
||||
<ul className="grid w-full min-w-0 max-w-lg grid-cols-2 gap-3 px-2 text-start">
|
||||
{FEATURES.map((feature) => (
|
||||
<li key={feature.id} className="flex gap-2 lg:items-center">
|
||||
<li key={feature.id} className="flex min-w-0 gap-2 lg:items-center">
|
||||
<BadgeCheck className="size-4 shrink-0 text-primary" />
|
||||
<p className="tracking-tight text-pretty text-muted-foreground/80">
|
||||
<p className="min-w-0 tracking-tight text-pretty text-muted-foreground/80">
|
||||
{feature.label}
|
||||
</p>
|
||||
</li>
|
||||
@@ -83,46 +86,43 @@ export const AuroraBackground = ({
|
||||
...props
|
||||
}: AuroraBackgroundProps) => {
|
||||
return (
|
||||
<main>
|
||||
<div
|
||||
className={cn(
|
||||
"transition-bg relative flex h-full min-h-[32rem] w-full min-w-0 flex-col items-center justify-center overflow-hidden bg-zinc-50 text-slate-950 dark:bg-zinc-900",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"transition-bg relative flex h-[100vh] flex-col items-center justify-center bg-zinc-50 text-slate-950 dark:bg-zinc-900",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
className="absolute inset-0 overflow-hidden"
|
||||
style={
|
||||
{
|
||||
"--aurora":
|
||||
"repeating-linear-gradient(100deg,#000_10%,#666_15%,#ccc_20%,#fff_25%,#333_30%)",
|
||||
"--dark-gradient":
|
||||
"repeating-linear-gradient(100deg,#000_0%,#000_7%,transparent_10%,transparent_12%,#000_16%)",
|
||||
"--white-gradient":
|
||||
"repeating-linear-gradient(100deg,#fff_0%,#fff_7%,transparent_10%,transparent_12%,#fff_16%)",
|
||||
|
||||
"--gray-200": "#ccc",
|
||||
"--gray-400": "#666",
|
||||
"--gray-800": "#333",
|
||||
"--black": "#000",
|
||||
"--white": "#fff",
|
||||
"--transparent": "transparent",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 overflow-hidden"
|
||||
style={
|
||||
{
|
||||
"--aurora":
|
||||
"repeating-linear-gradient(100deg,#000_10%,#666_15%,#ccc_20%,#fff_25%,#333_30%)",
|
||||
"--dark-gradient":
|
||||
"repeating-linear-gradient(100deg,#000_0%,#000_7%,transparent_10%,transparent_12%,#000_16%)",
|
||||
"--white-gradient":
|
||||
"repeating-linear-gradient(100deg,#fff_0%,#fff_7%,transparent_10%,transparent_12%,#fff_16%)",
|
||||
className={cn(
|
||||
`pointer-events-none absolute -inset-[10px] [background-image:var(--white-gradient),var(--aurora)] [background-size:300%,_200%] [background-position:50%_50%,50%_50%] opacity-50 blur-[10px] invert filter will-change-transform [--aurora:repeating-linear-gradient(100deg,var(--black)_10%,var(--gray-400)_15%,var(--gray-200)_20%,var(--white)_25%,var(--gray-800)_30%)] [--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)] [--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)] after:absolute after:inset-0 after:animate-aurora-background after:[background-image:var(--white-gradient),var(--aurora)] after:[background-size:200%,_100%] after:mix-blend-difference after:content-[""] dark:[background-image:var(--dark-gradient),var(--aurora)] dark:invert-0 after:dark:[background-image:var(--dark-gradient),var(--aurora)]`,
|
||||
|
||||
"--gray-200": "#ccc",
|
||||
"--gray-400": "#666",
|
||||
"--gray-800": "#333",
|
||||
"--black": "#000",
|
||||
"--white": "#fff",
|
||||
"--transparent": "transparent",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<div
|
||||
// I'm sorry but this is what peak developer performance looks like // trigger warning
|
||||
className={cn(
|
||||
`pointer-events-none absolute -inset-[10px] [background-image:var(--white-gradient),var(--aurora)] [background-size:300%,_200%] [background-position:50%_50%,50%_50%] opacity-50 blur-[10px] invert filter will-change-transform [--aurora:repeating-linear-gradient(100deg,var(--black)_10%,var(--gray-400)_15%,var(--gray-200)_20%,var(--white)_25%,var(--gray-800)_30%)] [--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)] [--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)] after:absolute after:inset-0 after:animate-aurora-background after:[background-image:var(--white-gradient),var(--aurora)] after:[background-size:200%,_100%] after:[background-attachment:fixed] after:mix-blend-difference after:content-[""] dark:[background-image:var(--dark-gradient),var(--aurora)] dark:invert-0 after:dark:[background-image:var(--dark-gradient),var(--aurora)]`,
|
||||
|
||||
showRadialGradient &&
|
||||
`[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`,
|
||||
)}
|
||||
></div>
|
||||
</div>
|
||||
{children}
|
||||
showRadialGradient &&
|
||||
`[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user