Update content in about blocks to reflect new branding and messaging for various products. Key changes include rephrasing descriptions, updating titles, and modifying statistics to better align with the current offerings and mission statements. This enhances clarity and consistency across the platform.
This commit is contained in:
mr.sabri
+27
-14
@@ -46,24 +46,34 @@ interface Gallery1Props {
|
||||
const Gallery1 = ({ className }: Gallery1Props) => {
|
||||
const [selection, setSelection] = useState(data[0].id);
|
||||
return (
|
||||
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
||||
<div className="container">
|
||||
<div className="flex flex-col gap-5 lg:aspect-1336/420 lg:flex-row">
|
||||
<section dir="rtl" lang="fa" className={cn("w-full max-w-full py-32", className)}>
|
||||
<div className="mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8">
|
||||
<div
|
||||
dir="ltr"
|
||||
className="mx-auto flex w-full max-w-full flex-col gap-5 lg:h-[420px] lg:flex-row lg:items-stretch"
|
||||
>
|
||||
{data.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
data-state={selection === item.id ? "open" : "closed"}
|
||||
className='group max-lg:w-full max-lg:flex-1 max-md:h-[200px] md:max-lg:aspect-1336/420 lg:transform-gpu lg:transition-all lg:data-[state="closed"]:w-[20%] lg:data-[state="closed"]:duration-500 lg:data-[state="open"]:w-[60%] lg:data-[state="open"]:duration-400'
|
||||
className={cn(
|
||||
"group w-full min-w-0",
|
||||
"max-md:h-[200px]",
|
||||
"md:max-lg:min-h-[220px] md:max-lg:flex-1 md:max-lg:aspect-[1336/420]",
|
||||
"lg:h-full lg:transform-gpu lg:transition-[flex-grow] lg:duration-500",
|
||||
'lg:data-[state="closed"]:flex-[1_1_0%]',
|
||||
'lg:data-[state="open"]:flex-[3_1_0%]',
|
||||
)}
|
||||
onMouseEnter={() => {
|
||||
setSelection(item.id);
|
||||
}}
|
||||
>
|
||||
<a
|
||||
href={item.href}
|
||||
className="relative block h-full w-full overflow-hidden rounded-xl bg-primary text-primary-foreground dark:bg-card"
|
||||
className="relative block h-full min-h-[200px] w-full overflow-hidden rounded-xl bg-primary text-primary-foreground dark:bg-card md:min-h-[220px] lg:min-h-0"
|
||||
>
|
||||
<div className='absolute -inset-[50%] hidden h-[200%] w-[200%] md:block lg:group-data-[state="closed"]:blur-sm'>
|
||||
<div className="absolute top-[calc(25%+40px)] aspect-square h-[calc(50%+40px)] max-lg:start-[calc(50%+40px)] start-[50%]">
|
||||
<div className='pointer-events-none absolute -inset-[50%] hidden h-[200%] w-[200%] md:block lg:group-data-[state="closed"]:blur-sm'>
|
||||
<div className="absolute top-[calc(25%+40px)] left-[50%] aspect-square h-[calc(50%+40px)] max-lg:left-[calc(50%+40px)]">
|
||||
<div className="h-full w-full overflow-clip rounded-xl">
|
||||
<img
|
||||
src={item.image}
|
||||
@@ -72,19 +82,22 @@ const Gallery1 = ({ className }: Gallery1Props) => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute inset-y-[25%] end-[50%] flex aspect-389/420 h-[50%] items-center justify-center max-lg:hidden">
|
||||
<div className="absolute inset-y-[25%] right-[50%] hidden aspect-[389/420] h-[50%] items-center justify-center lg:flex">
|
||||
<img
|
||||
src={item.logo}
|
||||
alt={item.company}
|
||||
className="h-8 invert"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute top-[50%] start-[50%] flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-accent max-lg:hidden">
|
||||
<div className="absolute top-[50%] left-[50%] hidden size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-accent lg:flex">
|
||||
<Plus className="size-8 text-accent-foreground" />
|
||||
</div>
|
||||
<div className="absolute inset-x-0 bottom-0 hidden h-[50%] bg-linear-to-t from-primary from-50% to-transparent lg:block"></div>
|
||||
<div className="absolute inset-x-0 bottom-0 hidden h-[50%] bg-linear-to-t from-primary from-50% to-transparent lg:block" />
|
||||
</div>
|
||||
<div className="relative flex flex-col justify-between gap-4 md:absolute md:inset-0 md:max-lg:start-[50%] md:max-lg:w-[50%]">
|
||||
<div
|
||||
dir="rtl"
|
||||
className="relative z-10 flex h-full min-h-[200px] flex-col justify-between gap-4 md:absolute md:inset-0 md:min-h-0 md:max-lg:left-[50%] md:max-lg:w-[50%]"
|
||||
>
|
||||
<div className='flex h-[80px] items-center gap-2 p-4 transition-opacity delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0'>
|
||||
{item.badges.map((badge) => (
|
||||
<Badge key={badge} variant="secondary">
|
||||
@@ -92,7 +105,7 @@ const Gallery1 = ({ className }: Gallery1Props) => {
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
<div className='flex flex-col gap-2 p-4 text-start transition-all delay-200 delay-250 duration-500 lg:group-data-[state="closed"]:translate-y-4 lg:group-data-[state="closed"]:opacity-0'>
|
||||
<div className='flex flex-col gap-2 p-4 text-start transition-all delay-200 duration-500 lg:group-data-[state="closed"]:translate-y-4 lg:group-data-[state="closed"]:opacity-0'>
|
||||
<div className="lg:hidden">
|
||||
<img
|
||||
src={item.logo}
|
||||
@@ -104,8 +117,8 @@ const Gallery1 = ({ className }: Gallery1Props) => {
|
||||
<div className="text-base font-medium lg:text-lg">
|
||||
{item.title}
|
||||
</div>
|
||||
<div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-background text-foreground transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 rtl:group-hover:-translate-x-1 rtl:group-hover:translate-y-1 lg:size-10">
|
||||
<ArrowUpRight className="size-4 rtl:rotate-180 lg:size-5" />
|
||||
<div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-background text-foreground transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10">
|
||||
<ArrowUpRight className="size-4 rotate-180 lg:size-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user