170 lines
7.0 KiB
TypeScript
170 lines
7.0 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
interface Hero28Props {
|
|
className?: string;
|
|
title?: string;
|
|
description?: string;
|
|
showButton?: boolean;
|
|
}
|
|
|
|
const Hero28 = ({
|
|
className,
|
|
title = "Welcome to Our Website",
|
|
description = "Elig doloremque mollitia fugiat omnis! Porro facilis quo animi consequatur.",
|
|
showButton = true,
|
|
}: Hero28Props) => {
|
|
return (
|
|
<section className={cn("relative py-32 overflow-visible", className)}>
|
|
{/* Background pattern */}
|
|
<div className="absolute inset-x-0 top-0 container mx-auto hidden h-full overflow-visible lg:block pointer-events-none">
|
|
<div className="flex flex-col items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 520" className="w-full h-auto">
|
|
<defs>
|
|
<radialGradient id="text-backgroud" cx="50%" cy="50%" r={0.6}>
|
|
<stop stopColor="black" offset={0.4} />
|
|
<stop stopColor="black" offset={1} stopOpacity={0} />
|
|
</radialGradient>
|
|
<linearGradient id="icon-backgroud" x1="0" y1="0" x2="1" y2="1">
|
|
<stop stopColor="var(--color-accent)" offset={0} />
|
|
<stop stopColor="var(--color-background)" offset={1} />
|
|
</linearGradient>
|
|
<linearGradient id="gold-coin-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stopColor="var(--gold-300)" />
|
|
<stop offset="50%" stopColor="var(--gold-500)" />
|
|
<stop offset="100%" stopColor="var(--gold-700)" />
|
|
</linearGradient>
|
|
<linearGradient id="gold-bar-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stopColor="var(--gold-300)" />
|
|
<stop offset="50%" stopColor="var(--gold-500)" />
|
|
<stop offset="100%" stopColor="var(--gold-700)" />
|
|
</linearGradient>
|
|
<mask id="mask">
|
|
<rect
|
|
x="0"
|
|
y="0"
|
|
width="100%"
|
|
height="100%"
|
|
stroke="none"
|
|
fill="black"
|
|
/>
|
|
<rect
|
|
x="80"
|
|
y="40"
|
|
width="1260"
|
|
height="380"
|
|
rx="140"
|
|
stroke="none"
|
|
filter="url(#blur)"
|
|
fill="white"
|
|
/>
|
|
<rect
|
|
x="40"
|
|
y="-120"
|
|
width="1320"
|
|
height="600"
|
|
stroke="none"
|
|
fill="url(#text-backgroud)"
|
|
/>
|
|
</mask>
|
|
<filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="40" />
|
|
</filter>
|
|
</defs>
|
|
<path
|
|
stroke="var(--border)"
|
|
strokeWidth={1}
|
|
d="M0,40H1400M0,120H1400M0,200H1400M0,280H1400M0,360H1400M0,440H1400M60,0V520M140,0V520M220,0V520M300,0V520M380,0V520M460,0V520M540,0V520M620,0V520M700,0V520M780,0V520M860,0V520M940,0V520M1020,0V520M1100,0V520M1180,0V520M1260,0V520M1340,0V520"
|
|
mask="url(#mask)"
|
|
/>
|
|
{/* سکه طلا */}
|
|
<rect
|
|
x={140}
|
|
y={120}
|
|
width={80}
|
|
height={80}
|
|
stroke="var(--border)"
|
|
fill="url(#icon-backgroud)"
|
|
/>
|
|
<svg x={160} y={140} width={40} height={40} viewBox="0 0 40 40" className="overflow-visible">
|
|
<circle cx={20} cy={20} r={16} fill="url(#gold-coin-grad)" stroke="var(--gold-700)" strokeWidth={1.5} />
|
|
<circle cx={20} cy={20} r={10} fill="none" stroke="var(--gold-700)" strokeWidth={1} opacity={0.8} />
|
|
</svg>
|
|
{/* شمش طلا */}
|
|
<rect
|
|
x={60}
|
|
y={280}
|
|
width={80}
|
|
height={80}
|
|
stroke="var(--border)"
|
|
fill="url(#icon-backgroud)"
|
|
/>
|
|
<svg x={80} y={300} width={40} height={40} viewBox="0 0 40 40" className="overflow-visible">
|
|
<rect x={6} y={12} width={28} height={16} rx={3} fill="url(#gold-bar-grad)" stroke="var(--gold-700)" strokeWidth={1.5} />
|
|
<rect x={10} y={14} width={4} height={12} rx={1} fill="var(--gold-600)" opacity={0.6} />
|
|
<rect x={26} y={14} width={4} height={12} rx={1} fill="var(--gold-600)" opacity={0.6} />
|
|
</svg>
|
|
{/* سکه طلا */}
|
|
<rect
|
|
x={300}
|
|
y={360}
|
|
width={80}
|
|
height={80}
|
|
stroke="var(--border)"
|
|
fill="url(#icon-backgroud)"
|
|
/>
|
|
<svg x={320} y={380} width={40} height={40} viewBox="0 0 40 40" className="overflow-visible">
|
|
<circle cx={20} cy={20} r={16} fill="url(#gold-coin-grad)" stroke="var(--gold-700)" strokeWidth={1.5} />
|
|
<circle cx={20} cy={20} r={10} fill="none" stroke="var(--gold-700)" strokeWidth={1} opacity={0.8} />
|
|
</svg>
|
|
{/* شمش طلا */}
|
|
<rect
|
|
x={1180}
|
|
y={40}
|
|
width={80}
|
|
height={80}
|
|
stroke="var(--border)"
|
|
fill="url(#icon-backgroud)"
|
|
/>
|
|
<svg x={1200} y={60} width={40} height={40} viewBox="0 0 40 40" className="overflow-visible">
|
|
<rect x={6} y={12} width={28} height={16} rx={3} fill="url(#gold-bar-grad)" stroke="var(--gold-700)" strokeWidth={1.5} />
|
|
<rect x={10} y={14} width={4} height={12} rx={1} fill="var(--gold-600)" opacity={0.6} />
|
|
<rect x={26} y={14} width={4} height={12} rx={1} fill="var(--gold-600)" opacity={0.6} />
|
|
</svg>
|
|
{/* سکه طلا */}
|
|
<rect
|
|
x={1260}
|
|
y={280}
|
|
width={80}
|
|
height={80}
|
|
stroke="var(--border)"
|
|
fill="url(#icon-backgroud)"
|
|
/>
|
|
<svg x={1280} y={300} width={40} height={40} viewBox="0 0 40 40" className="overflow-visible">
|
|
<circle cx={20} cy={20} r={16} fill="url(#gold-coin-grad)" stroke="var(--gold-700)" strokeWidth={1.5} />
|
|
<circle cx={20} cy={20} r={10} fill="none" stroke="var(--gold-700)" strokeWidth={1} opacity={0.8} />
|
|
</svg>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="relative z-10 container mx-auto flex flex-col items-center text-center px-4 md:px-6 min-h-[400px]">
|
|
<h1 className="text-heading-1 my-6 font-bold text-pretty">
|
|
{title}
|
|
</h1>
|
|
<p className="text-body mb-8 max-w-3xl leading-relaxed text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
{showButton && (
|
|
<div className="mb-8">
|
|
<Button variant="primary">Primary</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero28 };
|
|
|