Aravind/tenext-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit files

Browse Source
This commit is contained in:
Aravind
2026-06-18 11:13:39 +05:30
parent 2e710e1fb7
commit d9cc83aa82
36 changed files with 1958 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
components/aiero/CardsGrid.tsx Normal file
View File

@@ -0,0 +1,125 @@
import { CardHeading, IconButton } from "@/components/shared/CardShared";
import { ChartIcon } from "@/components/shared/icons/ChartIcon";
import { Counter } from "@/components/shared/Counter";
export function CardsGrid() {
return (
<section className="px-[20px] pb-[20px]">
<div className="grid grid-cols-1 gap-[20px] md:grid-cols-2 xl:grid-cols-4">
{/* Card 1 */}
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] bg-[#343F78] p-[40px_35px_45px_35px] lg:p-[55px_45px_60px_45px] xl:col-span-1">
<div
className="absolute inset-0 bg-[url('/images/aiero/assistant-artificial-intelligence-min.png')] bg-right-top bg-no-repeat opacity-100 transition-all duration-300 hover:scale-105"
/>
<div className="relative z-10 flex gap-[6px]">
<span className="rounded-[15px] border border-white px-[20px] py-[5px] text-[12px] text-white transition-colors hover:border-[#45D0BD] hover:text-[#45D0BD]">
Solutions
</span>
<span className="rounded-[15px] border border-white px-[20px] py-[5px] text-[12px] text-white transition-colors hover:border-[#45D0BD] hover:text-[#45D0BD]">
Plugins
</span>
</div>
<div className="relative z-10 mt-[60px] lg:mt-[100px]">
<CardHeading
title="Enhance operational efficiency"
titleClassName="text-white"
/>
<div className="mt-[44px] flex -space-x-[15px]">
<div className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-[#E8F3FF] shadow-sm">
<svg className="h-[24px] w-[24px]" viewBox="0 0 24 24" fill="#0084FF"><path d="M12 2C6.477 2 2 6.145 2 11.258C2 14.156 3.52 16.735 5.868 18.361V22L9.208 20.151C10.096 20.395 11.033 20.516 12 20.516C17.523 20.516 22 16.371 22 11.258C22 6.145 17.523 2 12 2Z"/></svg>
</div>
<div className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-[#E5F5FF] shadow-sm">
<svg className="h-[24px] w-[24px]" viewBox="0 0 24 24" fill="#00AFF0"><path d="M11.996 22C17.519 22 22 17.523 22 12C22 6.477 17.519 2 11.996 2C6.473 2 2 6.477 2 12C2 17.523 6.473 22 11.996 22Z"/></svg>
</div>
<div className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-[#E5FAFF] shadow-sm">
<svg className="h-[24px] w-[24px]" viewBox="0 0 24 24" fill="#229ED9"><path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C2 6.477 17.523 2 12 2Z"/></svg>
</div>
<div className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-[#EAE8FF] shadow-sm">
<svg className="h-[24px] w-[24px]" viewBox="0 0 24 24" fill="#5865F2"><path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C2 6.477 17.523 2 12 2Z"/></svg>
</div>
</div>
</div>
<IconButton />
</div>
{/* Card 2 */}
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] bg-[#56619E] p-[40px_35px_45px_35px] lg:p-[45px_45px_50px_45px] xl:col-span-1">
<div
className="absolute inset-0 bg-[url('/images/aiero/c0eb2845-min.png')] bg-bottom bg-no-repeat transition-all duration-300 hover:scale-105"
/>
<div className="absolute inset-0 bg-gradient-to-b from-[#3F497F00] to-[#333D74] from-[75%] to-[100%]" />
<div className="relative z-10 mb-[50px]">
<div className="mb-[24px] inline-flex h-[38px] w-[38px] items-center justify-center">
<ChartIcon className="h-full w-full text-white" />
</div>
<CardHeading
title="Tailor algorithms to adapt and optimize processes"
titleClassName="text-white"
/>
<p className="text-[16px] text-white">
Cobra opaleye gray reef shark bluntnose minnow.
</p>
</div>
<IconButton />
</div>
{/* Card 3 (spans 2 columns) */}
<div className="flex flex-col gap-[20px] md:col-span-2 xl:col-span-2">
{/* Card 3 - Top half */}
<div className="relative flex flex-col justify-center overflow-hidden rounded-[25px] bg-[#AC8DE0] p-[40px] lg:p-[45px_50px]">
<a href="#" className="absolute inset-0 z-20" aria-label="Happy clients" />
<div className="relative z-10 flex flex-col md:flex-row md:items-center md:justify-between">
<div>
<Counter
target={500}
suffix="K+"
numberClassName="text-[80px] font-bold leading-none font-[var(--font-manrope)] gradient-text-counter"
style={{ backgroundImage: "linear-gradient(0deg, rgba(255,255,255,0) 15%, #FFFFFF 100%)" }}
/>
</div>
<div className="mt-4 md:mt-0">
<h4 className="font-[var(--font-manrope)] text-[16px] font-medium leading-[20px] text-[#F8E1E1]">
Happy
<br />
clients
</h4>
</div>
</div>
</div>
{/* Card 3 - Bottom half */}
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] bg-[#282828] p-[40px_35px_45px_35px] lg:p-[50px_45px_45px_45px]">
<div
className="absolute inset-0 bg-[url('/images/aiero/Layer_2-min.jpg')] bg-cover bg-center transition-all duration-300 hover:scale-105"
/>
<div className="relative z-10 mb-[26px]">
<CardHeading
title="Unlock your full potential today with the power of Aiero AI"
titleClassName="text-white max-w-[80%]"
/>
</div>
<div className="relative z-10">
<svg width="136" viewBox="0 0 100 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.4 13.9C26.4 11.2 25.4 9 23.5 7.4C21.6 5.8 19 5 15.7 5C12.4 5 9.8 5.8 7.9 7.4C6 9 5 11.2 5 13.9C5 16.6 6 18.8 7.9 20.4C9.8 22 12.4 22.8 15.7 22.8C19 22.8 21.6 22 23.5 20.4C25.4 18.8 26.4 16.6 26.4 13.9ZM30.7 13.9C30.7 18 29.3 21.2 26.5 23.7C23.7 26.2 19.9 27.5 15.1 27.5C10.3 27.5 6.5 26.2 3.7 23.7C0.9 21.2 -0.5 18 -0.5 13.9C-0.5 9.8 0.9 6.6 3.7 4.1C6.5 1.6 10.3 0.3 15.1 0.3C19.9 0.3 23.7 1.6 26.5 4.1C29.3 6.6 30.7 9.8 30.7 13.9ZM37.7 27V0.8H42V4.5C43.5 2 46.1 0.8 49.8 0.8C52.9 0.8 55.4 1.8 57.3 3.8C59.2 5.8 60.1 8.5 60.1 11.9V27H55.8V12.4C55.8 9.9 55.1 8.1 53.7 6.9C52.3 5.7 50.4 5.1 48 5.1C45.3 5.1 43.1 5.9 41.4 7.5C39.7 9.1 38.8 11.4 38.8 14.4V27H37.7ZM71.1 27.5C67.5 27.5 64.6 26.4 62.4 24.2C60.2 22 59.1 18.9 59.1 14.9V14.2C59.1 10.1 60.3 6.9 62.7 4.5C65.1 2.1 68.3 0.9 72.3 0.9C75.8 0.9 78.6 1.9 80.7 3.9C82.8 5.9 83.8 8.8 83.8 12.6V15.7H63.4C63.6 18.4 64.5 20.4 66.1 21.6C67.7 22.8 69.8 23.4 72.4 23.4C74.6 23.4 76.5 23 78.1 22.2C79.7 21.4 81.1 20.2 82.2 18.6L84.8 21.8C83.2 23.6 81.2 25 78.8 26C76.4 27 73.8 27.5 71.1 27.5ZM80.6 10.6C80.6 8.3 79.9 6.6 78.5 5.5C77.1 4.4 75 3.8 72.2 3.8C69.3 3.8 67 4.6 65.3 6.2C63.6 7.8 62.7 10 62.7 12.8H80.6V10.6ZM90.2 0H94.4V27H90.2V0Z" fill="white"/>
</svg>
</div>
</div>
</div>
</div>
</section>
);
}

125
components/aiero/FeaturesSection.tsx Normal file
View File

@@ -0,0 +1,125 @@
import { CardHeading, IconButton } from "@/components/shared/CardShared";
import { Counter } from "@/components/shared/Counter";
export function FeaturesSection() {
return (
<section className="bg-white px-[20px] pb-[100px] pt-[150px]">
<div className="mx-auto max-w-[1260px]">
{/* Top text and separator */}
<div className="mb-[70px] pr-[10%]">
<div className="mb-[20px] h-px w-[130px] bg-[#3F3F3F]" />
<h2
className="max-w-[700px] tracking-[-0.03em] text-white"
style={{
fontFamily: "var(--font-sora)",
fontSize: "clamp(32px, 4vw, 56px)",
fontWeight: 700,
lineHeight: 1.1,
}}
>
AI Solutions that drive success
</h2>
</div>
{/* Feature Cards Grid */}
<div className="grid grid-cols-1 gap-[20px] lg:grid-cols-2">
{/* Card 1 - Left */}
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] border border-[#3F3F3F] bg-[#282828] p-[40px_35px_45px_35px] lg:p-[22%_9%_20%_9%]">
<div
className="absolute inset-0 bg-[url('/images/aiero/home-9-img.png')] bg-bottom bg-no-repeat transition-all duration-300 hover:scale-105"
style={{ backgroundSize: "100% auto" }}
/>
<div className="absolute inset-0 bg-gradient-to-t from-[#0D0D0D99] to-transparent to-[20%]" />
<div className="relative z-10 mt-auto">
<CardHeading
title="Integrate our API to uncover deep insights"
titleClassName="text-white"
/>
<ul className="mt-[20px] flex flex-col gap-3">
<li className="flex items-center gap-3 text-[#87899B]">
<span className="flex h-1 w-1 rounded-full bg-[#87899B]" />
Advanced analytics processing
</li>
<li className="flex items-center gap-3 text-[#87899B]">
<span className="flex h-1 w-1 rounded-full bg-[#87899B]" />
Real-time data synchronization
</li>
<li className="flex items-center gap-3 text-[#87899B]">
<span className="flex h-1 w-1 rounded-full bg-[#87899B]" />
Secure API endpoints
</li>
</ul>
</div>
<IconButton />
</div>
{/* Card 2 - Right */}
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] border border-[#3F3F3F] bg-[#282828] p-[40px_35px_45px_35px] lg:p-[10%_9%_11%_9%]">
<div
className="absolute inset-0 bg-[url('/images/aiero/Dots.png')] bg-[length:auto] bg-[50%_20px] bg-no-repeat opacity-20"
/>
<div className="relative z-10 flex h-[42px] w-[42px] items-center justify-center text-white">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-full w-full">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
</svg>
</div>
<div className="relative z-10 mt-[60px] lg:mt-[100px]">
<CardHeading
title="Data privacy and security with robust measures"
titleClassName="text-white"
/>
<p className="text-[16px] text-[#87899B]">
Cobra opaleye gray reef shark bluntnose minnow. Triggerfish bango guppy opah sunfish bluntnose knifefish upside-down catfish.
</p>
</div>
<IconButton />
</div>
{/* Card 3 - Bottom Full Width */}
<div className="relative col-span-1 overflow-hidden rounded-[25px] border border-[#3F3F3F] bg-[#282828] lg:col-span-2">
<div
className="absolute inset-0 bg-[url('/images/aiero/3d-woman-shape-glowing-with-bright-holographic-colors-1-min.png')] bg-right-bottom bg-no-repeat transition-all duration-300 hover:scale-105"
style={{ backgroundSize: "83% auto" }}
/>
<div className="relative z-10 grid grid-cols-1 gap-[40px] p-[40px_35px] lg:grid-cols-2 lg:p-[80px_60px]">
<div>
<CardHeading
subtitle="Technology"
title="Tailored solutions specifically to your needs"
titleClassName="text-white"
subtitleClassName="text-[#45D0BD]"
/>
</div>
<div className="flex flex-col gap-[40px] sm:flex-row sm:gap-[60px] lg:pl-[15%]">
<Counter
target={99}
suffix="%"
numberClassName="text-[60px] font-bold leading-none font-[var(--font-manrope)] text-white"
title="Accuracy rate"
titleClassName="font-[var(--font-sora)] text-[11px] font-semibold tracking-[0.18em] uppercase text-[#87899B] mt-2"
/>
<Counter
target={24}
suffix="/7"
numberClassName="text-[60px] font-bold leading-none font-[var(--font-manrope)] text-white"
title="Customer support"
titleClassName="font-[var(--font-sora)] text-[11px] font-semibold tracking-[0.18em] uppercase text-[#87899B] mt-2"
/>
</div>
</div>
</div>
</div>
</div>
</section>
);
}

86
components/aiero/HeroSection.tsx Normal file
View File

@@ -0,0 +1,86 @@
export function HeroSection() {
return (
<section className="relative px-5 pt-5">
{/* Scroll Down button — vertical, left side */}
<div
className="absolute left-0 top-1/2 z-20 hidden xl:block"
style={{
transform: "rotate(-90deg) translateX(-50%) translateY(100%)",
transformOrigin: "left bottom",
}}
>
<span className="scroll-btn-decoration">
<a
href="#scroll-down"
className="inline-flex items-center gap-2 rounded-b-[25px] bg-white px-[56px] py-[16px] text-[13px] font-semibold text-[#0b0e17] no-underline transition-colors hover:text-[#45d0bd]"
style={{ fontFamily: "var(--font-sora)" }}
>
Scroll down
<svg width="10" height="10" viewBox="0 0 12 12" fill="none">
<path d="M1 11L11 1M11 1H3M11 1V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</a>
</span>
</div>
{/* Hero container with background */}
<div
className="relative overflow-hidden rounded-[25px] bg-[#1f1f1f] bg-cover bg-center"
style={{
backgroundImage: "url(/images/aiero/home-9-top-bg-min.jpg)",
padding: "13.5% 0 8.333% 0",
}}
>
{/* Hero content */}
<div className="relative z-10 mx-auto max-w-[1140px] px-[15px]" style={{ marginLeft: "-35px", paddingLeft: "calc(50% - 570px + 15px)" }}>
<div className="flex flex-col items-start">
{/* Heading */}
<h1
className="mb-5 max-w-[1100px] text-left tracking-[-0.03em] text-white"
style={{
fontFamily: "var(--font-manrope)",
fontSize: "clamp(32px, 5.2vw, 80px)",
fontWeight: 700,
lineHeight: 1.1,
}}
>
Revolutionizing businesses with cutting-edge AI solutions and
groundbreaking innovation
</h1>
{/* Subtitle */}
<div style={{ marginRight: "53%" }}>
<p className="text-[16px] leading-[1.6] text-white">
Mummichog paradise fish! Triggerfish bango guppy opah sunfish
bluntnose knifefish upside-down catfish cobia spookfish convict
cichlid.
</p>
</div>
{/* CTA Button */}
<div className="mt-10">
<a
href="#"
target="_blank"
rel="noopener noreferrer"
className="aiero-button aiero-button-solid inline-flex items-center gap-2 rounded-[25px] border border-[#EF6464] bg-[#EF6464] px-[30px] py-[14px] text-[16px] text-white transition-all hover:border-[#F57E7E] hover:bg-[#F57E7E]"
style={{ minWidth: "216px", fontFamily: "var(--font-sora)" }}
>
Discover
<svg width="10" height="10" viewBox="0 0 12 12" fill="none">
<path d="M1 11L11 1M11 1H3M11 1V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span className="button-inner" />
</a>
</div>
</div>
</div>
{/* Scroll anchor */}
<div id="scroll-down" className="absolute bottom-0" />
</div>
</section>
);
}

30
components/aiero/MarqueeStrip.tsx Normal file
View File

@@ -0,0 +1,30 @@
export function MarqueeStrip() {
return (
<div className="relative z-10 mx-[-5px] mb-[-90px] mt-[20px] overflow-hidden bg-gradient-to-r from-[#45D0BD] to-[#44B6E9] py-[42px]" style={{ transform: "rotate(-2.07deg)" }}>
<div className="flex w-[200%] whitespace-nowrap">
{/* Marquee track 1 */}
<div className="animate-marquee flex gap-8">
{[...Array(6)].map((_, i) => (
<div key={i} className="flex items-center gap-8">
<span className="text-[60px] font-bold leading-none text-white" style={{ fontFamily: "var(--font-sora)" }}>
Artificial Intelligence
</span>
<span className="flex h-3 w-3 rounded-full bg-white opacity-50" />
</div>
))}
</div>
{/* Marquee track 2 (seamless loop) */}
<div className="animate-marquee flex gap-8">
{[...Array(6)].map((_, i) => (
<div key={`dup-${i}`} className="flex items-center gap-8">
<span className="text-[60px] font-bold leading-none text-white" style={{ fontFamily: "var(--font-sora)" }}>
Artificial Intelligence
</span>
<span className="flex h-3 w-3 rounded-full bg-white opacity-50" />
</div>
))}
</div>
</div>
</div>
);
}

102
components/aiero/Navbar.tsx Normal file
View File

@@ -0,0 +1,102 @@
"use client";
import { useState } from "react";
import Image from "next/image";
import { navigationData } from "@/data/navigation";
import { SearchIcon } from "@/components/shared/icons/SearchIcon";
export function Navbar() {
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
return (
<header className="relative z-30 mx-auto flex h-[76px] max-w-[2520px] items-center justify-between px-2">
{/* Logo */}
<a href="#" className="flex items-center">
<Image
src="/images/aiero/logo-dark.png"
alt="Aiero"
width={109.5}
height={19.5}
className="h-auto w-auto"
priority
/>
</a>
{/* Navigation */}
<nav className="hidden items-center gap-0 lg:flex" aria-label="Primary navigation">
{navigationData.map((item) => (
<div
key={item.label}
className="relative"
onMouseEnter={() => setOpenDropdown(item.label)}
onMouseLeave={() => setOpenDropdown(null)}
>
<a
href={item.href}
className="flex items-center gap-1 rounded-[20px] px-[18px] py-[10px] text-[11px] font-semibold uppercase tracking-[0.18em] text-white transition-colors hover:bg-[#1f1f1f]"
style={{ fontFamily: "var(--font-sora)" }}
>
{item.label}
{item.children && (
<svg className="ml-0.5 h-2 w-2 opacity-60" viewBox="0 0 8 5" fill="none">
<path d="M1 1L4 4L7 1" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
)}
</a>
{/* Dropdown */}
{item.children && openDropdown === item.label && (
<div className="absolute left-0 top-full z-50 min-w-[200px] rounded-[15px] border border-[#2a2a2a] bg-[#111111] py-3 shadow-2xl">
{item.children.map((child) => (
<a
key={child.label}
href={child.href}
className="block px-5 py-2.5 text-[12px] font-medium text-white/80 transition-colors hover:text-[#45d0bd]"
style={{ fontFamily: "var(--font-sora)" }}
>
{child.label}
</a>
))}
</div>
)}
</div>
))}
</nav>
{/* Right Icons */}
<div className="flex items-center gap-5">
<button className="hidden text-white transition-colors hover:text-[#45d0bd] md:block" aria-label="Search">
<SearchIcon className="h-[18px] w-[18px]" />
</button>
<a
href="#"
className="hidden items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-white transition-colors hover:text-[#45d0bd] md:flex"
style={{ fontFamily: "var(--font-sora)" }}
>
<svg className="h-4 w-4" viewBox="0 0 16 16" fill="none">
<circle cx="8" cy="5" r="3.5" stroke="currentColor" strokeWidth="1.3"/>
<path d="M2 14.5C2 11.5 4.5 9.5 8 9.5C11.5 9.5 14 11.5 14 14.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
</svg>
Log in
</a>
<a
href="#"
className="aiero-button aiero-button-gradient-border rounded-full px-[22px] py-[10px] text-[11px] font-semibold uppercase tracking-[0.18em] text-white"
style={{ fontFamily: "var(--font-sora)" }}
>
Get in Touch
<span className="button-inner" />
</a>
{/* Mobile menu button */}
<button className="flex flex-col gap-[5px] lg:hidden" aria-label="Menu">
<span className="h-[2px] w-[22px] bg-white" />
<span className="h-[2px] w-[22px] bg-white" />
<span className="h-[2px] w-[22px] bg-white" />
</button>
</div>
</header>
);
}

88
components/aiero/PossibilitiesSection.tsx Normal file
View File

@@ -0,0 +1,88 @@
import { AieroButton } from "@/components/shared/AieroButton";
import { Counter } from "@/components/shared/Counter";
import { IconBox } from "@/components/shared/IconBox";
import { OrbitIcon, FanIcon, CirclesIcon, ExpandIcon } from "@/components/shared/icons/PossibilityIcons";
export function PossibilitiesSection() {
return (
<section className="px-[20px] py-[60px] md:py-[100px]">
<div className="mx-auto grid max-w-[1260px] grid-cols-1 gap-[50px] lg:grid-cols-[1fr_1fr]">
{/* Left Column */}
<div className="flex flex-col items-start pr-[10%] pt-[20px]">
<span
className="aiero-subheading mb-[16px] text-white"
style={{ fontFamily: "var(--font-sora)" }}
>
Possibilities
</span>
<h2
className="mb-[24px] max-w-[500px] tracking-[-0.03em] text-white"
style={{
fontFamily: "var(--font-dm-sans)",
fontSize: "clamp(32px, 4vw, 56px)",
fontWeight: 500,
lineHeight: 1.1,
}}
>
Explore limitless possibilities with Aiero AI
</h2>
<p className="mb-[40px] max-w-[480px] text-[16px] text-[#87899B]">
Guppy siamese fighting fish, round stingray roach, sand tiger yellow weaver fish. Longnose lancetfish mooneye opah ghost fish.
</p>
<AieroButton
variant="gradient-fill"
className="rounded-[25px] px-[35px] py-[15px] text-[15px] font-medium"
showArrow={false}
>
Explore more
</AieroButton>
<div className="mt-[80px]">
<Counter
target={270}
suffix="k"
numberClassName="text-[60px] md:text-[80px] font-bold leading-none font-[var(--font-manrope)] gradient-text-purple"
title="Global satisfied customers"
titleClassName="font-[var(--font-manrope)] text-[16px] font-medium leading-[1.4] text-[#87899B] max-w-[120px]"
layout="row-reverse"
gap="30px"
/>
</div>
</div>
{/* Right Column */}
<div className="flex flex-col gap-[30px] lg:pl-[10%]">
<IconBox
icon={<OrbitIcon className="h-full w-full" />}
title="Cutting-edge technology"
description="Integration of state-of-the-art AI algorithms, including deep learning, natural language processing."
hasBorder={true}
/>
<IconBox
icon={<FanIcon className="h-full w-full" />}
title="Tailored solutions"
description="Custom design and development of neural network architectures tailored to specific business needs."
hasBorder={true}
/>
<IconBox
icon={<CirclesIcon className="h-full w-full" />}
title="Training and workshops"
description="Custom design and development of neural network architectures tailored to specific business needs and objectives."
hasBorder={true}
/>
<IconBox
icon={<ExpandIcon className="h-full w-full" />}
title="AI-powered design"
description="Integration of state-of-the-art AI algorithms, including deep learning, natural language processing."
hasBorder={false}
/>
</div>
</div>
</section>
);
}