88 lines
3.3 KiB
TypeScript
88 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import {motion} from 'framer-motion';
|
|
import {techStack} from "@/constant/TechStack";
|
|
|
|
const TechStack = () => {
|
|
return (
|
|
<section className="w-full py-20 bg-background text-foreground transition-colors duration-700 ease-in-out">
|
|
<div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
|
|
<motion.h2
|
|
className="text-3xl md:text-4xl font-bold mb-1 text-left"
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.4}}
|
|
>
|
|
Technologien
|
|
</motion.h2>
|
|
|
|
<motion.div
|
|
className="w-12 h-[2px] mt-2 mb-6 bg-amber-500"
|
|
initial={{opacity: 0, x: -20}}
|
|
whileInView={{opacity: 1, x: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.4, delay: 0.1}}
|
|
/>
|
|
|
|
<motion.p
|
|
className="text-sm md:text-base mb-10 text-muted-foreground"
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.3, delay: 0.2}}
|
|
>
|
|
Mit diesen Technologien realisieren wir moderne, leistungsstarke Softwarelösungen.
|
|
</motion.p>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
|
{techStack.row1.map((group, index) => (
|
|
<TechCard key={group.category} group={group} delay={index * 0.2}/>
|
|
))}
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
{techStack.row2.map((group, index) => (
|
|
<TechCard key={group.category} group={group} delay={index * 0.2 + 0.4}/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
const TechCard = ({
|
|
group,
|
|
delay,
|
|
}: {
|
|
group: { category: string; items: { id: string; label: string }[] };
|
|
delay: number;
|
|
}) => (
|
|
<motion.div
|
|
className="p-4 rounded-lg border bg-muted shadow-md text-foreground"
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
whileHover={{scale: 1.03, boxShadow: '0 10px 20px rgba(0,0,0,0.1)'}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.4, delay}}
|
|
>
|
|
<h3 className="text-base font-semibold mb-4">{group.category}</h3>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
{group.items.map(({id, label}) => (
|
|
<div key={id} className="flex flex-col items-center text-center">
|
|
<Image
|
|
src={`/images/svg/${id}.svg`}
|
|
alt={label}
|
|
width={32}
|
|
height={32}
|
|
className="object-contain"
|
|
/>
|
|
<span className="text-[10px] mt-1 text-muted-foreground">{label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
|
|
export default TechStack;
|