ar.badiei/reui-blocks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some edit

Browse Source
This commit is contained in:
mr.sabri
2026-08-13 20:38:45 +03:30
parent 1cea5b78cb
commit 031e0cc413
24 changed files with 462 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocks/feature313.tsx
+26 -17
View File
@@ -72,12 +72,19 @@ const Feature313 = ({
const isMobile = useIsMobile();
return (
<section dir="rtl" lang="fa" className={cn("bg-muted py-24", className)}>
<div className="container flex flex-col gap-2">
<div className="grid grid-cols-1 gap-1 lg:grid-cols-4">
<section
dir="rtl"
lang="fa"
className={cn("relative w-full min-w-0 overflow-hidden bg-muted py-16 md:py-24", className)}
>
<div className="container flex min-w-0 flex-col gap-2 px-4 sm:px-6">
<div className="grid w-full min-w-0 grid-cols-1 gap-1 lg:grid-cols-4">
{cards.map((card, index) => (
<Card key={card.id} className="border-none p-10 text-start shadow-none">
<div className="flex items-center justify-between gap-2">
<Card
key={card.id}
className="min-w-0 overflow-hidden border-none p-5 text-start shadow-none sm:p-8 lg:p-10"
>
<div className="flex min-w-0 items-center justify-between gap-2">
<div className="flex gap-1">
{cards.map((_, circleIndex) => (
<div
@@ -90,7 +97,7 @@ const Feature313 = ({
{(index + 1).toLocaleString("fa-IR").padStart(2, "۰")}
</div>
</div>
<div className="flex flex-col gap-4 md:flex-row md:justify-between">
<div className="flex min-w-0 flex-col gap-4 md:flex-row md:justify-between">
<div className="aspect-square size-12 shrink-0">
<img
src={card.image}
@@ -99,7 +106,7 @@ const Feature313 = ({
/>
</div>
<div className="min-w-0 flex-1">
<h3 className="text-md leading-tight font-medium text-pretty">
<h3 className="text-md leading-tight font-medium text-balance break-words">
{card.title}
</h3>
</div>
@@ -111,7 +118,7 @@ const Feature313 = ({
<Dialog>
<DialogTrigger asChild>
<motion.div
className="group relative aspect-video min-h-72 cursor-pointer overflow-hidden rounded-lg"
className="group relative aspect-video w-full min-w-0 min-h-48 cursor-pointer overflow-hidden rounded-lg sm:min-h-72"
whileHover="hover"
initial="initial"
>
@@ -126,10 +133,10 @@ const Feature313 = ({
<motion.img
src={imageSrc}
alt={imageAlt}
className="h-full w-full rounded-lg object-cover"
className="h-full w-full max-w-full rounded-lg object-cover"
variants={{
initial: { scale: 1 },
hover: { scale: 1.1 },
hover: isMobile ? { scale: 1 } : { scale: 1.1 },
}}
transition={{ duration: 0.3, ease: "easeOut" }}
/>
@@ -148,7 +155,7 @@ const Feature313 = ({
initial: { x: 0, scale: 1 },
hover: {
x: isMobile ? 0 : "-75%",
scale: 1.2,
scale: isMobile ? 1 : 1.2,
},
}}
transition={{ duration: 0.3, ease: "easeOut" }}
@@ -163,18 +170,20 @@ const Feature313 = ({
</motion.div>
<motion.div
className="text-center md:text-start"
className="min-w-0 text-center md:text-start"
variants={{
initial: { opacity: 1 },
hover: { opacity: 0, transform: "-translate-y-3" },
hover: isMobile
? { opacity: 1 }
: { opacity: 0, transform: "-translate-y-3" },
}}
transition={{ duration: 0.3, ease: "easeOut" }}
>
<div className="px-4 py-2">
<p className="text-lg font-bold text-secondary">
<div className="px-2 py-2 sm:px-4">
<p className="text-base font-bold text-balance break-words text-secondary sm:text-lg">
{videoCaption}
</p>
<p className="text-lg font-medium text-muted-foreground">
<p className="text-base font-medium text-balance break-words text-muted-foreground sm:text-lg">
{videoSecondaryCaption}
</p>
</div>
@@ -183,7 +192,7 @@ const Feature313 = ({
</div>
</motion.div>
</DialogTrigger>
<DialogContent className="w-full border-none bg-black p-0 md:max-w-6xl md:p-1">
<DialogContent className="w-[calc(100%-2rem)] max-w-[calc(100%-2rem)] border-none bg-black p-0 sm:w-full md:max-w-6xl md:p-1">
<DialogTitle className="sr-only">{videoCaption}</DialogTitle>
<DialogDescription className="sr-only">
{videoSecondaryCaption} {videoCaption}