131 lines
5.3 KiB
TypeScript
131 lines
5.3 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { ArrowRight } from 'lucide-react';
|
|
|
|
const Hero = () => {
|
|
return (
|
|
<section className="relative min-h-screen flex items-center pt-20 overflow-hidden">
|
|
{/* Background elements */}
|
|
<div className="absolute top-1/4 -left-20 w-96 h-96 bg-primary/10 rounded-full glow-orb" />
|
|
<div className="absolute bottom-1/4 -right-20 w-96 h-96 bg-secondary/10 rounded-full glow-orb" />
|
|
<div className="absolute inset-0 bg-grid-pattern opacity-20 pointer-events-none" />
|
|
|
|
<div className="container mx-auto px-6 grid md:grid-cols-2 gap-12 items-center relative z-10">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<h1 className="text-5xl md:text-7xl font-extrabold leading-tight mb-6">
|
|
Budujemy <span className="text-gradient">ludzką stronę</span> AI
|
|
</h1>
|
|
<p className="text-lg md:text-xl text-muted mb-10 max-w-lg leading-relaxed">
|
|
Projektujemy i wdrażamy systemy AI, które pomagają ludziom pracować szybciej, mądrzej i spokojniej — od automatyzacji po multiagentowe platformy produktowe.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<a href="#contact" className="btn-primary">
|
|
Zacznijmy od audytu AI
|
|
<ArrowRight className="ml-2" size={20} />
|
|
</a>
|
|
<a href="#offerings" className="btn-secondary">
|
|
Zobacz ofertę
|
|
</a>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="relative flex justify-center"
|
|
>
|
|
{/* Abstract SVG Visualization */}
|
|
<div className="w-full max-w-lg aspect-square relative">
|
|
<svg viewBox="0 0 400 400" className="w-full h-full">
|
|
{/* Central Human Node */}
|
|
<motion.circle
|
|
cx="200"
|
|
cy="200"
|
|
r="40"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
className="text-primary"
|
|
animate={{ r: [38, 42, 38] }}
|
|
transition={{ duration: 4, repeat: Infinity }}
|
|
/>
|
|
<circle cx="200" cy="200" r="30" className="fill-primary/20" />
|
|
<circle cx="200" cy="200" r="8" className="fill-primary" />
|
|
|
|
{/* Agent Nodes & Connections */}
|
|
{[0, 60, 120, 180, 240, 300].map((angle, i) => {
|
|
const x = 200 + 120 * Math.cos((angle * Math.PI) / 180);
|
|
const y = 200 + 120 * Math.sin((angle * Math.PI) / 180);
|
|
|
|
return (
|
|
<g key={i}>
|
|
<motion.line
|
|
x1="200"
|
|
y1="200"
|
|
x2={x}
|
|
y2={y}
|
|
stroke="currentColor"
|
|
strokeWidth="1"
|
|
className="text-white/20"
|
|
initial={{ pathLength: 0 }}
|
|
animate={{ pathLength: 1 }}
|
|
transition={{ duration: 1, delay: 0.5 + i * 0.1 }}
|
|
/>
|
|
<motion.circle
|
|
cx={x}
|
|
cy={y}
|
|
r="12"
|
|
className="fill-surface stroke-white/20"
|
|
strokeWidth="1"
|
|
animate={{ y: [y - 5, y + 5, y - 5] }}
|
|
transition={{ duration: 3 + i, repeat: Infinity }}
|
|
/>
|
|
<motion.circle
|
|
cx={x}
|
|
cy={y}
|
|
r="4"
|
|
className="fill-secondary"
|
|
animate={{ opacity: [0.4, 1, 0.4] }}
|
|
transition={{ duration: 2 + i, repeat: Infinity }}
|
|
/>
|
|
|
|
{/* Small outer nodes */}
|
|
<circle
|
|
cx={x + 30 * Math.cos(angle)}
|
|
cy={y + 30 * Math.sin(angle)}
|
|
r="2"
|
|
className="fill-white/10"
|
|
/>
|
|
</g>
|
|
);
|
|
})}
|
|
|
|
{/* Orbiting particles */}
|
|
<motion.g
|
|
animate={{ rotate: 360 }}
|
|
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
|
|
style={{ originX: "200px", originY: "200px" }}
|
|
>
|
|
<circle cx="200" cy="50" r="3" className="fill-primary" />
|
|
<circle cx="350" cy="200" r="2" className="fill-secondary" />
|
|
<circle cx="200" cy="350" r="4" className="fill-accent" />
|
|
</motion.g>
|
|
</svg>
|
|
|
|
{/* Glass decoration */}
|
|
<div className="absolute inset-0 rounded-full border border-white/5 pointer-events-none" />
|
|
<div className="absolute inset-10 rounded-full border border-white/5 pointer-events-none" />
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|