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>
);
}

51
components/shared/AieroButton.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
type ButtonVariant = "solid" | "outline" | "gradient-border" | "gradient-fill" | "simple";
interface AieroButtonProps {
href?: string;
variant?: ButtonVariant;
children: React.ReactNode;
className?: string;
showArrow?: boolean;
target?: string;
onClick?: () => void;
}
export function AieroButton({
href = "#",
variant = "solid",
children,
className = "",
showArrow = true,
target,
onClick,
}: AieroButtonProps) {
const baseClasses = "aiero-button";
const variantClasses: Record<ButtonVariant, string> = {
solid: "aiero-button-solid",
outline: "aiero-button-solid",
"gradient-border": "aiero-button-gradient-border",
"gradient-fill": "aiero-button-gradient-fill",
simple: "",
};
const combined = `${baseClasses} ${variantClasses[variant]} ${className}`;
return (
<a
href={href}
target={target}
className={combined}
onClick={onClick}
rel={target === "_blank" ? "noopener noreferrer" : undefined}
>
{children}
{showArrow && <ArrowIcon className="w-3 h-3" />}
{(variant === "gradient-border" || variant === "gradient-fill") && (
<span className="button-inner" />
)}
</a>
);
}

51
components/shared/CardShared.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
interface CardHeadingProps {
title: string;
subtitle?: string;
titleClassName?: string;
subtitleClassName?: string;
wrapperClassName?: string;
}
export function CardHeading({
title,
subtitle,
titleClassName = "",
subtitleClassName = "",
wrapperClassName = "",
}: CardHeadingProps) {
return (
<div className={`mb-5 ${wrapperClassName}`}>
{subtitle && (
<div
className={`aiero-subheading ${subtitleClassName}`}
style={{ fontFamily: "var(--font-sora)" }}
>
{subtitle}
</div>
)}
<h4
className={`tracking-[-0.03em] ${titleClassName}`}
style={{
fontFamily: "var(--font-dm-sans)",
fontSize: "30px",
fontWeight: 500,
lineHeight: "1.16666em",
}}
>
{title}
</h4>
</div>
);
}
export function IconButton({ className = "" }: { className?: string }) {
return (
<div className={`absolute bottom-0 right-0 icon-decoration ${className}`}>
<div className="icon-inner flex h-[52px] w-[52px] items-center justify-center rounded-tl-[30px] bg-white text-[#333333] transition-colors hover:bg-[#333333] hover:text-white">
<ArrowIcon className="h-3 w-3" />
</div>
</div>
);
}

79
components/shared/Counter.tsx Normal file
View File

@@ -0,0 +1,79 @@
"use client";
import { useEffect, useRef, useState } from "react";
interface CounterProps {
target: number;
suffix?: string;
prefix?: string;
duration?: number;
className?: string;
title?: string;
numberClassName?: string;
titleClassName?: string;
layout?: "default" | "row-reverse";
gap?: string;
style?: React.CSSProperties;
}
export function Counter({
target,
suffix = "",
prefix = "",
duration = 2000,
className = "",
title,
numberClassName = "",
titleClassName = "",
layout = "default",
gap = "0px",
style,
}: CounterProps) {
const [count, setCount] = useState(0);
const [hasAnimated, setHasAnimated] = useState(false);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting && !hasAnimated) {
setHasAnimated(true);
const startTime = performance.now();
const animate = (now: number) => {
const elapsed = now - startTime;
const progress = Math.min(elapsed / duration, 1);
// ease-out
const eased = 1 - Math.pow(1 - progress, 3);
setCount(Math.floor(eased * target));
if (progress < 1) requestAnimationFrame(animate);
};
requestAnimationFrame(animate);
}
},
{ threshold: 0.3 }
);
observer.observe(el);
return () => observer.disconnect();
}, [target, duration, hasAnimated]);
return (
<div
ref={ref}
className={`${layout === "row-reverse" ? "flex flex-row-reverse items-end" : "flex flex-col"} ${className}`}
style={{ gap }}
>
<div className={`${numberClassName}`} style={style}>
{prefix && <span>{prefix}</span>}
<span>{count}</span>
{suffix && <span>{suffix}</span>}
</div>
{title && (
<div className={`${titleClassName}`}>{title}</div>
)}
</div>
);
}

