¨evandrodevbr¨
780fd7c161
- Improved the contact form's message generation with more professional and detailed templates - Replaced the grid-based background animation with a WebGL-powered particle system using OGL - Added GSAP for advanced animation capabilities - Adjusted layout styling for better centering and spacing across components - Enhanced visual feedback and interactivity of the animated background This change significantly upgrades the user experience and visual appeal of the contact section while maintaining performance through efficient rendering techniques.
55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "motion/react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface BentoGridProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
interface BentoGridItemProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
colSpan?: number;
|
|
rowSpan?: number;
|
|
}
|
|
|
|
export function BentoGrid({ children, className }: BentoGridProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-w-6xl mx-auto justify-center",
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function BentoGridItem({
|
|
children,
|
|
className,
|
|
colSpan = 1,
|
|
rowSpan = 1,
|
|
}: BentoGridItemProps) {
|
|
return (
|
|
<motion.div
|
|
className={cn(
|
|
"relative overflow-hidden rounded-lg border border-white/20 bg-white/5 backdrop-blur-sm p-6",
|
|
`col-span-${colSpan} row-span-${rowSpan}`,
|
|
className
|
|
)}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ scale: 1.02 }}
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-blue-400/10 to-cyan-500/10 opacity-0 hover:opacity-100 transition-opacity duration-300" />
|
|
<div className="relative z-10">{children}</div>
|
|
</motion.div>
|
|
);
|
|
}
|