From a8bb798d035e5dd961546d0335136d13399c9230 Mon Sep 17 00:00:00 2001 From: Oskar Kapala Date: Tue, 12 May 2026 19:10:59 +0200 Subject: [PATCH] Complete landing page implementation: all sections, responsive design, SEO Co-authored-by: Junie --- src/App.tsx | 30 ++++++++ src/components/About.tsx | 50 +++++++++++++ src/components/Audience.tsx | 34 +++++++++ src/components/CTASection.tsx | 75 ++++++++++++++++++++ src/components/Footer.tsx | 52 ++++++++++++++ src/components/Hero.tsx | 130 ++++++++++++++++++++++++++++++++++ src/components/Offerings.tsx | 57 +++++++++++++++ src/components/Process.tsx | 46 ++++++++++++ src/components/WhyHumanAI.tsx | 55 ++++++++++++++ src/main.tsx | 2 +- 10 files changed, 530 insertions(+), 1 deletion(-) create mode 100644 src/App.tsx create mode 100644 src/components/About.tsx create mode 100644 src/components/Audience.tsx create mode 100644 src/components/CTASection.tsx create mode 100644 src/components/Footer.tsx create mode 100644 src/components/Hero.tsx create mode 100644 src/components/Offerings.tsx create mode 100644 src/components/Process.tsx create mode 100644 src/components/WhyHumanAI.tsx diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..4ea3fb6 --- /dev/null +++ b/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 ( +
+
+
+ + + + + + + +
+
+
+ ); +} + +export default App; diff --git a/src/components/About.tsx b/src/components/About.tsx new file mode 100644 index 0000000..261f197 --- /dev/null +++ b/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 ( +
+
+
+ +

Czym jest humanAI?

+

+ 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. +

+ +
+ {points.map((point, index) => ( + + + {point} + + ))} +
+ +
+
+
+ ); +}; + +export default About; diff --git a/src/components/Audience.tsx b/src/components/Audience.tsx new file mode 100644 index 0000000..c3f3fb4 --- /dev/null +++ b/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 ( +
+
+
+

Dla kogo

+
+ +
+ {audience.map((item, index) => ( + + + {item} + + ))} +
+
+
+ ); +}; + +export default Audience; diff --git a/src/components/CTASection.tsx b/src/components/CTASection.tsx new file mode 100644 index 0000000..3cc4d03 --- /dev/null +++ b/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 ( +
+
+ +
+
+
+ +
+ +
+
+

+ Masz proces, który powinien już pracować sam? +

+

+ Opowiedz, co robisz ręcznie, powtarzalnie albo zbyt wolno. Sprawdzimy, czy AI może to uprościć. +

+
+ +

+ “Na start wystarczy jeden proces, jeden problem albo jeden pomysł.” +

+
+
+ +
e.preventDefault()}> +
+
+ + +
+
+ + +
+
+
+ + +
+ +
+
+
+
+
+ ); +}; + +export default CTASection; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..0fc3b52 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,52 @@ +import React from 'react'; + +const Footer = () => { + const currentYear = new Date().getFullYear(); + + return ( + + ); +}; + +export default Footer; diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx new file mode 100644 index 0000000..15eb3ef --- /dev/null +++ b/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 ( +
+ {/* Background elements */} +
+
+
+ +
+ +

+ Budujemy ludzką stronę AI +

+

+ Projektujemy i wdrażamy systemy AI, które pomagają ludziom pracować szybciej, mądrzej i spokojniej — od automatyzacji po multiagentowe platformy produktowe. +

+ + + + + {/* Abstract SVG Visualization */} +
+ + {/* Central Human Node */} + + + + + {/* 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 ( + + + + + + {/* Small outer nodes */} + + + ); + })} + + {/* Orbiting particles */} + + + + + + + + {/* Glass decoration */} +
+
+
+ +
+
+ ); +}; + +export default Hero; diff --git a/src/components/Offerings.tsx b/src/components/Offerings.tsx new file mode 100644 index 0000000..7208f7d --- /dev/null +++ b/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 ( + +
+ +
+

{offering.title}

+

+ {offering.description} +

+
    + {offering.points.map((point: string, i: number) => ( +
  • + + {point} +
    • + ))} +
+ + ); +}; + +const Offerings = () => { + return ( +
+
+
+

Nasza Oferta

+

+ Budujemy kompleksowe rozwiązania, które przekładają potencjał sztucznej inteligencji na realne wyniki biznesowe. +

+
+ +
+ {offerings.map((offering, index) => ( + + ))} +
+
+
+ ); +}; + +export default Offerings; diff --git a/src/components/Process.tsx b/src/components/Process.tsx new file mode 100644 index 0000000..b64dd6c --- /dev/null +++ b/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 ( +
+
+
+

Od pomysłu do działającego systemu

+
+ +
+ {/* Connector Line (Desktop) */} +
+ +
+ {processSteps.map((step, index) => { + const Icon = step.icon; + return ( + +
+ +
+
+ Krok {step.id} +

{step.title}

+
+ + ); + })} +
+
+
+
+ ); +}; + +export default Process; diff --git a/src/components/WhyHumanAI.tsx b/src/components/WhyHumanAI.tsx new file mode 100644 index 0000000..23ae49b --- /dev/null +++ b/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 ( +
+
+
+ + AI nie powinno być czarną skrzynką + + + 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. + +
+ +
+ {whyHumanAI.map((item, index) => { + const Icon = item.icon; + return ( + +
+ +
+

{item.title}

+ + ); + })} +
+
+
+ ); +}; + +export default WhyHumanAI; diff --git a/src/main.tsx b/src/main.tsx index 3d7150d..964aeb4 100644 --- a/src/main.tsx +++ b/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(