39
components/shared/IconBox.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { ReactNode } from "react";
interface IconBoxProps {
icon: ReactNode;
title: string;
description: string;
hasBorder?: boolean;
}
export function IconBox({ icon, title, description, hasBorder = true }: IconBoxProps) {
return (
<div className="flex flex-col items-start gap-[20px] sm:flex-row sm:gap-[40px]">
<div className="flex h-[88px] w-[88px] shrink-0 items-center justify-center">
{icon}
</div>
<div
className={`flex-1 pb-[30px] pt-[5px] ${
hasBorder ? "border-b border-[#3F3F3F]" : ""
}`}
>
<h5
className="mb-[15px] text-white"
style={{
fontFamily: "var(--font-manrope)",
fontSize: "25px",
lineHeight: 1.4,
fontWeight: 500,
}}
>
{title}
</h5>
<p className="text-[16px] leading-[1.6] text-[#87899B]">
{description}
</p>
</div>
</div>
);
}

20
components/shared/icons/ArrowIcon.tsx Normal file
View File

@@ -0,0 +1,20 @@
export function ArrowIcon({ className = "" }: { className?: string }) {
return (
<svg
className={className}
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 11L11 1M11 1H3M11 1V9"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

193
components/shared/icons/ChartIcon.tsx Normal file
View File

@@ -0,0 +1,193 @@
export function ChartIcon({ className = "" }: { className?: string }) {
return (
<svg
className={className}
viewBox="0 0 77 88"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M45.74 40.8109C51.6726 37.3857 53.7055 29.8003 50.2807 23.8683C46.8559 17.9363 39.2702 15.9042 33.3376 19.3294C27.405 22.7546 25.3721 30.3401 28.7969 36.2721C32.2217 42.2041 39.8074 44.2361 45.74 40.8109Z"
stroke="url(#paint0_linear)"
strokeWidth="0.6"
strokeMiterlimit="10"
/>
<path
d="M47.1284 43.216C53.426 39.58 55.5842 31.528 51.9488 25.2313C48.3134 18.9346 40.2611 16.7777 33.9634 20.4136C27.6658 24.0496 25.5076 32.1016 29.143 38.3982C32.7784 44.6949 40.8307 46.8518 47.1284 43.216Z"
stroke="url(#paint1_linear)"
strokeWidth="0.6"
strokeMiterlimit="10"
/>
<path
d="M48.5691 45.7111C55.2842 41.8341 57.5856 33.2485 53.7094 26.5346C49.8331 19.8208 41.2471 17.521 34.5319 21.398C27.8168 25.275 25.5154 33.8606 29.3916 40.5745C33.2679 47.2883 41.8539 49.5881 48.5691 45.7111Z"
stroke="url(#paint2_linear)"
strokeWidth="0.6"
strokeMiterlimit="10"
/>
<path
d="M50.0791 48.2764C57.2512 44.1205 59.6971 34.9389 55.5422 27.7685C51.3874 20.5981 42.205 18.1543 35.0329 22.3102C27.8609 26.466 25.415 35.6477 29.5698 42.8181C33.7247 49.9885 42.9071 52.4322 50.0791 48.2764Z"
stroke="url(#paint3_linear)"
strokeWidth="0.6"
strokeMiterlimit="10"
/>
<path
d="M51.5834 50.9308C59.2604 46.4985 61.8917 36.6837 57.4607 29.0089C53.0296 21.334 43.2141 18.7054 35.5371 23.1377C27.8601 27.57 25.2288 37.3848 29.6599 45.0596C34.091 52.7345 43.9065 55.3631 51.5834 50.9308Z"
stroke="url(#paint4_linear)"
strokeWidth="0.6"
strokeMiterlimit="10"
/>
<path
d="M53.1404 53.6281C61.3442 48.8916 64.1552 38.4018 59.419 30.1984C54.6827 21.995 44.1928 19.1845 35.989 23.921C27.7852 28.6574 24.9742 39.1472 29.7105 47.3506C34.4467 55.554 44.9366 58.3645 53.1404 53.6281Z"
stroke="url(#paint5_linear)"
strokeWidth="0.6"
strokeMiterlimit="10"
/>
<path
d="M54.7248 56.3733C63.4817 51.3175 66.4824 40.1209 61.4271 31.3649C56.3718 22.609 45.1749 19.6093 36.4181 24.6651C27.6613 29.7208 24.6606 40.9175 29.7159 49.6734C34.7711 58.4294 45.968 61.429 54.7248 56.3733Z"
stroke="url(#paint6_linear)"
strokeWidth="0.6"
strokeMiterlimit="10"
/>
<path
d="M56.3293 59.1495C65.6588 53.7631 68.856 41.8346 63.4704 32.5064C58.0847 23.1782 46.1557 19.9827 36.8262 25.3691C27.4967 30.7555 24.2995 42.6841 29.6852 52.0123C35.0708 61.3405 47.0001 64.5359 56.3293 59.1495Z"
stroke="url(#paint7_linear)"
strokeWidth="0.6"
strokeMiterlimit="10"
/>
<path
d="M57.9492 61.9564C67.8667 56.2305 71.2646 43.5487 65.5385 33.6308C59.8124 23.7129 47.1307 20.3147 37.2132 26.0406C27.2956 31.7664 23.8978 44.4482 29.6239 54.3661C35.35 64.284 48.0317 67.6823 57.9492 61.9564Z"
stroke="url(#paint8_linear)"
strokeWidth="0.6"
strokeMiterlimit="10"
/>
<path
d="M59.5832 64.788C70.104 58.7138 73.7088 45.2609 67.6347 34.7402C61.5606 24.2195 48.1077 20.6149 37.5868 26.6892C27.0659 32.7634 23.4612 46.2162 29.5353 56.7369C35.6094 67.2576 49.0623 70.8623 59.5832 64.788Z"
stroke="url(#paint9_linear)"
strokeWidth="0.6"
strokeMiterlimit="10"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="1.76204"
y1="0.999985"
x2="96.3599"
y2="20.9846"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8258C8" />
<stop offset="0.315" stopColor="#6766C8" />
<stop offset="1" stopColor="#2C84C8" />
</linearGradient>
<linearGradient
id="paint1_linear"
x1="2.73637"
y1="1.48534"
x2="95.1113"
y2="21.0161"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8258C8" />
<stop offset="0.315" stopColor="#6766C8" />
<stop offset="1" stopColor="#2C84C8" />
</linearGradient>
<linearGradient
id="paint2_linear"
x1="3.70122"
y1="1.96678"
x2="93.8892"
y2="21.0474"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8258C8" />
<stop offset="0.315" stopColor="#6766C8" />
<stop offset="1" stopColor="#2C84C8" />
</linearGradient>
<linearGradient
id="paint3_linear"
x1="4.64915"
y1="2.42967"
x2="92.732"
y2="21.0817"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8258C8" />
<stop offset="0.315" stopColor="#6766C8" />
<stop offset="1" stopColor="#2C84C8" />
</linearGradient>
<linearGradient
id="paint4_linear"
x1="5.59368"
y1="2.90135"
x2="91.6306"
y2="21.141"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8258C8" />
<stop offset="0.315" stopColor="#6766C8" />
<stop offset="1" stopColor="#2C84C8" />
</linearGradient>
<linearGradient
id="paint5_linear"
x1="6.51916"
y1="3.33885"
x2="90.5712"
y2="21.1782"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8258C8" />
<stop offset="0.315" stopColor="#6766C8" />
<stop offset="1" stopColor="#2C84C8" />
</linearGradient>
<linearGradient
id="paint6_linear"
x1="7.45649"
y1="3.79882"
x2="89.5413"
y2="21.2411"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8258C8" />
<stop offset="0.315" stopColor="#6766C8" />
<stop offset="1" stopColor="#2C84C8" />
</linearGradient>
<linearGradient
id="paint7_linear"
x1="8.38824"
y1="4.21971"
x2="88.5417"
y2="21.2658"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8258C8" />
<stop offset="0.315" stopColor="#6766C8" />
<stop offset="1" stopColor="#2C84C8" />
</linearGradient>
<linearGradient
id="paint8_linear"
x1="9.30078"
y1="4.64647"
x2="87.5608"
y2="21.3088"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8258C8" />
<stop offset="0.315" stopColor="#6766C8" />
<stop offset="1" stopColor="#2C84C8" />
</linearGradient>
<linearGradient
id="paint9_linear"
x1="10.2252"
y1="5.05272"
x2="86.613"
y2="21.3297"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8258C8" />
<stop offset="0.315" stopColor="#6766C8" />
<stop offset="1" stopColor="#2C84C8" />
</linearGradient>
</defs>
</svg>
);
}

81
components/shared/icons/PossibilityIcons.tsx Normal file
View File

@@ -0,0 +1,81 @@
export function OrbitIcon({ className = "" }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 78 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M45.74 40.8109C51.6726 37.3857 53.7055 29.8003 50.2807 23.8683C46.8559 17.9363 39.2702 15.9042 33.3376 19.3294C27.405 22.7546 25.3721 30.3401 28.7969 36.2721C32.2217 42.2041 39.8074 44.2361 45.74 40.8109Z" stroke="url(#paint0_linear)" strokeWidth="0.6"/>
<path d="M47.1284 43.216C53.426 39.58 55.5842 31.528 51.9488 25.2313C48.3134 18.9346 40.2611 16.7777 33.9634 20.4136C27.6658 24.0496 25.5076 32.1016 29.143 38.3982C32.7784 44.6949 40.8307 46.8518 47.1284 43.216Z" stroke="url(#paint1_linear)" strokeWidth="0.6"/>
<path d="M48.5691 45.7111C55.2842 41.8341 57.5856 33.2485 53.7094 26.5346C49.8331 19.8208 41.2471 17.521 34.5319 21.398C27.8168 25.275 25.5154 33.8606 29.3916 40.5745C33.2679 47.2883 41.8539 49.5881 48.5691 45.7111Z" stroke="url(#paint2_linear)" strokeWidth="0.6"/>
<path d="M50.0791 48.2764C57.2512 44.1205 59.6971 34.9389 55.5422 27.7685C51.3874 20.5981 42.205 18.1543 35.0329 22.3102C27.8609 26.466 25.415 35.6477 29.5698 42.8181C33.7247 49.9885 42.9071 52.4322 50.0791 48.2764Z" stroke="url(#paint3_linear)" strokeWidth="0.6"/>
<path d="M51.5834 50.9308C59.2604 46.4985 61.8917 36.6837 57.4607 29.0089C53.0296 21.334 43.2141 18.7054 35.5371 23.1377C27.8601 27.57 25.2288 37.3848 29.6599 45.0596C34.091 52.7345 43.9065 55.3631 51.5834 50.9308Z" stroke="url(#paint4_linear)" strokeWidth="0.6"/>
<path d="M53.1404 53.6281C61.3442 48.8916 64.1552 38.4018 59.419 30.1984C54.6827 21.995 44.1928 19.1845 35.989 23.921C27.7852 28.6574 24.9742 39.1472 29.7105 47.3506C34.4467 55.554 44.9366 58.3645 53.1404 53.6281Z" stroke="url(#paint5_linear)" strokeWidth="0.6"/>
<path d="M54.7248 56.3733C63.4817 51.3175 66.4824 40.1209 61.4271 31.3649C56.3718 22.609 45.1749 19.6093 36.4181 24.6651C27.6613 29.7208 24.6606 40.9175 29.7159 49.6734C34.7711 58.4294 45.968 61.429 54.7248 56.3733Z" stroke="url(#paint6_linear)" strokeWidth="0.6"/>
<path d="M56.3293 59.1495C65.6588 53.7631 68.856 41.8346 63.4704 32.5064C58.0847 23.1782 46.1557 19.9827 36.8262 25.3691C27.4967 30.7555 24.2995 42.6841 29.6852 52.0123C35.0708 61.3405 47.0001 64.5359 56.3293 59.1495Z" stroke="url(#paint7_linear)" strokeWidth="0.6"/>
<path d="M57.9492 61.9564C67.8667 56.2305 71.2646 43.5487 65.5385 33.6308C59.8124 23.7129 47.1307 20.3147 37.2132 26.0406C27.2956 31.7664 23.8978 44.4482 29.6239 54.3661C35.35 64.284 48.0317 67.6823 57.9492 61.9564Z" stroke="url(#paint8_linear)" strokeWidth="0.6"/>
<path d="M59.5832 64.788C70.104 58.7138 73.7088 45.2609 67.6347 34.7402C61.5606 24.2195 48.1077 20.6149 37.5868 26.6892C27.0659 32.7634 23.4612 46.2162 29.5353 56.7369C35.6094 67.2576 49.0623 70.8623 59.5832 64.788Z" stroke="url(#paint9_linear)" strokeWidth="0.6"/>
<path d="M77.3353 53.9649C75.6778 68.1777 62.8087 78.3548 48.5983 76.6937C34.3841 75.0349 24.2075 62.1707 25.8712 47.9595C27.5286 33.7467 40.3978 23.5695 54.6081 25.2307C68.8224 26.8895 78.999 39.7537 77.3353 53.9649Z" stroke="url(#paint10_linear)" strokeWidth="0.6"/>
<path d="M79.5896 56.4701C77.5065 71.3716 63.7371 81.7627 48.8364 79.6828C33.9358 77.603 23.5412 63.8311 25.6244 48.9296C27.7075 34.0281 41.4769 23.637 56.3776 25.7169C71.2805 27.8007 81.6728 41.5686 79.5896 56.4701Z" stroke="url(#paint11_linear)" strokeWidth="0.6"/>
<path d="M81.8459 58.9799C79.3371 74.5701 64.6657 85.1813 49.0742 82.6726C33.4849 80.1677 22.873 65.4985 25.3795 49.9043C27.8882 34.3142 42.5596 23.7029 58.1512 26.2116C73.7428 28.7204 84.3524 43.3857 81.8459 58.9799Z" stroke="url(#paint12_linear)" strokeWidth="0.6"/>
<defs>
<linearGradient id="paint0_linear" x1="1.76204" y1="0.999985" x2="96.3599" y2="20.9846" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint1_linear" x1="2.73637" y1="1.48534" x2="95.1113" y2="21.0161" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint2_linear" x1="3.70122" y1="1.96678" x2="93.8892" y2="21.0474" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint3_linear" x1="4.64915" y1="2.42967" x2="92.732" y2="21.0817" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint4_linear" x1="5.59368" y1="2.90135" x2="91.6306" y2="21.141" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint5_linear" x1="6.51916" y1="3.33885" x2="90.5712" y2="21.1782" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint6_linear" x1="7.45649" y1="3.79882" x2="89.5413" y2="21.2411" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint7_linear" x1="8.38824" y1="4.21971" x2="88.5417" y2="21.2658" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint8_linear" x1="9.30078" y1="4.64647" x2="87.5608" y2="21.3088" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint9_linear" x1="10.2252" y1="5.05272" x2="86.613" y2="21.3297" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint10_linear" x1="11.1361" y1="5.45702" x2="85.6724" y2="21.352" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint11_linear" x1="12.0433" y1="5.83104" x2="84.7566" y2="21.3469" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint12_linear" x1="12.9525" y1="6.21288" x2="83.8468" y2="21.3492" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
</defs>
</svg>
);
}
export function FanIcon({ className = "" }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 78 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M48.5691 45.7111C55.2842 41.8341 57.5856 33.2485 53.7094 26.5346C49.8331 19.8208 41.2471 17.521 34.5319 21.398C27.8168 25.275 25.5154 33.8606 29.3916 40.5745C33.2679 47.2883 41.8539 49.5881 48.5691 45.7111Z" stroke="url(#paint0_linear)" strokeWidth="0.6"/>
<path d="M50.0791 48.2764C57.2512 44.1205 59.6971 34.9389 55.5422 27.7685C51.3874 20.5981 42.205 18.1543 35.0329 22.3102C27.8609 26.466 25.415 35.6477 29.5698 42.8181C33.7247 49.9885 42.9071 52.4322 50.0791 48.2764Z" stroke="url(#paint1_linear)" strokeWidth="0.6"/>
<path d="M51.5834 50.9308C59.2604 46.4985 61.8917 36.6837 57.4607 29.0089C53.0296 21.334 43.2141 18.7054 35.5371 23.1377C27.8601 27.57 25.2288 37.3848 29.6599 45.0596C34.091 52.7345 43.9065 55.3631 51.5834 50.9308Z" stroke="url(#paint2_linear)" strokeWidth="0.6"/>
<defs>
<linearGradient id="paint0_linear" x1="1.76204" y1="0.999985" x2="96.3599" y2="20.9846" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint1_linear" x1="2.73637" y1="1.48534" x2="95.1113" y2="21.0161" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint2_linear" x1="3.70122" y1="1.96678" x2="93.8892" y2="21.0474" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
</defs>
</svg>
);
}
export function CirclesIcon({ className = "" }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 78 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="39" cy="44" r="30" stroke="url(#paint0_linear)" strokeWidth="0.6"/>
<circle cx="39" cy="44" r="25" stroke="url(#paint1_linear)" strokeWidth="0.6"/>
<circle cx="39" cy="44" r="20" stroke="url(#paint2_linear)" strokeWidth="0.6"/>
<circle cx="39" cy="44" r="15" stroke="url(#paint3_linear)" strokeWidth="0.6"/>
<circle cx="39" cy="44" r="10" stroke="url(#paint4_linear)" strokeWidth="0.6"/>
<defs>
<linearGradient id="paint0_linear" x1="9" y1="14" x2="69" y2="74" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint1_linear" x1="14" y1="19" x2="64" y2="69" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint2_linear" x1="19" y1="24" x2="59" y2="64" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint3_linear" x1="24" y1="29" x2="54" y2="59" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint4_linear" x1="29" y1="34" x2="49" y2="54" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
</defs>
</svg>
);
}
export function ExpandIcon({ className = "" }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 78 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M45.74 40.8109C51.6726 37.3857 53.7055 29.8003 50.2807 23.8683C46.8559 17.9363 39.2702 15.9042 33.3376 19.3294C27.405 22.7546 25.3721 30.3401 28.7969 36.2721C32.2217 42.2041 39.8074 44.2361 45.74 40.8109Z" stroke="url(#paint0_linear)" strokeWidth="0.6"/>
<path d="M48.5691 45.7111C55.2842 41.8341 57.5856 33.2485 53.7094 26.5346C49.8331 19.8208 41.2471 17.521 34.5319 21.398C27.8168 25.275 25.5154 33.8606 29.3916 40.5745C33.2679 47.2883 41.8539 49.5881 48.5691 45.7111Z" stroke="url(#paint1_linear)" strokeWidth="0.6"/>
<defs>
<linearGradient id="paint0_linear" x1="1.76204" y1="0.999985" x2="96.3599" y2="20.9846" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
<linearGradient id="paint1_linear" x1="3.70122" y1="1.96678" x2="93.8892" y2="21.0474" gradientUnits="userSpaceOnUse"><stop stopColor="#8258C8"/><stop offset="0.315" stopColor="#6766C8"/><stop offset="1" stopColor="#2C84C8"/></linearGradient>
</defs>
</svg>
);
}

26
components/shared/icons/SearchIcon.tsx Normal file
View File

@@ -0,0 +1,26 @@
export function SearchIcon({ className = "" }: { className?: string }) {
return (
<svg
className={className}
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="7"
cy="7"
r="5.5"
stroke="currentColor"
strokeWidth="1.5"
/>
<path
d="M11 11L14.5 14.5"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
/>
</svg>
);
}