denshooter
332adab08c
Refactored About section to use a responsive Bento Grid layout. Redesigned Hero for stronger visual impact. Implemented floating Island navigation. Updated Project cards for cleaner aesthetic.
61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import { motion } from "framer-motion";
|
|
|
|
export const BentoGrid = ({
|
|
className,
|
|
children,
|
|
}: {
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"grid md:auto-rows-[18rem] grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto ",
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const BentoGridItem = ({
|
|
className,
|
|
title,
|
|
description,
|
|
header,
|
|
icon,
|
|
onClick,
|
|
}: {
|
|
className?: string;
|
|
title?: string | React.ReactNode;
|
|
description?: string | React.ReactNode;
|
|
header?: React.ReactNode;
|
|
icon?: React.ReactNode;
|
|
onClick?: () => void;
|
|
}) => {
|
|
return (
|
|
<motion.div
|
|
whileHover={{ y: -5 }}
|
|
transition={{ duration: 0.2 }}
|
|
className={cn(
|
|
"row-span-1 rounded-3xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-stone-900 bg-white border border-stone-200 dark:border-stone-800 justify-between flex flex-col space-y-4",
|
|
className
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
{header}
|
|
<div className="group-hover/bento:translate-x-2 transition duration-200">
|
|
{icon}
|
|
<div className="font-sans font-bold text-stone-800 dark:text-stone-100 mb-2 mt-2">
|
|
{title}
|
|
</div>
|
|
<div className="font-sans font-normal text-stone-600 dark:text-stone-400 text-xs">
|
|
{description}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|