From 64e2965d1c9213bee25de3f199bc916409742f57 Mon Sep 17 00:00:00 2001
From: richardtekula <barspin4499@gmail.com>
Date: Mon, 10 Nov 2025 13:05:33 +0100
Subject: [PATCH] improve styles

---
 src/App.css                      | 500 +++++++++++++++++++++++++++++--
 src/App.jsx                      |  35 ++-
 src/components/NavigationBar.jsx |  14 +-
 src/index.css                    |   8 +-
 src/sections/About.jsx           |  89 +++++-
 src/sections/Contact.jsx         |  99 ++++--
 src/sections/Footer.jsx          |  15 +-
 src/sections/Hero.css            | 254 +++++++++++++++-
 src/sections/Hero.jsx            | 117 +++++++-
 src/sections/Services.jsx        | 118 ++++++--
 10 files changed, 1138 insertions(+), 111 deletions(-)

diff --git a/src/App.css b/src/App.css
index b9d355d..35c8d83 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,42 +1,482 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  width: 100%;
+  min-height: 100vh;
+  background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.2), transparent 50%),
+    radial-gradient(circle at 90% 10%, rgba(14, 165, 233, 0.2), transparent 45%),
+    #020617;
+  color: var(--white);
+}
+
+.app-shell {
+  position: relative;
+  min-height: 100vh;
+  overflow: hidden;
+  background: linear-gradient(140deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.9));
+}
+
+.app-shell::after {
+  content: '';
+  position: fixed;
+  inset: 10% auto auto 60%;
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, rgba(14, 165, 233, 0.25), transparent 70%);
+  filter: blur(80px);
+  z-index: -1;
+}
+
+main {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: clamp(4rem, 8vw, 7rem);
+}
+
+.section {
+  position: relative;
+  padding: clamp(4rem, 8vw, 7rem) 0;
+  isolation: isolate;
+}
+
+.section::after {
+  content: '';
+  position: absolute;
+  inset: 1rem;
+  border-radius: 32px;
+  background: radial-gradient(circle at top, rgba(99, 102, 241, 0.08), transparent 55%);
+  z-index: -2;
+  pointer-events: none;
+}
+
+.section-heading {
   text-align: center;
+  max-width: 760px;
+  margin: 0 auto 3.5rem;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.2rem;
+  font-size: 0.75rem;
+  color: var(--primary-light);
+  background: rgba(99, 102, 241, 0.1);
+  padding: 0.35rem 0.9rem;
+  border-radius: 999px;
+  margin-bottom: 1.2rem;
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
+.section-heading p {
+  color: rgba(226, 232, 240, 0.8);
+  font-size: 1.1rem;
+}
+
+.pill, .pill-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  border-radius: 999px;
+  padding: 0.35rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(226, 232, 240, 0.9);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.pill-chip svg {
+  width: 0.9rem;
+  height: 0.9rem;
+  color: var(--accent-color);
+}
+
+.gradient-divider {
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  margin: 3rem 0 2rem;
+}
+
+.glass-panel {
+  border-radius: 24px;
+  padding: 2rem;
+  background: rgba(15, 23, 42, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 20px 80px rgba(15, 23, 42, 0.45);
+  backdrop-filter: blur(16px);
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+.stat-card {
+  padding: 1.35rem;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.stat-card strong {
+  display: block;
+  font-size: 1.8rem;
+  color: var(--white);
+}
+
+.stat-card span {
+  color: rgba(226, 232, 240, 0.7);
+  font-size: 0.95rem;
+}
+
+.mega-nav {
+  background: rgba(2, 6, 23, 0.65) !important;
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 0.65rem 0;
+}
+
+.mega-nav .navbar-brand {
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: lowercase;
+  color: var(--white);
+}
+
+.mega-nav .navbar-brand span {
+  color: var(--secondary-color);
+}
+
+.mega-nav .nav-link {
+  color: rgba(226, 232, 240, 0.75) !important;
+  margin-left: 1rem;
+  position: relative;
+  font-weight: 500;
+}
+
+.mega-nav .nav-link::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -6px;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--secondary-color), var(--primary-light));
+  transition: width 0.3s ease;
+}
+
+.mega-nav .nav-link:hover::after,
+.mega-nav .nav-link:focus::after {
+  width: 100%;
+}
+
+.nav-cta {
+  margin-left: 1.5rem;
+  border-radius: 999px;
+  background: linear-gradient(120deg, var(--secondary-color), var(--primary-color));
+  border: none;
+  color: #fff !important;
+  font-weight: 600;
+  padding: 0.45rem 1.2rem;
+  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.35);
+}
+
+.about-image {
+  position: relative;
+  border-radius: 28px;
+  overflow: hidden;
+  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.6);
+}
+
+.about-image img {
+  width: 100%;
+  display: block;
+}
+
+.image-note {
+  position: absolute;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  width: min(280px, 70%);
+  font-size: 0.9rem;
+}
+
+.image-note strong {
+  font-size: 1.3rem;
+  display: block;
+  margin: 0.25rem 0;
+}
+
+.about-panel {
+  position: relative;
+}
+
+.about-panel p {
+  color: rgba(226, 232, 240, 0.85);
+}
+
+.pill-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1rem;
+  margin: 1.5rem 0;
+}
+
+.pillar-card {
+  padding: 1rem;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(15, 23, 42, 0.55);
+  display: flex;
+  gap: 0.85rem;
+  align-items: flex-start;
+}
+
+.pillar-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 14px;
+  background: rgba(99, 102, 241, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--primary-light);
+}
+
+.pillar-card h4 {
+  margin-bottom: 0.25rem;
+  font-size: 1rem;
+  color: var(--white);
+}
+
+.pillar-card p {
+  margin: 0;
+  font-size: 0.9rem;
+}
+
+.journey-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.journey-step {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.journey-step span {
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: rgba(226, 232, 240, 0.6);
+  min-width: 70px;
+}
+
+.journey-step strong {
+  color: var(--white);
+}
+
+.journey-step p {
+  margin: 0.15rem 0 0;
+}
+
+.services-section {
+  background: rgba(8, 15, 35, 0.7);
+}
+
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  gap: 1.5rem;
+}
+
+.service-card {
+  padding: 1.5rem;
+  border-radius: 22px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(15, 23, 42, 0.6);
+  transition: transform 0.45s ease, border-color 0.45s ease;
+  min-height: 240px;
+}
+
+.service-card:hover {
+  transform: translateY(-6px);
+  border-color: rgba(99, 102, 241, 0.4);
+}
+
+.service-card svg {
+  color: var(--secondary-color);
+  font-size: 1.8rem;
+  margin-bottom: 1rem;
+}
+
+.service-card h3 {
+  color: var(--white);
+  margin-bottom: 0.5rem;
+}
+
+.service-card p {
+  margin-bottom: 0;
+}
+
+.service-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.service-tags .pill {
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.workflow-card {
+  margin-top: 3rem;
+  padding: 2rem;
+  border-radius: 28px;
+  background: linear-gradient(120deg, rgba(99, 102, 241, 0.25), rgba(14, 165, 233, 0.2));
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.workflow-steps {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.workflow-step {
+  padding: 1rem;
+  border-radius: 18px;
+  background: rgba(2, 6, 23, 0.45);
+}
+
+.contact-section {
+  background: rgba(2, 6, 23, 0.9);
+}
+
+.contact-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.contact-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.contact-list li {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  color: rgba(226, 232, 240, 0.8);
+}
+
+.contact-list svg {
+  color: var(--secondary-color);
+}
+
+.contact-form {
+  padding: 2rem;
+  border-radius: 24px;
+  background: rgba(15, 23, 42, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.contact-form .form-control {
+  background: rgba(15, 23, 42, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: var(--white);
+}
+
+.contact-form .form-control:focus {
+  border-color: var(--primary-light);
+  box-shadow: none;
+}
+
+.contact-form .form-label {
+  color: rgba(226, 232, 240, 0.85);
+  font-weight: 500;
+}
+
+.social-row {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.social-row a {
+  width: 42px;
+  height: 42px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(226, 232, 240, 0.85);
+}
+
+.social-row a:hover {
+  color: var(--secondary-color);
+  border-color: var(--secondary-color);
+}
+
+.contact-form button {
+  border-radius: 999px;
+  padding: 0.85rem 1.8rem;
+  font-weight: 600;
+  background: linear-gradient(120deg, var(--secondary-color), var(--primary-color));
+  border: none;
+}
+
+footer {
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(2, 6, 23, 0.95);
+}
+
+.footer-brand {
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: lowercase;
+  color: #fff;
+}
+
+.footer-meta {
+  color: rgba(226, 232, 240, 0.6);
+  font-size: 0.9rem;
+}
+
+.delay-0 { transition-delay: 0s; }
+.delay-1 { transition-delay: 0.1s; }
+.delay-2 { transition-delay: 0.2s; }
+.delay-3 { transition-delay: 0.3s; }
+.delay-4 { transition-delay: 0.4s; }
+.delay-5 { transition-delay: 0.5s; }
+
+@media (max-width: 992px) {
+  .mega-nav .nav-link {
+    margin-left: 0;
+    margin-bottom: 0.7rem;
   }
-  to {
-    transform: rotate(360deg);
+
+  main {
+    gap: 3rem;
   }
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
+@media (max-width: 576px) {
+  .glass-panel,
+  .stat-card {
+    padding: 1.25rem;
   }
 }
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/src/App.jsx b/src/App.jsx
index 24e5ef7..732acdc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,19 +1,44 @@
+import { useEffect } from 'react';
 import NavigationBar from './components/NavigationBar';
 import Hero from './sections/Hero';
 import About from './sections/About';
 import Services from './sections/Services';
 import Contact from './sections/Contact';
 import Footer from './sections/Footer';
+import './App.css';
 import './sections/Hero.css';
 
 function App() {
+  useEffect(() => {
+    const revealElements = document.querySelectorAll('.reveal');
+    if (!('IntersectionObserver' in window) || !revealElements.length) return undefined;
+
+    const observer = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('active');
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.2 }
+    );
+
+    revealElements.forEach(element => observer.observe(element));
+
+    return () => observer.disconnect();
+  }, []);
+
   return (
-    <div>
+    <div className="app-shell">
       <NavigationBar />
-      <Hero />
-      <About />
-      <Services />
-      <Contact />
+      <main>
+        <Hero />
+        <About />
+        <Services />
+        <Contact />
+      </main>
       <Footer />
     </div>
   );
diff --git a/src/components/NavigationBar.jsx b/src/components/NavigationBar.jsx
index b751558..c5cdcb2 100644
--- a/src/components/NavigationBar.jsx
+++ b/src/components/NavigationBar.jsx
@@ -1,17 +1,23 @@
 import React from 'react';
-import { Navbar, Nav, Container } from 'react-bootstrap';
+import { Navbar, Nav, Container, Button } from 'react-bootstrap';
 
 const NavigationBar = () => {
   return (
-    <Navbar bg="dark" variant="dark" expand="lg" sticky="top">
+    <Navbar className="mega-nav" expand="lg" sticky="top" variant="dark">
       <Container>
-        <Navbar.Brand href="#home">slovensko.ai</Navbar.Brand>
+        <Navbar.Brand href="#home">
+          slovensko<span>.ai</span>
+        </Navbar.Brand>
         <Navbar.Toggle aria-controls="basic-navbar-nav" />
         <Navbar.Collapse id="basic-navbar-nav">
-          <Nav className="ms-auto">
+          <Nav className="ms-auto align-items-lg-center">
+            <Nav.Link href="#home">Home</Nav.Link>
             <Nav.Link href="#about">About</Nav.Link>
             <Nav.Link href="#services">Services</Nav.Link>
             <Nav.Link href="#contact">Contact</Nav.Link>
+            <Button className="nav-cta" size="sm" href="#contact">
+              Book a call
+            </Button>
           </Nav>
         </Navbar.Collapse>
       </Container>
diff --git a/src/index.css b/src/index.css
index b24376d..9ddaef2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -32,8 +32,8 @@ body {
   min-width: 320px;
   min-height: 100vh;
   overflow-x: hidden;
-  background: var(--white);
-  color: var(--text-dark);
+  background: var(--dark-bg);
+  color: rgba(226, 232, 240, 0.9);
 }
 
 a {
@@ -63,7 +63,7 @@ h1 {
 
 h2 {
   font-size: clamp(2rem, 4vw, 3rem);
-  color: var(--text-dark);
+  color: var(--white);
 }
 
 h3 {
@@ -72,7 +72,7 @@ h3 {
 
 p {
   line-height: 1.8;
-  color: var(--text-light);
+  color: rgba(226, 232, 240, 0.75);
 }
 
 /* Smooth scroll animations */
diff --git a/src/sections/About.jsx b/src/sections/About.jsx
index 10bf517..1ae4e45 100644
--- a/src/sections/About.jsx
+++ b/src/sections/About.jsx
@@ -1,22 +1,87 @@
 import React from 'react';
 import { Container, Row, Col, Image } from 'react-bootstrap';
+import { PatchCheckFill, LightningCharge, ShieldLock } from 'react-bootstrap-icons';
+import aboutImage from '../assets/images/about.jpg';
+
+const pillars = [
+  {
+    Icon: PatchCheckFill,
+    title: 'Audit-ready delivery',
+    copy: 'Full documentation, model cards, and compliance notes built in from day one.',
+  },
+  {
+    Icon: LightningCharge,
+    title: 'Deployment in weeks',
+    copy: 'Modular accelerators compress build time so you see value before the quarter ends.',
+  },
+  {
+    Icon: ShieldLock,
+    title: 'Sovereign & secure',
+    copy: 'Data residency guaranteed with hardened MLOps pipelines tuned for EU regulations.',
+  },
+];
+
+const journey = [
+  { phase: 'Week 0', title: 'Opportunity sprint', copy: 'Map the highest leverage use-cases and success metrics.' },
+  { phase: 'Week 2', title: 'Prototype loops', copy: 'Tight design-partner loops deliver usable copilots fast.' },
+  { phase: 'Week 6', title: 'Production launch', copy: 'Secure rollout playbooks and on-call monitoring built together.' },
+];
 
 const About = () => {
   return (
-    <section id="about" className="py-5">
+    <section id="about" className="section about-section">
       <Container>
-        <Row className="align-items-center">
-          <Col md={6}>
-            <h2>About Us</h2>
-            <p>
-              slovensko.ai is a leading provider of AI-powered solutions. We specialize in developing custom AI models and integrating them into your business processes to drive growth and efficiency.
-            </p>
-            <p>
-              Our team of experts is dedicated to helping you unlock the full potential of artificial intelligence.
-            </p>
+        <div className="section-heading reveal delay-0">
+          <span className="eyebrow">Why slovensko.ai</span>
+          <h2>Applied AI teams with a public-mission heartbeat.</h2>
+          <p>
+            We fuse national infrastructure knowledge with global-scale product thinking. The result: AI initiatives that
+            stay ethical, measurable, and genuinely useful for the people they serve.
+          </p>
+        </div>
+        <Row className="g-4 align-items-center">
+          <Col lg={6}>
+            <div className="about-image reveal delay-1">
+              <Image src={aboutImage} alt="Team building AI solutions" fluid rounded />
+              <div className="image-note glass-panel">
+                <p>Impact dashboard</p>
+                <strong>96% program success rate</strong>
+                <small>Measured across public + private deployments</small>
+              </div>
+            </div>
           </Col>
-          <Col md={6}>
-            <Image src="src/assets/images/about.jpg" rounded fluid />
+          <Col lg={6}>
+            <div className="about-panel glass-panel reveal delay-2">
+              <p>
+                Every engagement pairs strategy leads, data scientists, and civic designers. We nurture common language,
+                co-create with your stakeholders, and keep adoption friction low with embedded AI Change Coaches.
+              </p>
+              <div className="pill-grid">
+                {pillars.map(({ Icon, title, copy }) => (
+                  <article key={title} className="pillar-card">
+                    <div className="pillar-icon">
+                      <Icon size={18} />
+                    </div>
+                    <div>
+                      <h4>{title}</h4>
+                      <p>{copy}</p>
+                    </div>
+                  </article>
+                ))}
+              </div>
+              <div className="gradient-divider" />
+              <div className="journey-list">
+                {journey.map(step => (
+                  <div key={step.phase} className="journey-step">
+                    <span>{step.phase}</span>
+                    <div>
+                      <strong>{step.title}</strong>
+                      <p>{step.copy}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
           </Col>
         </Row>
       </Container>
diff --git a/src/sections/Contact.jsx b/src/sections/Contact.jsx
index 28dbf1a..f216853 100644
--- a/src/sections/Contact.jsx
+++ b/src/sections/Contact.jsx
@@ -1,31 +1,88 @@
 import React from 'react';
 import { Container, Row, Col, Form, Button } from 'react-bootstrap';
+import { Envelope, Telephone, GeoAlt, Linkedin, Discord, Github } from 'react-bootstrap-icons';
+
+const contactInfo = [
+  { Icon: Telephone, label: 'Call us', value: '+421 911 000 123' },
+  { Icon: Envelope, label: 'Email', value: 'impact@slovensko.ai' },
+  { Icon: GeoAlt, label: 'Studios', value: 'Bratislava & Košice' },
+];
+
+const socials = [
+  { Icon: Linkedin, href: '#', label: 'LinkedIn' },
+  { Icon: Discord, href: '#', label: 'Discord' },
+  { Icon: Github, href: '#', label: 'GitHub' },
+];
 
 const Contact = () => {
   return (
-    <section id="contact" className="py-5">
+    <section id="contact" className="section contact-section">
       <Container>
-        <h2 className="text-center mb-5">Contact Us</h2>
-        <Row>
-          <Col md={{ span: 6, offset: 3 }}>
-            <Form>
-              <Form.Group className="mb-3" controlId="formBasicName">
-                <Form.Label>Name</Form.Label>
-                <Form.Control type="text" placeholder="Enter your name" />
+        <Row className="g-4 align-items-stretch">
+          <Col lg={5}>
+            <div className="glass-panel contact-card reveal delay-0">
+              <span className="eyebrow">Partner with us</span>
+              <h2>Let's build meaningful AI for Slovakia.</h2>
+              <p>
+                Tell us where AI should move the needle—the more context the better. We respond within 48 hours with a
+                tailored sprint plan.
+              </p>
+              <ul className="contact-list">
+                {contactInfo.map(({ Icon, label, value }) => (
+                  <li key={label}>
+                    <Icon />
+                    <div>
+                      <strong>{label}</strong>
+                      <p className="mb-0">{value}</p>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+              <div className="social-row">
+                {socials.map(({ Icon, href, label }) => (
+                  <a key={label} href={href} aria-label={label}>
+                    <Icon />
+                  </a>
+                ))}
+              </div>
+            </div>
+          </Col>
+          <Col lg={7}>
+            <Form className="contact-form reveal delay-1">
+              <Row className="g-3">
+                <Col md={6}>
+                  <Form.Group controlId="contactName">
+                    <Form.Label>Full name</Form.Label>
+                    <Form.Control type="text" placeholder="Jana Novak" />
+                  </Form.Group>
+                </Col>
+                <Col md={6}>
+                  <Form.Group controlId="contactCompany">
+                    <Form.Label>Organisation</Form.Label>
+                    <Form.Control type="text" placeholder="Ministry / Startup / Enterprise" />
+                  </Form.Group>
+                </Col>
+              </Row>
+              <Row className="g-3 mt-1">
+                <Col md={6}>
+                  <Form.Group controlId="contactEmail">
+                    <Form.Label>Email</Form.Label>
+                    <Form.Control type="email" placeholder="you@example.com" />
+                  </Form.Group>
+                </Col>
+                <Col md={6}>
+                  <Form.Group controlId="contactPhone">
+                    <Form.Label>Phone</Form.Label>
+                    <Form.Control type="tel" placeholder="+421..." />
+                  </Form.Group>
+                </Col>
+              </Row>
+              <Form.Group controlId="contactIntent" className="mt-3">
+                <Form.Label>What should we explore together?</Form.Label>
+                <Form.Control as="textarea" rows={4} placeholder="Describe the ambition, datasets, or challenge" />
               </Form.Group>
-
-              <Form.Group className="mb-3" controlId="formBasicEmail">
-                <Form.Label>Email address</Form.Label>
-                <Form.Control type="email" placeholder="Enter email" />
-              </Form.Group>
-
-              <Form.Group className="mb-3" controlId="formBasicMessage">
-                <Form.Label>Message</Form.Label>
-                <Form.Control as="textarea" rows={3} placeholder="Your message" />
-              </Form.Group>
-
-              <Button variant="primary" type="submit">
-                Submit
+              <Button type="submit" className="mt-4">
+                Send proposal request
               </Button>
             </Form>
           </Col>
diff --git a/src/sections/Footer.jsx b/src/sections/Footer.jsx
index 1d37778..3edafc6 100644
--- a/src/sections/Footer.jsx
+++ b/src/sections/Footer.jsx
@@ -3,11 +3,18 @@ import { Container, Row, Col } from 'react-bootstrap';
 
 const Footer = () => {
   return (
-    <footer className="bg-dark text-white py-4">
+    <footer className="py-5">
       <Container>
-        <Row>
-          <Col className="text-center">
-            <p>&copy; {new Date().getFullYear()} slovensko.ai. All Rights Reserved.</p>
+        <Row className="gy-4 align-items-center">
+          <Col md={6}>
+            <div className="footer-brand">slovensko.ai</div>
+            <p className="footer-meta">
+              Building responsible, high-impact AI products with the teams shaping Slovakia's next decade.
+            </p>
+          </Col>
+          <Col md={6} className="text-md-end">
+            <p className="footer-meta mb-1">© {new Date().getFullYear()} slovensko.ai</p>
+            <p className="footer-meta">Bratislava · Košice · Remote Europe</p>
           </Col>
         </Row>
       </Container>
diff --git a/src/sections/Hero.css b/src/sections/Hero.css
index 3908940..3fab38f 100644
--- a/src/sections/Hero.css
+++ b/src/sections/Hero.css
@@ -1,8 +1,256 @@
 .hero-section {
-  background-size: cover;
-  background-position: center;
-  height: 100vh;
+  padding-top: clamp(6rem, 8vw, 8rem);
+  overflow: hidden;
+}
+
+.hero-backdrop {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 20% 20%, rgba(236, 72, 153, 0.18), transparent 55%),
+    radial-gradient(circle at 80% 0%, rgba(59, 130, 246, 0.25), transparent 50%);
+  filter: blur(60px);
+  z-index: -1;
+}
+
+.hero-content {
+  color: #fff;
+}
+
+.hero-title {
+  font-size: clamp(2.8rem, 5vw, 4.5rem);
+  line-height: 1.1;
+  margin-bottom: 1.5rem;
+}
+
+.hero-subtitle {
+  font-size: 1.15rem;
+  color: rgba(226, 232, 240, 0.85);
+  margin-bottom: 1.5rem;
+}
+
+.hero-capabilities {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 2rem;
+}
+
+.hero-cta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+}
+
+.cta-primary {
+  border-radius: 999px;
+  padding: 0.85rem 1.8rem;
+  border: none;
+  font-weight: 600;
+  background: linear-gradient(110deg, var(--secondary-color), var(--primary-light));
+  box-shadow: 0 20px 45px rgba(99, 102, 241, 0.35);
+}
+
+.cta-secondary {
+  color: rgba(226, 232, 240, 0.8) !important;
+  text-decoration: none;
+  font-weight: 600;
+  padding: 0;
+}
+
+.hero-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 1rem;
+  margin-top: 2.5rem;
+}
+
+.hero-stats .stat-card {
+  background: rgba(15, 23, 42, 0.7);
+  border: 1px solid rgba(99, 102, 241, 0.2);
+}
+
+.hero-visual-col {
+  position: relative;
+}
+
+.hero-visual {
+  position: relative;
+  padding: 2rem;
+}
+
+.hero-visual .glass-panel {
+  background: rgba(15, 23, 42, 0.85);
+}
+
+.visual-card {
+  border-radius: 28px;
+  position: relative;
+  overflow: hidden;
+}
+
+.visual-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.visual-label {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.75rem;
+  color: rgba(226, 232, 240, 0.6);
+  margin-bottom: 0.25rem;
+}
+
+.status-chip {
+  padding: 0.25rem 0.75rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  color: #0c111d;
+  font-weight: 600;
+  background: linear-gradient(120deg, #34d399, #a7f3d0);
+}
+
+.visual-score {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.visual-score strong {
+  font-size: 3rem;
+  color: var(--white);
+}
+
+.visual-score small {
+  color: rgba(226, 232, 240, 0.6);
+}
+
+.visual-stream {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  align-items: end;
+  gap: 0.75rem;
+  height: 140px;
+  margin-bottom: 1.5rem;
+}
+
+.stream-bar {
+  width: 100%;
+  background: rgba(226, 232, 240, 0.08);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.stream-bar span {
+  display: block;
+  width: 100%;
+  background: linear-gradient(180deg, var(--primary-light), var(--secondary-color));
+  border-radius: 999px;
+  transition: height 0.6s ease;
+}
+
+.visual-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  font-size: 0.9rem;
+  color: rgba(226, 232, 240, 0.8);
+}
+
+.visual-metrics h4 {
+  color: var(--white);
+  margin: 0.35rem 0 0;
+}
+
+.floating-card,
+.rating-card {
+  position: absolute;
+  border-radius: 18px;
+  padding: 1.2rem 1.4rem;
+  width: max-content;
+  color: #fff;
+  min-width: 220px;
+}
+
+.floating-card {
+  top: 15%;
+  right: 2rem;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  animation: float 6s ease-in-out infinite;
+}
+
+.floating-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 16px;
+  background: rgba(99, 102, 241, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
+  color: var(--primary-light);
+  font-size: 1.25rem;
+}
+
+.rating-card {
+  bottom: 5%;
+  left: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  animation: float 7s ease-in-out infinite reverse;
+}
+
+.rating-card svg {
+  color: var(--secondary-color);
+  font-size: 1.5rem;
+}
+
+.rating-card strong {
+  color: var(--white);
+  font-size: 0.95rem;
+}
+
+.hero-gradient-orb {
+  position: absolute;
+  width: 240px;
+  height: 240px;
+  background: radial-gradient(circle, rgba(99, 102, 241, 0.5), transparent 60%);
+  bottom: -40px;
+  right: 10%;
+  filter: blur(8px);
+  z-index: -1;
+}
+
+@media (max-width: 992px) {
+  .hero-section {
+    padding-top: 7rem;
+  }
+
+  .floating-card,
+  .rating-card {
+    position: relative;
+    margin-top: 1.5rem;
+    inset: auto;
+  }
+
+  .hero-visual {
+    padding: 0;
+  }
+}
+
+@media (max-width: 576px) {
+  .visual-metrics {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .hero-cta {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }
diff --git a/src/sections/Hero.jsx b/src/sections/Hero.jsx
index 9f23aff..5131548 100644
--- a/src/sections/Hero.jsx
+++ b/src/sections/Hero.jsx
@@ -1,16 +1,119 @@
 import React from 'react';
-import { Container, Button } from 'react-bootstrap';
+import { Container, Row, Col, Button } from 'react-bootstrap';
+import { ArrowRight, PlayCircle, ShieldCheck, Activity, Stars } from 'react-bootstrap-icons';
 import './Hero.css';
 
+const stats = [
+  { value: '120+', label: 'AI systems launched' },
+  { value: '47M', label: 'Data signals orchestrated' },
+  { value: '2.5x', label: 'Average ROI uplift' },
+];
+
+const capabilities = ['Responsible AI', 'Predictive ops', 'Edge-ready', 'Realtime control'];
+
 const Hero = () => {
   return (
-    <div className="hero-section" style={{ backgroundImage: `url(src/assets/images/hero.jpg)` }}>
-      <Container className="text-center text-white">
-        <h1>Welcome to slovensko.ai</h1>
-        <p className="lead">Your partner in Artificial Intelligence solutions.</p>
-        <Button variant="primary" size="lg">Get Started</Button>
+    <section id="home" className="hero-section section">
+      <div className="hero-backdrop" />
+      <Container>
+        <Row className="align-items-center">
+          <Col lg={6} className="hero-content">
+            <div className="eyebrow reveal delay-0">
+              <ShieldCheck size={16} />
+              Trusted AI foundry
+            </div>
+            <h1 className="hero-title reveal delay-1">
+              Design, deploy, and scale sovereign AI products for Slovakia.
+            </h1>
+            <p className="hero-subtitle reveal delay-2">
+              slovensko.ai helps public institutions and ambitious teams turn complex datasets into
+              measurable intelligence—fast, secure, and regulation-ready.
+            </p>
+            <div className="hero-capabilities reveal delay-2">
+              {capabilities.map(capability => (
+                <span key={capability} className="pill-chip">
+                  {capability}
+                </span>
+              ))}
+            </div>
+            <div className="hero-cta reveal delay-3">
+              <Button size="lg" className="cta-primary">
+                Launch a project
+                <ArrowRight size={18} className="ms-2" />
+              </Button>
+              <Button variant="link" size="lg" className="cta-secondary">
+                <PlayCircle size={24} className="me-2" />
+                Watch platform tour
+              </Button>
+            </div>
+            <div className="hero-stats reveal delay-4">
+              {stats.map(stat => (
+                <div key={stat.label} className="stat-card">
+                  <strong>{stat.value}</strong>
+                  <span>{stat.label}</span>
+                </div>
+              ))}
+            </div>
+          </Col>
+          <Col lg={6} className="hero-visual-col">
+            <div className="hero-visual reveal delay-3">
+              <div className="visual-card glass-panel">
+                <div className="visual-header">
+                  <div>
+                    <p className="visual-label">Realtime AI cockpit</p>
+                    <h3>Autonomy score</h3>
+                  </div>
+                  <span className="status-chip">Live</span>
+                </div>
+                <div className="visual-score">
+                  <strong>92%</strong>
+                  <small>+6% vs last sprint</small>
+                </div>
+                <div className="visual-stream">
+                  {[68, 74, 80, 87, 92].map(point => (
+                    <div key={point} className="stream-bar">
+                      <span style={{ height: `${point}%` }} />
+                    </div>
+                  ))}
+                </div>
+                <div className="visual-metrics">
+                  <div>
+                    <p>Latency</p>
+                    <h4>42&nbsp;ms</h4>
+                  </div>
+                  <div>
+                    <p>Confidence</p>
+                    <h4>99.1%</h4>
+                  </div>
+                  <div>
+                    <p>Coverage</p>
+                    <h4>18 regions</h4>
+                  </div>
+                </div>
+              </div>
+              <div className="floating-card glass-panel">
+                <div className="floating-icon">
+                  <Activity />
+                </div>
+                <div>
+                  <p>Signals streaming</p>
+                  <h4>14.2k / min</h4>
+                  <small>Autonomous monitoring stabilised</small>
+                </div>
+              </div>
+              <div className="rating-card glass-panel">
+                <Stars />
+                <div>
+                  <p>Impact rating</p>
+                  <strong>AAA ethical compliance</strong>
+                </div>
+              </div>
+              <div className="hero-gradient-orb" />
+            </div>
+          </Col>
+        </Row>
       </Container>
-    </div>
+    </section>
   );
 };
 
diff --git a/src/sections/Services.jsx b/src/sections/Services.jsx
index 4d5e6bb..dc53ee1 100644
--- a/src/sections/Services.jsx
+++ b/src/sections/Services.jsx
@@ -1,29 +1,105 @@
 import React from 'react';
-import { Container, Row, Col } from 'react-bootstrap';
-import { BarChart, CodeSlash, GraphUp } from 'react-bootstrap-icons';
+import { Container } from 'react-bootstrap';
+import {
+  LightningCharge,
+  Cpu,
+  GraphUpArrow,
+  Globe2,
+  ChatDots,
+  ShieldCheck,
+} from 'react-bootstrap-icons';
+
+const services = [
+  {
+    Icon: GraphUpArrow,
+    title: 'AI Strategy Sprints',
+    copy: 'Opportunity mapping, ROI heatmaps, and data-readiness scoring delivered in two weeks.',
+    tags: ['Executive workshop', 'Capability roadmaps', 'KPI architecture'],
+  },
+  {
+    Icon: Cpu,
+    title: 'Model Foundry',
+    copy: 'Custom copilots, LLM fine-tuning, and ML systems optimised for Slovak context + datasets.',
+    tags: ['Domain-tuned LLMs', 'Multilingual interfaces', 'Safety guardrails'],
+  },
+  {
+    Icon: LightningCharge,
+    title: 'Deployment Pods',
+    copy: 'Cross-functional squads that integrate AI into live workflows with adoption playbooks.',
+    tags: ['Change design', 'MLOps pipelines', 'Telemetry dashboards'],
+  },
+  {
+    Icon: Globe2,
+    title: 'Infrastructure & Edge',
+    copy: 'Private cloud, hybrid, and edge-ready stacks powering critical national services.',
+    tags: ['On-prem accelerators', 'Sovereign hosting', 'Latency optimisation'],
+  },
+  {
+    Icon: ShieldCheck,
+    title: 'Governance & Trust',
+    copy: 'Responsible AI frameworks, policy alignment, and continuous evaluation loops.',
+    tags: ['Model cards', 'Bias checks', 'Compliance co-pilots'],
+  },
+  {
+    Icon: ChatDots,
+    title: 'Experience Design',
+    copy: 'Conversational UX, multilingual assistants, and inclusive service journeys.',
+    tags: ['Service blueprints', 'Civic prototyping', 'Accessibility QA'],
+  },
+];
+
+const workflow = [
+  'Discover',
+  'Design',
+  'Deploy',
+  'Scale',
+];
 
 const Services = () => {
   return (
-    <section id="services" className="bg-light py-5">
+    <section id="services" className="section services-section">
       <Container>
-        <h2 className="text-center mb-5">Our Services</h2>
-        <Row>
-          <Col md={4} className="text-center">
-            <BarChart size={50} className="mb-3" />
-            <h3>Data Analysis</h3>
-            <p>We provide in-depth data analysis to help you make informed decisions.</p>
-          </Col>
-          <Col md={4} className="text-center">
-            <CodeSlash size={50} className="mb-3" />
-            <h3>Custom AI Models</h3>
-            <p>We build custom AI models tailored to your specific business needs.</p>
-          </Col>
-          <Col md={4} className="text-center">
-            <GraphUp size={50} className="mb-3" />
-            <h3>Predictive Analytics</h3>
-            <p>Unlock the power of predictive analytics to forecast trends and outcomes.</p>
-          </Col>
-        </Row>
+        <div className="section-heading reveal delay-0">
+          <span className="eyebrow">What we deliver</span>
+          <h2>Full-stack teams that carry your AI ambition from whiteboard to production.</h2>
+          <p>
+            Choose the play you need, or combine them into a single program. Every stream ships with shared telemetry,
+            ethical guardrails, and hands-on change enablement.
+          </p>
+        </div>
+        <div className="services-grid">
+          {services.map(({ Icon, title, copy, tags }) => (
+            <article key={title} className="service-card reveal delay-1">
+              <Icon />
+              <h3>{title}</h3>
+              <p>{copy}</p>
+              <div className="service-tags">
+                {tags.map(tag => (
+                  <span key={tag} className="pill">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </article>
+          ))}
+        </div>
+        <div className="workflow-card reveal delay-2">
+          <div className="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center gap-3">
+            <div>
+              <span className="eyebrow">How we move</span>
+              <h3>Your AI flywheel, codified.</h3>
+              <p>Parallel tracks sync strategy, delivery, and adoption to keep momentum unstoppable.</p>
+            </div>
+            <div className="workflow-steps">
+              {workflow.map((step, index) => (
+                <div key={step} className="workflow-step">
+                  <small>Phase {index + 1}</small>
+                  <h4>{step}</h4>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
       </Container>
     </section>
   );