Complete landing page implementation: all sections, responsive design, SEO

Co-authored-by: Junie <junie@jetbrains.com>

src/App.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Header from './components/Header';
+import Hero from './components/Hero';
+import About from './components/About';
+import Offerings from './components/Offerings';
+import WhyHumanAI from './components/WhyHumanAI';
+import Process from './components/Process';
+import Audience from './components/Audience';
+import CTASection from './components/CTASection';
+import Footer from './components/Footer';
+
+function App() {
+  return (
+    <div className="min-h-screen bg-background selection:bg-primary selection:text-background">
+      <Header />
+      <main>
+        <Hero />
+        <About />
+        <Offerings />
+        <WhyHumanAI />
+        <Process />
+        <Audience />
+        <CTASection />
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+export default App;

src/components/About.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { CheckCircle2 } from 'lucide-react';
+
+const About = () => {
+  const points = [
+    "Strategia bez hype’u",
+    "Automatyzacje, które da się utrzymać",
+    "Agenci pod kontrolą człowieka"
+  ];
+
+  return (
+    <section id="about" className="py-24 relative overflow-hidden">
+      <div className="container mx-auto px-6">
+        <div className="max-w-3xl mx-auto text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+          >
+            <h2 className="text-3xl md:text-4xl font-bold mb-8">Czym jest humanAI?</h2>
+            <p className="text-xl text-muted leading-relaxed mb-12">
+              humanAI łączy doradztwo, automatyzację, budowę produktów i własne środowisko agentowe. 
+              Pomagamy przejść od ciekawości wokół AI do działających procesów, narzędzi i systemów.
+            </p>
+            
+            <div className="grid md:grid-cols-3 gap-6">
+              {points.map((point, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 10 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.4, delay: index * 0.1 }}
+                  className="flex flex-col items-center p-6 glass-card border-primary/10"
+                >
+                  <CheckCircle2 className="text-primary mb-4" size={32} />
+                  <span className="font-medium text-lg leading-tight">{point}</span>
+                </motion.div>
+              ))}
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default About;

src/components/Audience.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { audience } from '../data/content';
+import { UserCheck } from 'lucide-react';
+
+const Audience = () => {
+  return (
+    <section className="py-24 relative overflow-hidden">
+      <div className="container mx-auto px-6">
+        <div className="mb-16 text-center">
+          <h2 className="text-3xl md:text-5xl font-bold mb-6">Dla kogo</h2>
+        </div>
+
+        <div className="flex flex-wrap justify-center gap-6">
+          {audience.map((item, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, scale: 0.9 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.4, delay: index * 0.05 }}
+              className="px-8 py-4 glass-card border-white/5 flex items-center gap-4 hover:border-primary/20 transition-all cursor-default"
+            >
+              <UserCheck size={20} className="text-primary" />
+              <span className="font-medium">{item}</span>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Audience;

src/components/CTASection.tsx

@@ -0,0 +1,75 @@
+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;

src/components/Footer.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+const Footer = () => {
+  const currentYear = new Date().getFullYear();
+  
+  return (
+    <footer className="py-12 border-t border-white/5 bg-background">
+      <div className="container mx-auto px-6">
+        <div className="grid md:grid-cols-4 gap-12 mb-12">
+          <div className="col-span-2">
+            <a href="#" className="text-2xl font-bold tracking-tight mb-4 block">
+              human<span className="text-primary">AI</span>
+            </a>
+            <p className="text-muted max-w-xs mb-6">
+              ludzka strona AI — budujemy praktyczne systemy AI dla ludzi i organizacji.
+            </p>
+            <a href="mailto:hello@gethumanai.com" className="text-foreground/80 hover:text-primary transition-colors">
+              hello@gethumanai.com
+            </a>
+          </div>
+
+          <div>
+            <h4 className="font-bold mb-6 text-sm uppercase tracking-wider">Nawigacja</h4>
+            <ul className="space-y-4">
+              <li><a href="#offerings" className="text-muted hover:text-foreground transition-colors">Oferta</a></li>
+              <li><a href="#process" className="text-muted hover:text-foreground transition-colors">Platforma</a></li>
+              <li><a href="#contact" className="text-muted hover:text-foreground transition-colors">Kontakt</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="font-bold mb-6 text-sm uppercase tracking-wider">Prywatność</h4>
+            <ul className="space-y-4">
+              <li><a href="#" className="text-muted hover:text-foreground transition-colors">Polityka prywatności</a></li>
+              <li><a href="#" className="text-muted hover:text-foreground transition-colors">Cookies</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted">
+          <p>© {currentYear} humanAI. Wszelkie prawa zastrzeżone.</p>
+          <div className="flex gap-8">
+            <span className="hover:text-foreground transition-colors cursor-pointer">LinkedIn</span>
+            <span className="hover:text-foreground transition-colors cursor-pointer">X / Twitter</span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/Hero.tsx

@@ -0,0 +1,130 @@
+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;

src/components/Offerings.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { offerings } from '../data/content';
+import { ChevronRight } from 'lucide-react';
+
+const OfferingCard = ({ offering, index }: { offering: any, index: number }) => {
+  const Icon = offering.icon;
+  
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.5, delay: index * 0.1 }}
+      className="glass-card p-8 group hover:border-primary/30 transition-all duration-500"
+    >
+      <div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform duration-500">
+        <Icon size={28} />
+      </div>
+      <h3 className="text-2xl font-bold mb-4">{offering.title}</h3>
+      <p className="text-muted mb-8 leading-relaxed">
+        {offering.description}
+      </p>
+      <ul className="space-y-3">
+        {offering.points.map((point: string, i: number) => (
+          <li key={i} className="flex items-center text-sm text-foreground/80">
+            <ChevronRight className="text-primary mr-2" size={16} />
+            {point}
+          </li>
+        ))}
+      </ul>
+    </motion.div>
+  );
+};
+
+const Offerings = () => {
+  return (
+    <section id="offerings" className="py-24 relative bg-surface/30">
+      <div className="container mx-auto px-6">
+        <div className="mb-16">
+          <h2 className="text-3xl md:text-5xl font-bold mb-6">Nasza Oferta</h2>
+          <p className="text-xl text-muted max-w-2xl">
+            Budujemy kompleksowe rozwiązania, które przekładają potencjał sztucznej inteligencji na realne wyniki biznesowe.
+          </p>
+        </div>
+        
+        <div className="grid md:grid-cols-2 gap-8">
+          {offerings.map((offering, index) => (
+            <OfferingCard key={offering.id} offering={offering} index={index} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Offerings;

src/components/Process.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { processSteps } from '../data/content';
+
+const Process = () => {
+  return (
+    <section id="process" className="py-24 relative bg-surface/50">
+      <div className="container mx-auto px-6">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl md:text-5xl font-bold mb-6">Od pomysłu do działającego systemu</h2>
+        </div>
+
+        <div className="relative">
+          {/* Connector Line (Desktop) */}
+          <div className="hidden lg:block absolute top-1/2 left-0 w-full h-0.5 bg-gradient-to-r from-primary/20 via-primary/50 to-primary/20 -translate-y-1/2" />
+          
+          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 relative z-10">
+            {processSteps.map((step, index) => {
+              const Icon = step.icon;
+              return (
+                <motion.div
+                  key={step.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                  className="flex flex-col items-center"
+                >
+                  <div className="w-16 h-16 rounded-full bg-background border-2 border-primary flex items-center justify-center text-primary mb-6 shadow-[0_0_20px_rgba(0,209,255,0.2)]">
+                    <Icon size={28} />
+                  </div>
+                  <div className="text-center">
+                    <span className="text-xs font-bold text-primary uppercase tracking-wider mb-2 block">Krok {step.id}</span>
+                    <h3 className="text-xl font-bold">{step.title}</h3>
+                  </div>
+                </motion.div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Process;

src/components/WhyHumanAI.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { whyHumanAI } from '../data/content';
+
+const WhyHumanAI = () => {
+  return (
+    <section className="py-24 relative overflow-hidden">
+      <div className="container mx-auto px-6">
+        <div className="max-w-4xl mx-auto text-center mb-20">
+          <motion.h2 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            className="text-3xl md:text-5xl font-bold mb-8"
+          >
+            AI nie powinno być czarną skrzynką
+          </motion.h2>
+          <motion.p 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.1 }}
+            className="text-xl text-muted leading-relaxed"
+          >
+            Najlepsze wdrożenia AI są zrozumiałe, mierzalne i bezpieczne. Dlatego projektujemy systemy, 
+            które pokazują swoje działanie, zostawiają ślad decyzyjny i pozwalają człowiekowi zatwierdzać ważne kroki.
+          </motion.p>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {whyHumanAI.map((item, index) => {
+            const Icon = item.icon;
+            return (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, scale: 0.9 }}
+                whileInView={{ opacity: 1, scale: 1 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.4, delay: index * 0.1 }}
+                className="p-8 glass-card border-white/5 flex flex-col items-center text-center group hover:bg-white/5 transition-colors"
+              >
+                <div className="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center text-secondary mb-6 group-hover:bg-secondary/20 transition-colors">
+                  <Icon size={24} />
+                </div>
+                <h3 className="font-semibold text-lg">{item.title}</h3>
+              </motion.div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default WhyHumanAI;

src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import App from './App'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(