improve styles
This commit is contained in:
richardtekula
500
src/App.css
500
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;
|
||||
}
|
||||
|
||||
35
src/App.jsx
35
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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 */
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>© {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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user