76 lines
3.3 KiB
TypeScript
76 lines
3.3 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { motion } from 'framer-motion';
|
||
|
|
import { Mail, MessageSquare } from 'lucide-react';
|
||
|
|
|
||
|
|
const CTASection = () => {
|
||
|
|
return (
|
||
|
|
<section id="contact" className="py-24 relative overflow-hidden">
|
||
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-px bg-gradient-to-r from-transparent via-primary/30 to-transparent" />
|
||
|
|
|
||
|
|
<div className="container mx-auto px-6">
|
||
|
|
<div className="max-w-5xl mx-auto glass-card p-12 relative overflow-hidden">
|
||
|
|
<div className="absolute top-0 right-0 p-12 opacity-10 pointer-events-none">
|
||
|
|
<MessageSquare size={200} className="text-primary" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid md:grid-cols-2 gap-12 relative z-10">
|
||
|
|
<div>
|
||
|
|
<h2 className="text-4xl font-bold mb-6">
|
||
|
|
Masz proces, który powinien już pracować sam?
|
||
|
|
</h2>
|
||
|
|
<p className="text-xl text-muted mb-8">
|
||
|
|
Opowiedz, co robisz ręcznie, powtarzalnie albo zbyt wolno. Sprawdzimy, czy AI może to uprościć.
|
||
|
|
</p>
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div className="flex items-center gap-3 text-primary">
|
||
|
|
<Mail size={20} />
|
||
|
|
<a href="mailto:hello@gethumanai.com" className="font-semibold hover:underline">
|
||
|
|
hello@gethumanai.com
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<p className="text-sm text-muted italic">
|
||
|
|
“Na start wystarczy jeden proces, jeden problem albo jeden pomysł.”
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
|
||
|
|
<div className="grid grid-cols-2 gap-4">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<label className="text-sm font-medium">Imię</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="Twoje imię"
|
||
|
|
className="w-full bg-background border border-white/10 rounded-lg px-4 py-3 focus:outline-none focus:border-primary/50 transition-colors"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-2">
|
||
|
|
<label className="text-sm font-medium">Email</label>
|
||
|
|
<input
|
||
|
|
type="email"
|
||
|
|
placeholder="email@firma.pl"
|
||
|
|
className="w-full bg-background border border-white/10 rounded-lg px-4 py-3 focus:outline-none focus:border-primary/50 transition-colors"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-2">
|
||
|
|
<label className="text-sm font-medium">W czym możemy pomóc?</label>
|
||
|
|
<textarea
|
||
|
|
rows={4}
|
||
|
|
placeholder="Opisz krótko swój proces lub wyzwanie..."
|
||
|
|
className="w-full bg-background border border-white/10 rounded-lg px-4 py-3 focus:outline-none focus:border-primary/50 transition-colors resize-none"
|
||
|
|
></textarea>
|
||
|
|
</div>
|
||
|
|
<button className="btn-primary w-full py-4 text-lg">
|
||
|
|
Umów rozmowę
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CTASection;
|