update home page
This commit is contained in:
@@ -4,47 +4,44 @@ export function BenefitsGridSection() {
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-white px-[20px] pb-[60px] md:pb-[100px]">
|
||||
<div className="mx-auto max-w-[1260px]">
|
||||
|
||||
<div className="grid grid-cols-1 gap-[30px] md:grid-cols-3">
|
||||
|
||||
{/* Card 1 */}
|
||||
<div className="flex flex-col gap-[20px] rounded-[25px] border border-aiero-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2">
|
||||
<h4 className="text-[22px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)]">
|
||||
<div className="flex flex-col gap-[20px] rounded-[25px] border border-tenext-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2">
|
||||
<h4 className="text-[22px] font-bold leading-[1.3] text-tenext-dark font-[var(--font-sora)]">
|
||||
AI-Powered Marketing & Personalization
|
||||
</h4>
|
||||
<ul className="flex flex-col gap-[15px] mt-[10px]">
|
||||
<li className="flex items-start gap-[10px] text-[16px] text-aiero-text-muted">
|
||||
<span className="mt-[5px] h-[6px] w-[6px] rounded-full bg-aiero-accent-teal shrink-0"></span>
|
||||
<li className="flex items-start gap-[10px] text-[16px] text-tenext-text-muted">
|
||||
<span className="mt-[5px] h-[6px] w-[6px] rounded-full bg-tenext-accent-teal shrink-0"></span>
|
||||
Hyper-personalized recommendations
|
||||
</li>
|
||||
<li className="flex items-start gap-[10px] text-[16px] text-aiero-text-muted">
|
||||
<span className="mt-[5px] h-[6px] w-[6px] rounded-full bg-aiero-accent-teal shrink-0"></span>
|
||||
<li className="flex items-start gap-[10px] text-[16px] text-tenext-text-muted">
|
||||
<span className="mt-[5px] h-[6px] w-[6px] rounded-full bg-tenext-accent-teal shrink-0"></span>
|
||||
AI-driven ad targeting & optimization
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Card 2 */}
|
||||
<div className="flex flex-col gap-[20px] rounded-[25px] border border-aiero-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2">
|
||||
<h4 className="text-[22px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)]">
|
||||
<div className="flex flex-col gap-[20px] rounded-[25px] border border-tenext-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2">
|
||||
<h4 className="text-[22px] font-bold leading-[1.3] text-tenext-dark font-[var(--font-sora)]">
|
||||
Seamless AI integration for your business success
|
||||
</h4>
|
||||
<p className="text-[16px] leading-[1.6] text-aiero-text-muted mt-[10px]">
|
||||
Seamless integration with existing systems and platforms & Scalable and flexible architecture
|
||||
<p className="text-[16px] leading-[1.6] text-tenext-text-muted mt-[10px]">
|
||||
Seamless integration with existing systems and platforms &
|
||||
Scalable and flexible architecture
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 3 (OpenAI Logo) */}
|
||||
<div className="flex items-center justify-center rounded-[25px] border border-aiero-card-border bg-[#F8F9FA] p-[40px] transition-transform duration-300 hover:-translate-y-2">
|
||||
<img
|
||||
src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/openai-logo-1.png"
|
||||
alt="OpenAI Logo"
|
||||
<div className="flex items-center justify-center rounded-[25px] border border-tenext-card-border bg-[#F8F9FA] p-[40px] transition-transform duration-300 hover:-translate-y-2">
|
||||
<img
|
||||
src="/images/tenext/openai-logo-1.png"
|
||||
alt="OpenAI Logo"
|
||||
className="w-[180px] h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -5,21 +5,22 @@ import { SectionHeading } from "@/components/shared/SectionHeading";
|
||||
const blogPosts = [
|
||||
{
|
||||
title: "How to Build a Custom AI Model for Your Business",
|
||||
image: "https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/portrait-confident-man.jpg", // Placeholder
|
||||
image: "/images/tenext/portrait-confident-man.jpg",
|
||||
category: "AI Technology",
|
||||
date: "March 15, 2025",
|
||||
link: "/blog/custom-ai-model",
|
||||
},
|
||||
{
|
||||
title: "The Future of Machine Learning in Enterprise",
|
||||
image: "https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2025/02/Group-18301.jpg", // Placeholder
|
||||
image: "/images/tenext/Group-18301.jpg",
|
||||
category: "Machine Learning",
|
||||
date: "April 2, 2025",
|
||||
link: "/blog/machine-learning-enterprise",
|
||||
},
|
||||
{
|
||||
title: "Ethics in AI: What You Need to Know",
|
||||
image: "https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/3d-woman-shape-glowing-with-bright-holographic-colors-1-min.png", // Placeholder
|
||||
image:
|
||||
"/images/tenext/3d-woman-shape-glowing-with-bright-holographic-colors-1-min.png",
|
||||
category: "AI Ethics",
|
||||
date: "April 10, 2025",
|
||||
link: "/blog/ethics-in-ai",
|
||||
@@ -32,36 +33,39 @@ export function BlogSection() {
|
||||
<div className="mx-auto max-w-[1260px]">
|
||||
<div className="mb-[60px] flex flex-col items-center text-center">
|
||||
<SectionHeading
|
||||
subtitle="blog"
|
||||
title="Exploring the world of artificial intelligence with Aiero blogging"
|
||||
titleClassName="max-w-[800px] text-aiero-dark"
|
||||
tag="blog"
|
||||
title="Exploring the world of artificial intelligence with tenext blogging"
|
||||
titleClassName="max-w-[800px] text-tenext-dark"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-[30px] md:grid-cols-2 lg:grid-cols-3">
|
||||
{blogPosts.map((post, index) => (
|
||||
<div key={index} className="group flex flex-col overflow-hidden rounded-[25px] border border-aiero-card-border bg-white transition-shadow duration-300 hover:shadow-xl">
|
||||
<div
|
||||
key={index}
|
||||
className="group flex flex-col overflow-hidden rounded-[25px] border border-tenext-card-border bg-white transition-shadow duration-300 hover:shadow-xl"
|
||||
>
|
||||
<div className="relative h-[250px] w-full overflow-hidden">
|
||||
<img
|
||||
src={post.image}
|
||||
alt={post.title}
|
||||
className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
<img
|
||||
src={post.image}
|
||||
alt={post.title}
|
||||
className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute left-[20px] top-[20px] rounded-full bg-white px-[15px] py-[5px] text-[12px] font-bold tracking-wide text-aiero-dark uppercase font-[var(--font-sora)]">
|
||||
<div className="absolute left-[20px] top-[20px] rounded-full bg-white px-[15px] py-[5px] text-[12px] font-bold tracking-wide text-tenext-dark uppercase font-[var(--font-sora)]">
|
||||
{post.category}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col p-[30px]">
|
||||
<div className="mb-[15px] text-[14px] text-aiero-text-muted">
|
||||
<div className="mb-[15px] text-[14px] text-tenext-text-muted">
|
||||
{post.date}
|
||||
</div>
|
||||
<h4 className="mb-[20px] text-[22px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)] transition-colors group-hover:text-aiero-accent-teal">
|
||||
<h4 className="mb-[20px] text-[22px] font-bold leading-[1.3] text-tenext-dark font-[var(--font-sora)] transition-colors group-hover:text-tenext-accent-teal">
|
||||
<Link href={post.link}>{post.title}</Link>
|
||||
</h4>
|
||||
<div className="mt-auto">
|
||||
<Link
|
||||
href={post.link}
|
||||
className="inline-flex items-center gap-[10px] text-[15px] font-bold text-aiero-dark font-[var(--font-sora)] hover:text-aiero-accent-teal"
|
||||
<Link
|
||||
href={post.link}
|
||||
className="inline-flex items-center gap-[10px] text-[15px] font-bold text-tenext-dark font-[var(--font-sora)] hover:text-tenext-accent-teal"
|
||||
>
|
||||
Read more
|
||||
<ArrowUpRight className="h-[18px] w-[18px]" />
|
||||
|
||||
@@ -6,25 +6,25 @@ import { RevealOnView } from "@/components/shared/RevealOnView";
|
||||
|
||||
const socialIcons = [
|
||||
{
|
||||
src: "/images/aiero/messenger-logo-1.png",
|
||||
src: "/images/tenext/messenger-logo-1.png",
|
||||
alt: "Messenger",
|
||||
width: 57,
|
||||
height: 59,
|
||||
},
|
||||
{
|
||||
src: "/images/aiero/skype-logo.png",
|
||||
src: "/images/tenext/skype-logo.png",
|
||||
alt: "Skype",
|
||||
width: 56,
|
||||
height: 57,
|
||||
},
|
||||
{
|
||||
src: "/images/aiero/telegram-symbol-1.png",
|
||||
src: "/images/tenext/telegram-symbol-1.png",
|
||||
alt: "Telegram",
|
||||
width: 59,
|
||||
height: 58,
|
||||
},
|
||||
{
|
||||
src: "/images/aiero/discord-1.png",
|
||||
src: "/images/tenext/discord-1.png",
|
||||
alt: "Discord",
|
||||
width: 54,
|
||||
height: 54,
|
||||
@@ -35,136 +35,134 @@ 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-[1fr_1fr_0.73fr]">
|
||||
|
||||
{/* Card 1 */}
|
||||
<RevealOnView delay={0}>
|
||||
<div className="aiero-card group relative flex h-full flex-col justify-between overflow-hidden rounded-[25px] bg-aiero-card-purple p-[40px_35px_45px_35px] lg:p-[50px_45px_50px_45px]">
|
||||
<Image
|
||||
src="/images/aiero/assistant-artificial-intelligence-min.png"
|
||||
alt=""
|
||||
className="pointer-events-none absolute right-[-10px] top-[-10px] h-auto w-[150px] object-contain object-right-top transition-transform duration-500 group-hover:scale-105 lg:w-[190px]"
|
||||
width={220}
|
||||
height={274}
|
||||
/>
|
||||
|
||||
<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-aiero-teal hover:text-aiero-teal">
|
||||
Solutions
|
||||
</span>
|
||||
<span className="rounded-[15px] border border-white px-[20px] py-[5px] text-[12px] text-white transition-colors hover:border-aiero-teal hover:text-aiero-teal">
|
||||
Plugins
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mt-[66px] max-w-[460px] lg:mt-[110px]">
|
||||
<CardHeading
|
||||
title="Transform customer support with intelligent AI chatbots for seamless and effortless service"
|
||||
titleClassName="text-white"
|
||||
wrapperClassName="mb-0"
|
||||
<div className="tenext-card group relative flex h-full flex-col justify-between overflow-hidden rounded-[25px] bg-tenext-card-purple p-[40px_35px_45px_35px] lg:p-[50px_45px_50px_45px]">
|
||||
<Image
|
||||
src="/images/tenext/assistant-artificial-intelligence-min.png"
|
||||
alt=""
|
||||
className="pointer-events-none absolute right-[-10px] top-[-10px] h-auto w-[150px] object-contain object-right-top transition-transform duration-500 group-hover:scale-105 lg:w-[190px]"
|
||||
width={220}
|
||||
height={274}
|
||||
/>
|
||||
|
||||
<div className="mt-[36px] flex items-center gap-[20px]">
|
||||
{socialIcons.map((icon) => (
|
||||
<Image
|
||||
key={icon.alt}
|
||||
src={icon.src}
|
||||
alt={icon.alt}
|
||||
width={icon.width}
|
||||
height={icon.height}
|
||||
className="h-auto w-auto"
|
||||
/>
|
||||
))}
|
||||
|
||||
<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-tenext-teal hover:text-tenext-teal">
|
||||
Solutions
|
||||
</span>
|
||||
<span className="rounded-[15px] border border-white px-[20px] py-[5px] text-[12px] text-white transition-colors hover:border-tenext-teal hover:text-tenext-teal">
|
||||
Plugins
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mt-[66px] max-w-[460px] lg:mt-[110px]">
|
||||
<CardHeading
|
||||
title="Transform customer support with intelligent AI chatbots for seamless and effortless service"
|
||||
titleClassName="text-white"
|
||||
wrapperClassName="mb-0"
|
||||
/>
|
||||
|
||||
<div className="mt-[36px] flex items-center gap-[20px]">
|
||||
{socialIcons.map((icon) => (
|
||||
<Image
|
||||
key={icon.alt}
|
||||
src={icon.src}
|
||||
alt={icon.alt}
|
||||
width={icon.width}
|
||||
height={icon.height}
|
||||
className="h-auto w-auto"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<IconButton />
|
||||
</div>
|
||||
|
||||
<IconButton />
|
||||
</div>
|
||||
</RevealOnView>
|
||||
|
||||
{/* Card 2 */}
|
||||
<RevealOnView delay={110}>
|
||||
<div className="aiero-card group relative flex h-full flex-col justify-between overflow-hidden rounded-[25px] bg-aiero-card-purple-2 p-[40px_35px_45px_35px] lg:p-[50px_45px_50px_45px]">
|
||||
<div className="absolute inset-0 bg-aiero-card-purple-2" />
|
||||
<div className="absolute inset-0 bg-[url('/images/aiero/c0eb2845-min.png')] bg-[length:60%] bg-right-bottom bg-no-repeat transition-transform duration-500 group-hover:scale-105" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[#454f88]/16" />
|
||||
|
||||
<div className="relative z-10 mb-[54px] max-w-[515px]">
|
||||
<div className="mb-[24px] inline-flex h-[38px] w-[38px] items-center justify-center">
|
||||
<ChartIcon className="h-full w-full text-white" />
|
||||
<div className="tenext-card group relative flex h-full flex-col justify-between overflow-hidden rounded-[25px] bg-tenext-card-purple-2 p-[40px_35px_45px_35px] lg:p-[50px_45px_50px_45px]">
|
||||
<div className="absolute inset-0 bg-tenext-card-purple-2" />
|
||||
<div className="absolute inset-0 bg-[url('/images/tenext/c0eb2845-min.png')] bg-[length:60%] bg-right-bottom bg-no-repeat transition-transform duration-500 group-hover:scale-105" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[#454f88]/16" />
|
||||
|
||||
<div className="relative z-10 mb-[54px] max-w-[515px]">
|
||||
<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="All-in-One AI solutions dashboard for smarter business insights & innovation."
|
||||
titleClassName="text-white"
|
||||
wrapperClassName="mb-[18px]"
|
||||
/>
|
||||
|
||||
<p className="max-w-[448px] text-[16px] leading-[1.85] text-white">
|
||||
Explore our comprehensive AI solutions dashboard designed to
|
||||
provide actionable business insights and drive innovation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<CardHeading
|
||||
title="All-in-One AI solutions dashboard for smarter business insights & innovation."
|
||||
titleClassName="text-white"
|
||||
wrapperClassName="mb-[18px]"
|
||||
/>
|
||||
|
||||
<p className="max-w-[448px] text-[16px] leading-[1.85] text-white">
|
||||
Explore our comprehensive AI solutions dashboard designed to
|
||||
provide actionable business insights and drive innovation
|
||||
</p>
|
||||
|
||||
<IconButton />
|
||||
</div>
|
||||
|
||||
<IconButton />
|
||||
</div>
|
||||
</RevealOnView>
|
||||
|
||||
{/* Card 3 (spans 2 columns) */}
|
||||
<RevealOnView className="md:col-span-2 xl:col-span-1" delay={220}>
|
||||
<div className="flex h-full flex-col gap-[20px]">
|
||||
|
||||
{/* Card 3 - Top half */}
|
||||
<div className="aiero-card relative flex min-h-[176px] flex-col justify-center overflow-hidden rounded-[25px] bg-aiero-card-lavender 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 items-start">
|
||||
<div>
|
||||
<Counter
|
||||
target={500}
|
||||
suffix="K+"
|
||||
numberClassName="font-[var(--font-manrope)] text-[82px] font-extrabold leading-none tracking-[-0.04em] text-transparent"
|
||||
style={{
|
||||
WebkitTextStroke: "1px rgba(255,255,255,0.16)",
|
||||
backgroundImage:
|
||||
"linear-gradient(180deg, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.06) 90%)",
|
||||
}}
|
||||
<div className="flex h-full flex-col gap-[20px]">
|
||||
{/* Card 3 - Top half */}
|
||||
<div className="tenext-card relative flex min-h-[176px] flex-col justify-center overflow-hidden rounded-[25px] bg-tenext-card-lavender 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 items-start">
|
||||
<div>
|
||||
<Counter
|
||||
target={500}
|
||||
suffix="K+"
|
||||
numberClassName="font-[var(--font-manrope)] text-[82px] font-extrabold leading-none tracking-[-0.04em] text-transparent"
|
||||
style={{
|
||||
WebkitTextStroke: "1px rgba(255,255,255,0.16)",
|
||||
backgroundImage:
|
||||
"linear-gradient(180deg, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.06) 90%)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-[4px]">
|
||||
<h4 className="font-[var(--font-manrope)] text-[16px] font-medium leading-[20px] text-white">
|
||||
Happy clients
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 3 - Bottom half */}
|
||||
<div className="tenext-card group relative flex flex-col justify-between overflow-hidden rounded-[25px] bg-tenext-card-dark p-[40px_35px_45px_35px] lg:p-[50px_45px_45px_45px]">
|
||||
<div className="absolute inset-0 bg-[url('/images/tenext/Layer_2-min.jpg')] bg-cover bg-center transition-all duration-500 group-hover:scale-105" />
|
||||
|
||||
<div className="relative z-10 mb-[26px]">
|
||||
<CardHeading
|
||||
title="Unlock your full potential with effortless OpenAI integration solutions"
|
||||
titleClassName="text-white max-w-[80%]"
|
||||
wrapperClassName="mb-0"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-[4px]">
|
||||
<h4 className="font-[var(--font-manrope)] text-[16px] font-medium leading-[20px] text-white">
|
||||
Happy clients
|
||||
</h4>
|
||||
|
||||
<div className="relative z-10">
|
||||
<Image
|
||||
src="/images/tenext/openai-logo-1.png"
|
||||
alt="OpenAI"
|
||||
width={272}
|
||||
height={71}
|
||||
className="h-auto w-[138px] lg:w-[152px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 3 - Bottom half */}
|
||||
<div className="aiero-card group relative flex flex-col justify-between overflow-hidden rounded-[25px] bg-aiero-card-dark 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-500 group-hover:scale-105"
|
||||
/>
|
||||
|
||||
<div className="relative z-10 mb-[26px]">
|
||||
<CardHeading
|
||||
title="Unlock your full potential with effortless OpenAI integration solutions"
|
||||
titleClassName="text-white max-w-[80%]"
|
||||
wrapperClassName="mb-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<Image
|
||||
src="/images/aiero/openai-logo-1.png"
|
||||
alt="OpenAI"
|
||||
width={272}
|
||||
height={71}
|
||||
className="h-auto w-[138px] lg:w-[152px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</RevealOnView>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -7,9 +7,9 @@ export function FeaturesSection() {
|
||||
<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-aiero-card-border" />
|
||||
<div className="mb-[20px] h-px w-[130px] bg-tenext-card-border" />
|
||||
<h2
|
||||
className="max-w-[700px] tracking-[-0.03em] text-white"
|
||||
className="max-w-[700px] tracking-[-0.03em] text-tenext-dark"
|
||||
style={{
|
||||
fontFamily: "var(--font-sora)",
|
||||
fontSize: "clamp(32px, 4vw, 56px)",
|
||||
@@ -23,101 +23,107 @@ export function FeaturesSection() {
|
||||
|
||||
{/* 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-aiero-card-border bg-aiero-card-dark p-[40px_35px_45px_35px] lg:p-[22%_9%_20%_9%]">
|
||||
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-card-dark 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"
|
||||
className="absolute inset-0 bg-[url('/images/tenext/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-aiero-text-muted">
|
||||
<span className="flex h-1 w-1 rounded-full bg-aiero-text-muted" />
|
||||
<li className="flex items-center gap-3 text-tenext-text-muted">
|
||||
<span className="flex h-1 w-1 rounded-full bg-tenext-text-muted" />
|
||||
Advanced analytics processing
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-aiero-text-muted">
|
||||
<span className="flex h-1 w-1 rounded-full bg-aiero-text-muted" />
|
||||
<li className="flex items-center gap-3 text-tenext-text-muted">
|
||||
<span className="flex h-1 w-1 rounded-full bg-tenext-text-muted" />
|
||||
Real-time data synchronization
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-aiero-text-muted">
|
||||
<span className="flex h-1 w-1 rounded-full bg-aiero-text-muted" />
|
||||
<li className="flex items-center gap-3 text-tenext-text-muted">
|
||||
<span className="flex h-1 w-1 rounded-full bg-tenext-text-muted" />
|
||||
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-aiero-card-border bg-aiero-card-dark 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 flex flex-col justify-between overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-card-dark p-[40px_35px_45px_35px] lg:p-[10%_9%_11%_9%]">
|
||||
<div className="absolute inset-0 bg-[url('/images/tenext/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
|
||||
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-aiero-text-muted">
|
||||
Cobra opaleye gray reef shark bluntnose minnow. Triggerfish bango guppy opah sunfish bluntnose knifefish upside-down catfish.
|
||||
<p className="text-[16px] text-tenext-text-muted">
|
||||
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-aiero-card-border bg-aiero-card-dark lg:col-span-2">
|
||||
<div className="relative col-span-1 overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-card-dark 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"
|
||||
className="absolute inset-0 bg-[url('/images/tenext/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-aiero-teal"
|
||||
subtitleClassName="text-tenext-teal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex flex-col gap-[40px] sm:flex-row sm:gap-[60px] lg:pl-[15%]">
|
||||
<Counter
|
||||
target={98}
|
||||
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-aiero-text-muted mt-2"
|
||||
titleClassName="font-[var(--font-sora)] text-[11px] font-semibold tracking-[0.18em] uppercase text-tenext-text-muted 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-aiero-text-muted mt-2"
|
||||
titleClassName="font-[var(--font-sora)] text-[11px] font-semibold tracking-[0.18em] uppercase text-tenext-text-muted mt-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -6,18 +6,18 @@ export function HeroSection() {
|
||||
<section className="relative px-5 py-5">
|
||||
{/* Scroll Down button — vertical, left side */}
|
||||
<div className="scroll-widget absolute left-0 top-[40%] z-20 hidden xl:block">
|
||||
<ScrollDown />
|
||||
<ScrollDown />
|
||||
</div>
|
||||
|
||||
{/* Hero container with background */}
|
||||
<div
|
||||
className="relative overflow-hidden rounded-[25px] bg-aiero-dark"
|
||||
className="relative overflow-hidden rounded-[25px] bg-tenext-dark"
|
||||
style={{
|
||||
minHeight: "min(858px, calc(100vw * 0.447))",
|
||||
padding: "14.3% 0 8.1% 0",
|
||||
}}
|
||||
>
|
||||
<HeroImageScene imageSrc="/images/aiero/home-9-top-bg-min.jpg" />
|
||||
<HeroImageScene imageSrc="/images/tenext/home-9-top-bg-min.jpg" />
|
||||
|
||||
{/* Hero content */}
|
||||
<div className="relative z-10 w-full px-[12.7vw]">
|
||||
@@ -37,7 +37,10 @@ export function HeroSection() {
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<div className="hero-reveal max-w-[660px]" style={{ animationDelay: "760ms" }}>
|
||||
<div
|
||||
className="hero-reveal max-w-[660px]"
|
||||
style={{ animationDelay: "760ms" }}
|
||||
>
|
||||
<p className="text-[16px] font-semibold leading-[1.9] text-white">
|
||||
Mummichog paradise fish! Triggerfish bango guppy opah sunfish
|
||||
bluntnose knifefish upside-down catfish cobia spookfish convict
|
||||
@@ -46,17 +49,26 @@ export function HeroSection() {
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="hero-reveal mt-[42px]" style={{ animationDelay: "940ms" }}>
|
||||
<div
|
||||
className="hero-reveal mt-[42px]"
|
||||
style={{ animationDelay: "940ms" }}
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="aiero-button aiero-button-solid inline-flex items-center gap-2 rounded-[25px] border border-aiero-red bg-aiero-red px-[30px] py-[14px] text-[16px] text-white transition-all hover:-translate-y-0.5 hover:border-aiero-red-hover hover:bg-aiero-red-hover hover:shadow-[0_15px_30px_rgba(239,100,100,0.28)]"
|
||||
className="tenext-button tenext-button-solid inline-flex items-center gap-2 rounded-[25px] border border-tenext-red bg-tenext-red px-[30px] py-[14px] text-[16px] text-white transition-all hover:-translate-y-0.5 hover:border-tenext-red-hover hover:bg-tenext-red-hover hover:shadow-[0_15px_30px_rgba(239,100,100,0.28)]"
|
||||
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"/>
|
||||
<path
|
||||
d="M1 11L11 1M11 1H3M11 1V9"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span className="button-inner" />
|
||||
</a>
|
||||
|
||||
@@ -6,22 +6,26 @@ export function HowItWorksSection() {
|
||||
{
|
||||
number: "01",
|
||||
title: "Neurons and Layers",
|
||||
description: "A neural network consists of interconnected nodes called neurons. Neurons are organized into layers.",
|
||||
description:
|
||||
"A neural network consists of interconnected nodes called neurons. Neurons are organized into layers.",
|
||||
},
|
||||
{
|
||||
number: "02",
|
||||
title: "Activation Function",
|
||||
description: "Each neuron applies an activation function to the weighted sum of its inputs and produces an output",
|
||||
description:
|
||||
"Each neuron applies an activation function to the weighted sum of its inputs and produces an output",
|
||||
},
|
||||
{
|
||||
number: "03",
|
||||
title: "Feedforward Process",
|
||||
description: "The inputs are multiplied by their respective weights, summed up, and passed through the activation function.",
|
||||
description:
|
||||
"The inputs are multiplied by their respective weights, summed up, and passed through the activation function.",
|
||||
},
|
||||
{
|
||||
number: "04",
|
||||
title: "Activation Function",
|
||||
description: "The inputs are multiplied by their respective weights, summed up, and passed through the activation function.",
|
||||
title: "Backpropagation",
|
||||
description:
|
||||
"The inputs are multiplied by their respective weights, summed up, and passed through the activation function.",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -30,30 +34,30 @@ export function HowItWorksSection() {
|
||||
<div className="mx-auto max-w-[1260px]">
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-[30px] mb-[60px]">
|
||||
<SectionHeading
|
||||
subtitle="how it works"
|
||||
tag="how it works"
|
||||
title="Neural networks are a fundamental component of Artificial Intelligence (AI) systems"
|
||||
titleClassName="max-w-[700px] text-aiero-dark"
|
||||
titleClassName="max-w-[700px] text-tenext-dark"
|
||||
/>
|
||||
<div className="flex gap-[15px]">
|
||||
<button className="flex h-[50px] w-[50px] items-center justify-center rounded-full border border-aiero-card-border text-aiero-dark transition-colors hover:bg-aiero-card-border">
|
||||
<button className="flex h-[50px] w-[50px] items-center justify-center rounded-full border border-tenext-card-border text-tenext-dark transition-colors hover:bg-tenext-card-border">
|
||||
<ArrowLeft size={20} />
|
||||
</button>
|
||||
<button className="flex h-[50px] w-[50px] items-center justify-center rounded-full border border-aiero-card-border text-aiero-dark transition-colors hover:bg-aiero-card-border">
|
||||
<button className="flex h-[50px] w-[50px] items-center justify-center rounded-full border border-tenext-card-border text-tenext-dark transition-colors hover:bg-tenext-card-border">
|
||||
<ArrowRight size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[30px]">
|
||||
<div className="flex flex-col">
|
||||
{steps.map((step, index) => (
|
||||
<div key={index} className="flex flex-col border-t border-aiero-card-border pt-[30px]">
|
||||
<div className="text-[50px] font-bold text-transparent font-[var(--font-sora)]" style={{ WebkitTextStroke: "1px #3F3F3F" }}>
|
||||
{step.number}
|
||||
<div key={index} className="flex flex-col">
|
||||
<div className="flex flex-wrap items-center gap-[15px] rounded-[15px] bg-gradient-to-r from-tenext-blue to-tenext-purple-start px-[25px] py-[14px] text-white">
|
||||
<span className="text-[14px] font-bold">{step.number}</span>
|
||||
<span className="text-[18px] font-bold font-[var(--font-sora)]">
|
||||
{step.title}
|
||||
</span>
|
||||
</div>
|
||||
<h6 className="mt-[20px] mb-[15px] text-[20px] font-bold text-aiero-dark font-[var(--font-sora)]">
|
||||
{step.title}
|
||||
</h6>
|
||||
<p className="text-[16px] leading-[1.6] text-aiero-text-muted">
|
||||
<p className="mt-[20px] mb-[25px] max-w-[720px] text-[16px] leading-[1.6] text-tenext-text-muted">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -3,20 +3,29 @@ interface MarqueeStripProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function MarqueeStrip({
|
||||
export function MarqueeStrip({
|
||||
text = "Artificial Intelligence",
|
||||
className = ""
|
||||
className = "",
|
||||
}: MarqueeStripProps) {
|
||||
const marqueeItems = Array.from({ length: 6 });
|
||||
|
||||
return (
|
||||
<div className={`relative z-10 mx-[-5px] mb-[-20px] mt-0 overflow-hidden bg-gradient-to-r from-aiero-teal to-aiero-blue py-[42px] ${className}`} style={{ transform: "rotate(-2.07deg)" }}>
|
||||
<div
|
||||
className={`relative z-10 mx-[-5px] mb-[-20px] mt-0 overflow-hidden bg-gradient-to-r from-tenext-teal to-tenext-blue py-[42px] ${className}`}
|
||||
style={{ transform: "rotate(-2.07deg)" }}
|
||||
>
|
||||
<div className="marquee-track flex w-max whitespace-nowrap">
|
||||
{[0, 1].map((track) => (
|
||||
<div key={track} className="flex shrink-0 items-center">
|
||||
{marqueeItems.map((_, i) => (
|
||||
<div key={`${track}-${i}`} className="flex items-center gap-8 pr-8">
|
||||
<span className="marquee-text text-white" style={{ fontFamily: "var(--font-sora)" }}>
|
||||
<div
|
||||
key={`${track}-${i}`}
|
||||
className="flex items-center gap-8 pr-8"
|
||||
>
|
||||
<span
|
||||
className="marquee-text text-white"
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
<span className="flex h-3 w-3 rounded-full bg-white opacity-50" />
|
||||
|
||||
@@ -5,7 +5,6 @@ export function MetricsSection() {
|
||||
<section className="bg-white px-[20px] py-[60px] md:py-[100px]">
|
||||
<div className="mx-auto max-w-[1260px]">
|
||||
<div className="grid grid-cols-1 gap-[50px] md:grid-cols-2 md:gap-[80px]">
|
||||
|
||||
{/* Left Metric */}
|
||||
<div className="flex flex-col gap-[20px]">
|
||||
<Counter
|
||||
@@ -14,10 +13,10 @@ export function MetricsSection() {
|
||||
numberClassName="text-[60px] md:text-[80px] font-bold leading-none text-transparent gradient-text-purple font-[var(--font-sora)]"
|
||||
title=""
|
||||
/>
|
||||
<h3 className="text-[28px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)]">
|
||||
<h3 className="text-[28px] font-bold leading-[1.3] text-tenext-dark font-[var(--font-sora)]">
|
||||
Happy & satisfied customers
|
||||
</h3>
|
||||
<p className="text-[16px] leading-[1.8] text-aiero-text-muted mt-[10px]">
|
||||
<p className="text-[16px] leading-[1.8] text-tenext-text-muted mt-[10px]">
|
||||
Achieved a 95% customer satisfaction rate across all AI solutions.
|
||||
</p>
|
||||
</div>
|
||||
@@ -31,14 +30,14 @@ export function MetricsSection() {
|
||||
numberClassName="text-[60px] md:text-[80px] font-bold leading-none text-transparent gradient-text-purple font-[var(--font-sora)]"
|
||||
title=""
|
||||
/>
|
||||
<h3 className="text-[28px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)]">
|
||||
Earns with our Aiero product
|
||||
<h3 className="text-[28px] font-bold leading-[1.3] text-tenext-dark font-[var(--font-sora)]">
|
||||
Earns with our tenext product
|
||||
</h3>
|
||||
<p className="text-[16px] leading-[1.8] text-aiero-text-muted mt-[10px]">
|
||||
Delivered over $150 billion in cost savings for clients through optimized AI solutions.
|
||||
<p className="text-[16px] leading-[1.8] text-tenext-text-muted mt-[10px]">
|
||||
Delivered over $150 billion in cost savings for clients through
|
||||
optimized AI solutions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -19,7 +19,7 @@ export function Navbar() {
|
||||
|
||||
return (
|
||||
<header
|
||||
className={`aiero-navbar z-30 mx-auto grid h-[100px] max-w-[2520px] grid-cols-[280px_1fr_360px] items-center px-[34px] transition-[background-color,border-radius,box-shadow,transform] duration-500 ${
|
||||
className={`tenext-navbar z-30 mx-auto grid h-[100px] max-w-[2520px] grid-cols-[280px_1fr_360px] items-center px-[34px] transition-[background-color,border-radius,box-shadow,transform] duration-500 ${
|
||||
isSticky
|
||||
? "fixed left-5 right-5 top-0 rounded-b-[25px] bg-[#111111] shadow-[0_12px_35px_rgba(0,0,0,0.18)]"
|
||||
: "relative bg-transparent"
|
||||
@@ -27,7 +27,7 @@ export function Navbar() {
|
||||
>
|
||||
<div className="flex items-center gap-[64px]">
|
||||
<button
|
||||
className="navbar-reveal grid h-6 w-6 grid-cols-2 gap-[5px] text-white transition-colors hover:text-aiero-teal"
|
||||
className="navbar-reveal grid h-6 w-6 grid-cols-2 gap-[5px] text-white transition-colors hover:text-tenext-teal"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<span className="h-[7px] w-[7px] rounded-[2px] border-2 border-current" />
|
||||
@@ -37,10 +37,14 @@ export function Navbar() {
|
||||
</button>
|
||||
|
||||
{/* Logo */}
|
||||
<a href="#" className="navbar-reveal flex items-center" style={{ animationDelay: "120ms" }}>
|
||||
<a
|
||||
href="#"
|
||||
className="navbar-reveal flex items-center"
|
||||
style={{ animationDelay: "120ms" }}
|
||||
>
|
||||
<Image
|
||||
src="/images/aiero/logo-dark.png"
|
||||
alt="Aiero"
|
||||
src="/images/tenext/logo-dark.png"
|
||||
alt="tenext"
|
||||
width={109.5}
|
||||
height={19.5}
|
||||
className="h-auto w-auto"
|
||||
@@ -50,7 +54,10 @@ export function Navbar() {
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="hidden items-center justify-center gap-[11px] lg:flex" aria-label="Primary navigation">
|
||||
<nav
|
||||
className="hidden items-center justify-center gap-[11px] lg:flex"
|
||||
aria-label="Primary navigation"
|
||||
>
|
||||
{navigationData.map((item, index) => (
|
||||
<div
|
||||
key={item.label}
|
||||
@@ -61,28 +68,38 @@ export function Navbar() {
|
||||
>
|
||||
<a
|
||||
href={item.href}
|
||||
className={`nav-link-swap flex h-10 items-center rounded-[10px] px-[21px] text-[13px] font-bold uppercase leading-none text-white transition-colors hover:bg-aiero-dark ${
|
||||
item.label === "Home" ? "bg-aiero-dark" : ""
|
||||
className={`nav-link-swap flex h-10 items-center rounded-[10px] px-[21px] text-[13px] font-bold uppercase leading-none text-white transition-colors hover:bg-tenext-dark ${
|
||||
item.label === "Home" ? "bg-tenext-dark" : ""
|
||||
}`}
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
<span className="text-active">{item.label}</span>
|
||||
<span aria-hidden>{item.label}</span>
|
||||
{item.children && (
|
||||
<svg className="ml-[12px] h-[5px] w-[5px] opacity-90" viewBox="0 0 5 5" fill="none">
|
||||
<path d="M4.35 0.9L3.75 4.05L0.65 3.45" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<svg
|
||||
className="ml-[12px] h-[5px] w-[5px] opacity-90"
|
||||
viewBox="0 0 5 5"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M4.35 0.9L3.75 4.05L0.65 3.45"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.1"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</a>
|
||||
|
||||
{/* Dropdown */}
|
||||
{item.children && openDropdown === item.label && (
|
||||
<div className="absolute left-0 top-full z-50 min-w-[286px] origin-top rounded-[20px] border border-aiero-card-border bg-[#111111] px-[45px] py-[30px] shadow-2xl">
|
||||
<div className="absolute left-0 top-full z-50 min-w-[286px] origin-top rounded-[20px] border border-tenext-card-border bg-[#111111] px-[45px] py-[30px] shadow-2xl">
|
||||
{item.children.map((child, childIndex) => (
|
||||
<a
|
||||
key={child.label}
|
||||
href={child.href}
|
||||
className="dropdown-reveal block py-[10px] pr-5 text-[14px] font-medium text-white/80 transition-all hover:pl-5 hover:text-aiero-teal"
|
||||
className="dropdown-reveal block py-[10px] pr-5 text-[14px] font-medium text-white/80 transition-all hover:pl-5 hover:text-tenext-teal"
|
||||
style={{
|
||||
animationDelay: `${childIndex * 45}ms`,
|
||||
fontFamily: "var(--font-sora)",
|
||||
@@ -98,26 +115,43 @@ export function Navbar() {
|
||||
</nav>
|
||||
|
||||
{/* Right Icons */}
|
||||
<div className="navbar-reveal flex items-center justify-end gap-[10px]" style={{ animationDelay: "620ms" }}>
|
||||
<button className="hidden p-[8px] text-white transition-colors hover:text-aiero-teal md:block" aria-label="Search">
|
||||
<div
|
||||
className="navbar-reveal flex items-center justify-end gap-[10px]"
|
||||
style={{ animationDelay: "620ms" }}
|
||||
>
|
||||
<button
|
||||
className="hidden p-[8px] text-white transition-colors hover:text-tenext-teal md:block"
|
||||
aria-label="Search"
|
||||
>
|
||||
<SearchIcon className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
className="hidden items-center gap-[8px] p-[8px] text-[13px] font-bold uppercase leading-none text-white transition-colors hover:text-aiero-teal md:flex"
|
||||
className="hidden items-center gap-[8px] p-[8px] text-[13px] font-bold uppercase leading-none text-white transition-colors hover:text-tenext-teal 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"/>
|
||||
<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 min-w-[188px] justify-center rounded-full px-[24px] py-[21px] text-[16px] font-semibold leading-none text-white"
|
||||
className="tenext-button tenext-button-gradient-border min-w-[188px] justify-center rounded-full px-[24px] py-[21px] text-[16px] font-semibold leading-none text-white"
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
Get in Touch
|
||||
|
||||
@@ -1,24 +1,28 @@
|
||||
import { AieroButton } from "@/components/shared/AieroButton";
|
||||
import { tenextButton as TenextButton } 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";
|
||||
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-aiero-dark uppercase tracking-[0.1em]"
|
||||
className="tenext-subheading mb-[16px] text-tenext-dark uppercase tracking-[0.1em]"
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
[ possibilities ]
|
||||
</span>
|
||||
|
||||
|
||||
<h2
|
||||
className="mb-[24px] max-w-[500px] tracking-[-0.03em] text-aiero-dark"
|
||||
className="mb-[24px] max-w-[500px] tracking-[-0.03em] text-tenext-dark"
|
||||
style={{
|
||||
fontFamily: "var(--font-dm-sans)",
|
||||
fontSize: "clamp(32px, 4vw, 56px)",
|
||||
@@ -28,18 +32,22 @@ export function PossibilitiesSection() {
|
||||
>
|
||||
Explore limitless possibilities with our intelligent solutions
|
||||
</h2>
|
||||
|
||||
<p className="mb-[40px] max-w-[480px] text-[16px] leading-[1.8] text-aiero-text-muted">
|
||||
AIERO is a leading AI agency committed to transforming businesses through cutting-edge artificial intelligence solutions. We specialize in delivering tailored AI strategies that drive innovation, optimize processes, and unlock new opportunities for growth.
|
||||
|
||||
<p className="mb-[40px] max-w-[480px] text-[16px] leading-[1.8] text-tenext-text-muted">
|
||||
tenext is a leading AI agency committed to transforming businesses
|
||||
through cutting-edge artificial intelligence solutions. We
|
||||
specialize in delivering tailored AI strategies that drive
|
||||
innovation, optimize processes, and unlock new opportunities for
|
||||
growth.
|
||||
</p>
|
||||
|
||||
<AieroButton
|
||||
|
||||
<TenextButton
|
||||
variant="gradient-border"
|
||||
className="rounded-[25px] px-[35px] py-[15px] text-[15px] font-medium"
|
||||
showArrow={true}
|
||||
>
|
||||
Explore more
|
||||
</AieroButton>
|
||||
</TenextButton>
|
||||
|
||||
<div className="mt-[80px]">
|
||||
<Counter
|
||||
@@ -48,12 +56,13 @@ export function PossibilitiesSection() {
|
||||
numberClassName="text-[60px] md:text-[100px] font-extrabold leading-none font-[var(--font-manrope)] text-transparent"
|
||||
style={{
|
||||
WebkitTextStroke: "1px #E2D7F8",
|
||||
backgroundImage: "linear-gradient(180deg, rgba(226, 215, 248, 0.44) 0%, rgba(226, 215, 248, 0.06) 90%)",
|
||||
backgroundImage:
|
||||
"linear-gradient(180deg, rgba(226, 215, 248, 0.44) 0%, rgba(226, 215, 248, 0.06) 90%)",
|
||||
backgroundClip: "text",
|
||||
WebkitBackgroundClip: "text",
|
||||
}}
|
||||
title="AI Solutions for our clients"
|
||||
titleClassName="font-[var(--font-manrope)] text-[16px] font-bold leading-[1.4] text-aiero-dark max-w-[120px]"
|
||||
titleClassName="font-[var(--font-manrope)] text-[16px] font-bold leading-[1.4] text-tenext-dark max-w-[120px]"
|
||||
layout="row-reverse"
|
||||
gap="30px"
|
||||
/>
|
||||
@@ -91,7 +100,6 @@ export function PossibilitiesSection() {
|
||||
theme="light"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -1,28 +1,29 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export function TinkerSection() {
|
||||
return (
|
||||
<section className="relative px-[20px] py-[60px] md:py-[100px] overflow-hidden">
|
||||
<div className="mx-auto flex max-w-[1340px] flex-col gap-[50px] lg:flex-row lg:items-center lg:gap-0">
|
||||
|
||||
{/* Left Column - Images */}
|
||||
<div className="relative flex w-full flex-col lg:mt-[30px] lg:w-[22%]">
|
||||
|
||||
{/* Background Glow (elementor-absolute) */}
|
||||
<div className="absolute left-0 top-0 z-0 pointer-events-none min-[576px]:left-[-40vw] min-[576px]:top-[-19.252vw]">
|
||||
<img
|
||||
src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2025/02/Group-18433.svg"
|
||||
alt=""
|
||||
<Image
|
||||
src="/images/tenext/Group-18433.png"
|
||||
alt=""
|
||||
width={1283}
|
||||
height={1471}
|
||||
className="h-auto w-auto max-w-[100vw] object-contain opacity-80"
|
||||
aria-hidden="true"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Main Vector Image */}
|
||||
<div className="relative z-10 min-[576px]:ml-[-26vw]">
|
||||
<img
|
||||
src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2025/01/Vector-13.png"
|
||||
alt="Neural Network Visualization"
|
||||
<Image
|
||||
src="/images/tenext/Vector-13.png"
|
||||
alt="Neural Network Visualization"
|
||||
width={670}
|
||||
height={694}
|
||||
className="w-full h-auto max-w-[800px] object-contain"
|
||||
@@ -33,8 +34,8 @@ export function TinkerSection() {
|
||||
{/* Right Column - Text & Partners */}
|
||||
<div className="relative z-10 flex w-full flex-col lg:w-[78%]">
|
||||
<div className="min-[576px]:mr-[-4%]">
|
||||
<h2
|
||||
className="mb-[60px] text-aiero-dark tracking-[-0.03em]"
|
||||
<h2
|
||||
className="mb-[60px] text-tenext-dark tracking-[-0.03em]"
|
||||
style={{
|
||||
fontFamily: "var(--font-dm-sans)",
|
||||
fontSize: "clamp(36px, 4.5vw, 58px)",
|
||||
@@ -42,30 +43,42 @@ export function TinkerSection() {
|
||||
lineHeight: 1.1,
|
||||
}}
|
||||
>
|
||||
Tinker with a <span className="gradient-text-purple">Neural Network right here</span> in your browser. Don’t worry, you can’t break it. We Promise.
|
||||
Tinker with a{" "}
|
||||
<span className="gradient-text-purple">
|
||||
Neural Network right here
|
||||
</span>{" "}
|
||||
in your browser. Don't worry, you can't break it. We Promise.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Partners row */}
|
||||
<div className="flex flex-wrap items-center justify-start gap-x-[40px] gap-y-[30px]">
|
||||
<img
|
||||
src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/partners-1.png"
|
||||
alt="Partner 1"
|
||||
<Image
|
||||
src="/images/tenext/partners-1.png"
|
||||
alt="Partner 1"
|
||||
width={140}
|
||||
height={40}
|
||||
className="h-auto w-[140px] object-contain"
|
||||
/>
|
||||
<img
|
||||
src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/partners-2.png"
|
||||
alt="Partner 2"
|
||||
<Image
|
||||
src="/images/tenext/partners-2.png"
|
||||
alt="Partner 2"
|
||||
width={130}
|
||||
height={40}
|
||||
className="h-auto w-[130px] object-contain"
|
||||
/>
|
||||
<img
|
||||
src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/partners-3.png"
|
||||
alt="Partner 3"
|
||||
<Image
|
||||
src="/images/tenext/partners-3.png"
|
||||
alt="Partner 3"
|
||||
width={100}
|
||||
height={40}
|
||||
className="h-auto w-[100px] object-contain"
|
||||
/>
|
||||
<img
|
||||
src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/partners-4.png"
|
||||
alt="Partner 4"
|
||||
<Image
|
||||
src="/images/tenext/partners-4.png"
|
||||
alt="Partner 4"
|
||||
width={140}
|
||||
height={40}
|
||||
className="h-auto w-[140px] object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@ import { PageContainer } from "@/components/shared/PageContainer";
|
||||
export function WOWSection() {
|
||||
return (
|
||||
<section className="relative z-20 px-[20px]">
|
||||
<div className="relative z-20 mx-auto max-w-[1340px] overflow-hidden rounded-t-[20px] bg-aiero-dark pt-[30px] pb-[60px] md:pt-[40px] md:pb-[80px]">
|
||||
<div className="relative z-20 mx-auto max-w-[1340px] overflow-hidden rounded-t-[20px] bg-tenext-dark pt-[30px] pb-[60px] md:pt-[40px] md:pb-[80px]">
|
||||
<PageContainer>
|
||||
<div className="grid grid-cols-1 gap-[40px] lg:grid-cols-2 lg:gap-[60px]">
|
||||
<div className="flex flex-col justify-between">
|
||||
@@ -30,7 +30,7 @@ export function WOWSection() {
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="/images/aiero/home-9-img.png"
|
||||
src="/images/tenext/home-9-img.png"
|
||||
alt="Aiiero"
|
||||
width={632}
|
||||
height={158}
|
||||
@@ -59,7 +59,7 @@ export function WOWSection() {
|
||||
<div className="mt-[40px] md:mt-[60px]">
|
||||
<Link
|
||||
href="/services"
|
||||
className="aiero-button aiero-button-gradient-border group rounded-full px-[35px] py-[15px] font-[var(--font-sora)] text-[15px] font-semibold tracking-wide text-white transition-all"
|
||||
className="tenext-button tenext-button-gradient-border group rounded-full px-[35px] py-[15px] font-[var(--font-sora)] text-[15px] font-semibold tracking-wide text-white transition-all"
|
||||
>
|
||||
<span className="button-inner" />
|
||||
Explore more
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
import { PageContainer } from "@/components/shared/PageContainer";
|
||||
import { SectionContainer } from "@/components/shared/SectionContainer";
|
||||
|
||||
@@ -9,7 +8,7 @@ export function AboutIntroSection() {
|
||||
{/* Left: Text Content */}
|
||||
<div className="flex flex-col items-start justify-center pt-5">
|
||||
<span
|
||||
className="aiero-subheading mb-4 text-aiero-teal"
|
||||
className="tenext-subheading mb-4 text-tenext-teal"
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
about
|
||||
@@ -23,28 +22,28 @@ export function AboutIntroSection() {
|
||||
lineHeight: 1.1,
|
||||
}}
|
||||
>
|
||||
Awesome things in working with Aiero WordPress theme
|
||||
Awesome things in working with tenext WordPress theme
|
||||
</h2>
|
||||
<p className="mb-8 text-base leading-relaxed text-aiero-text-muted">
|
||||
<p className="mb-8 text-base leading-relaxed text-tenext-text-muted">
|
||||
At XXLando, we are a leading AI services provider dedicated to
|
||||
delivering innovative solutions that leverage artificial
|
||||
intelligence to transform businesses.
|
||||
</p>
|
||||
<p className="text-base leading-relaxed text-aiero-text-muted">
|
||||
<p className="text-base leading-relaxed text-tenext-text-muted">
|
||||
Our team of experts specializes in developing cutting-edge AI
|
||||
technologies, such as machine learning, natural language
|
||||
processing, and computer vision, to help our clients streamline
|
||||
operations, enhance decision-making.
|
||||
technologies, such as machine learning, natural language processing,
|
||||
and computer vision, to help our clients streamline operations,
|
||||
enhance decision-making.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Right: Images */}
|
||||
<div className="relative">
|
||||
<div className="relative aspect-[4/5] w-full overflow-hidden rounded-[25px] bg-aiero-card-dark">
|
||||
<div className="relative aspect-[4/5] w-full overflow-hidden rounded-[25px] bg-tenext-card-dark">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
style={{
|
||||
backgroundImage: "url(/images/aiero/home-9-img.png)",
|
||||
backgroundImage: "url(/images/tenext/home-9-img.png)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
import { PageContainer } from "@/components/shared/PageContainer";
|
||||
import { SectionContainer } from "@/components/shared/SectionContainer";
|
||||
import { Counter } from "@/components/shared/Counter";
|
||||
@@ -9,19 +8,19 @@ export function MissionSection() {
|
||||
<PageContainer className="grid grid-cols-1 gap-12 lg:grid-cols-[1fr_1.2fr] lg:gap-[60px] xl:gap-[100px]">
|
||||
{/* Left: Images */}
|
||||
<div className="relative aspect-square w-full md:aspect-[4/3] lg:aspect-square">
|
||||
<div className="absolute bottom-0 left-0 h-[85%] w-[85%] overflow-hidden rounded-[25px] bg-aiero-card-dark">
|
||||
<div className="absolute bottom-0 left-0 h-[85%] w-[85%] overflow-hidden rounded-[25px] bg-tenext-card-dark">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
style={{
|
||||
backgroundImage: "url(/images/aiero/home-9-img.png)",
|
||||
backgroundImage: "url(/images/tenext/home-9-img.png)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute right-0 top-0 h-[50%] w-[50%] overflow-hidden rounded-[25px] border-[8px] border-aiero-dark bg-aiero-card-purple">
|
||||
<div className="absolute right-0 top-0 h-[50%] w-[50%] overflow-hidden rounded-[25px] border-[8px] border-tenext-dark bg-tenext-card-purple">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
style={{
|
||||
backgroundImage: "url(/images/aiero/home-9-img.png)",
|
||||
backgroundImage: "url(/images/tenext/home-9-img.png)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -30,7 +29,7 @@ export function MissionSection() {
|
||||
{/* Right: Text and Stats */}
|
||||
<div className="flex flex-col items-start justify-center pt-5">
|
||||
<span
|
||||
className="aiero-subheading mb-4 text-aiero-teal"
|
||||
className="tenext-subheading mb-4 text-tenext-teal"
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
Mission
|
||||
@@ -46,19 +45,19 @@ export function MissionSection() {
|
||||
>
|
||||
we create a professional product using artificial intelligence
|
||||
</h2>
|
||||
<p className="mb-10 text-base leading-relaxed text-aiero-text-muted">
|
||||
<p className="mb-10 text-base leading-relaxed text-tenext-text-muted">
|
||||
Certainly, crafting a clear and inspiring mission statement is
|
||||
essential for a development company. It should reflect your
|
||||
company's values, purpose, and commitment to innovation.
|
||||
</p>
|
||||
|
||||
<div className="w-full rounded-[25px] border border-aiero-card-border bg-aiero-card-dark p-8 md:p-10">
|
||||
<div className="w-full rounded-[25px] border border-tenext-card-border bg-tenext-card-dark p-8 md:p-10">
|
||||
<Counter
|
||||
target={1250}
|
||||
suffix="+"
|
||||
numberClassName="text-[60px] md:text-[80px] font-bold leading-none font-[var(--font-manrope)] gradient-text-purple"
|
||||
title="Created projects"
|
||||
titleClassName="font-[var(--font-sora)] text-[11px] font-semibold tracking-[0.18em] uppercase text-aiero-text-muted mt-2"
|
||||
titleClassName="font-[var(--font-sora)] text-[11px] font-semibold tracking-[0.18em] uppercase text-tenext-text-muted mt-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,27 +3,34 @@
|
||||
import { PageContainer } from "@/components/shared/PageContainer";
|
||||
import { SectionContainer } from "@/components/shared/SectionContainer";
|
||||
import { SectionHeading } from "@/components/shared/SectionHeading";
|
||||
import { tenextButton as TenextButton } from "@/components/shared/AieroButton";
|
||||
import { Counter } from "@/components/shared/Counter";
|
||||
|
||||
const teamMembers = [
|
||||
{
|
||||
name: "Dan Smith",
|
||||
role: "Manager",
|
||||
image: "/images/aiero/portrait-confident-man.jpg",
|
||||
},
|
||||
{
|
||||
name: "Alan Begham",
|
||||
role: "CEO",
|
||||
image: "/images/aiero/waist-up-shot-handsome-calm.jpg",
|
||||
},
|
||||
{
|
||||
name: "Brandon Adams",
|
||||
role: "HR",
|
||||
image: "/images/aiero/confident-ginger-man-with-trendy.jpg",
|
||||
image: "/images/tenext/waist-up-shot-handsome-calm.jpg",
|
||||
},
|
||||
{
|
||||
name: "Arthur Dowson",
|
||||
role: "AI Programmer",
|
||||
image: "/images/aiero/funny-curious-man-makes.jpg",
|
||||
image: "/images/tenext/funny-curious-man-makes.jpg",
|
||||
},
|
||||
{
|
||||
name: "Dan Smith",
|
||||
role: "Manager",
|
||||
image: "/images/tenext/portrait-confident-man.jpg",
|
||||
},
|
||||
{
|
||||
name: "Brandon Adams",
|
||||
role: "HR",
|
||||
image: "/images/tenext/confident-ginger-man-with-trendy.jpg",
|
||||
},
|
||||
{
|
||||
name: "Alan Begham",
|
||||
role: "CEO Neuro",
|
||||
image: "/images/tenext/waist-up-shot-handsome-calm.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -31,24 +38,42 @@ export function TeamSection() {
|
||||
return (
|
||||
<SectionContainer paddingY="lg">
|
||||
<PageContainer>
|
||||
<div className="mb-12 flex flex-col items-center justify-between gap-6 md:flex-row md:items-end">
|
||||
<SectionHeading
|
||||
tag="team"
|
||||
title="The Neural Network experts: uniting talent for intelligent solutions"
|
||||
titleClassName="text-white max-w-[600px]"
|
||||
/>
|
||||
<div className="flex flex-col items-start gap-4 md:items-end">
|
||||
<p className="max-w-[200px] text-[16px] text-aiero-text-muted md:text-right">
|
||||
Awesome team members + 0 Explore more
|
||||
</p>
|
||||
<div className="columns-1 gap-6 sm:columns-2 lg:columns-4">
|
||||
<div className="mb-6 flex break-inside-avoid flex-col">
|
||||
<SectionHeading
|
||||
tag="team"
|
||||
title="The Neural Network experts: uniting talent for intelligent solutions"
|
||||
titleClassName="text-tenext-dark"
|
||||
/>
|
||||
<div className="mt-[40px]">
|
||||
<Counter
|
||||
target={500}
|
||||
prefix="+"
|
||||
numberClassName="text-[60px] font-extrabold leading-none font-[var(--font-manrope)] text-transparent"
|
||||
style={{
|
||||
WebkitTextStroke: "1px #E2D7F8",
|
||||
backgroundImage:
|
||||
"linear-gradient(180deg, rgba(226, 215, 248, 0.44) 0%, rgba(226, 215, 248, 0.06) 90%)",
|
||||
backgroundClip: "text",
|
||||
WebkitBackgroundClip: "text",
|
||||
}}
|
||||
title="Awesome team members"
|
||||
titleClassName="mt-[15px] text-[16px] font-bold text-tenext-dark"
|
||||
/>
|
||||
</div>
|
||||
<TenextButton
|
||||
variant="simple"
|
||||
className="mt-[25px] text-[15px] font-medium text-tenext-dark"
|
||||
showArrow={true}
|
||||
>
|
||||
Explore more
|
||||
</TenextButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{teamMembers.map((member, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="group relative overflow-hidden rounded-[25px] bg-aiero-card-dark"
|
||||
className="group relative mb-6 break-inside-avoid overflow-hidden rounded-[25px] bg-tenext-card-dark"
|
||||
>
|
||||
<div className="relative aspect-[3/4] w-full">
|
||||
<img
|
||||
@@ -57,7 +82,7 @@ export function TeamSection() {
|
||||
className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).src =
|
||||
"/images/aiero/home-9-img.png"; // Fallback image
|
||||
"/images/tenext/home-9-img.png";
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-80" />
|
||||
@@ -69,7 +94,9 @@ export function TeamSection() {
|
||||
>
|
||||
{member.name}
|
||||
</h4>
|
||||
<p className="text-[14px] text-aiero-teal">{member.role}</p>
|
||||
<p className="text-[14px] text-tenext-teal">
|
||||
/ {member.role} /
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -7,21 +7,36 @@ export function PricingSection() {
|
||||
{
|
||||
name: "Basic",
|
||||
target: "Great for private individuals",
|
||||
features: ["1 User", "Unlimited Projects", "Download prototypes", "1 Gb workspace"],
|
||||
features: [
|
||||
"1 User",
|
||||
"Unlimited Projects",
|
||||
"Download prototypes",
|
||||
"1 Gb workspace",
|
||||
],
|
||||
price: "Free",
|
||||
isPopular: false,
|
||||
},
|
||||
{
|
||||
name: "Premium",
|
||||
target: "14 days free period",
|
||||
features: ["15 Users", "Unlimited Projects", "Download prototypes", "15 Gb workspace"],
|
||||
features: [
|
||||
"15 Users",
|
||||
"Unlimited Projects",
|
||||
"Download prototypes",
|
||||
"15 Gb workspace",
|
||||
],
|
||||
price: "$ 59 /mo",
|
||||
isPopular: true,
|
||||
},
|
||||
{
|
||||
name: "Unlimited",
|
||||
target: "Great for private individuals",
|
||||
features: ["100 Users", "Unlimited Projects", "Download prototypes", "100 Gb workspace"],
|
||||
features: [
|
||||
"100 Users",
|
||||
"Unlimited Projects",
|
||||
"Download prototypes",
|
||||
"100 Gb workspace",
|
||||
],
|
||||
price: "$ 199 /mo",
|
||||
isPopular: false,
|
||||
},
|
||||
@@ -43,24 +58,46 @@ export function PricingSection() {
|
||||
<div
|
||||
key={i}
|
||||
className={`relative flex flex-col overflow-hidden rounded-[25px] border ${
|
||||
plan.isPopular ? "border-aiero-teal bg-aiero-card-dark" : "border-aiero-card-border bg-aiero-dark"
|
||||
plan.isPopular
|
||||
? "border-tenext-teal bg-tenext-card-dark"
|
||||
: "border-tenext-card-border bg-tenext-dark"
|
||||
} p-10`}
|
||||
>
|
||||
{plan.isPopular && (
|
||||
<div className="absolute right-6 top-6 rounded-full bg-aiero-teal px-4 py-1 text-[12px] font-bold uppercase text-aiero-dark" style={{ fontFamily: "var(--font-sora)" }}>
|
||||
<div
|
||||
className="absolute right-6 top-6 rounded-full bg-tenext-teal px-4 py-1 text-[12px] font-bold uppercase text-tenext-dark"
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
Popular
|
||||
</div>
|
||||
)}
|
||||
<h3 className="mb-2 text-[24px] font-bold text-white" style={{ fontFamily: "var(--font-dm-sans)" }}>
|
||||
<h3
|
||||
className="mb-2 text-[24px] font-bold text-white"
|
||||
style={{ fontFamily: "var(--font-dm-sans)" }}
|
||||
>
|
||||
{plan.name}
|
||||
</h3>
|
||||
<p className="mb-8 text-[14px] text-aiero-text-muted">{plan.target}</p>
|
||||
<p className="mb-8 text-[14px] text-tenext-text-muted">
|
||||
{plan.target}
|
||||
</p>
|
||||
|
||||
<ul className="mb-10 flex flex-col gap-4">
|
||||
{plan.features.map((feat, j) => (
|
||||
<li key={j} className="flex items-center gap-3 text-white">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" className="text-aiero-teal">
|
||||
<path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
className="text-tenext-teal"
|
||||
>
|
||||
<path
|
||||
d="M20 6L9 17l-5-5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
{feat}
|
||||
</li>
|
||||
@@ -68,15 +105,18 @@ export function PricingSection() {
|
||||
</ul>
|
||||
|
||||
<div className="mt-auto">
|
||||
<div className="mb-6 text-[36px] font-bold text-white" style={{ fontFamily: "var(--font-dm-sans)" }}>
|
||||
<div
|
||||
className="mb-6 text-[36px] font-bold text-white"
|
||||
style={{ fontFamily: "var(--font-dm-sans)" }}
|
||||
>
|
||||
{plan.price}
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
className={`flex w-full items-center justify-center rounded-[12px] py-4 text-[16px] font-bold transition-all ${
|
||||
plan.isPopular
|
||||
? "bg-aiero-teal text-aiero-dark hover:bg-white"
|
||||
: "border border-aiero-card-border text-white hover:border-aiero-teal hover:text-aiero-teal"
|
||||
? "bg-tenext-teal text-tenext-dark hover:bg-white"
|
||||
: "border border-tenext-card-border text-white hover:border-tenext-teal hover:text-tenext-teal"
|
||||
}`}
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
|
||||
@@ -27,11 +27,11 @@ export function ServiceCardsGrid() {
|
||||
{services.map((svc, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="group relative flex h-full min-h-[340px] flex-col justify-between overflow-hidden rounded-[25px] border border-aiero-card-border bg-aiero-card-dark p-10 transition-all hover:bg-aiero-card-purple"
|
||||
className="group relative flex h-full min-h-[340px] flex-col justify-between overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-card-dark p-10 transition-all hover:bg-tenext-card-purple"
|
||||
>
|
||||
<div className="mb-6 h-[60px] w-[60px] rounded-full bg-aiero-card-purple2 p-4">
|
||||
<div className="mb-6 h-[60px] w-[60px] rounded-full bg-tenext-card-purple2 p-4">
|
||||
<img
|
||||
src="/images/aiero/3x.png"
|
||||
src="/images/tenext/3x.png"
|
||||
alt="Icon"
|
||||
className="h-full w-full object-contain"
|
||||
onError={(e) => {
|
||||
@@ -43,15 +43,15 @@ export function ServiceCardsGrid() {
|
||||
|
||||
<div>
|
||||
<h4
|
||||
className="mb-4 text-[22px] font-bold text-white transition-colors group-hover:text-aiero-teal"
|
||||
className="mb-4 text-[22px] font-bold text-white transition-colors group-hover:text-tenext-teal"
|
||||
style={{ fontFamily: "var(--font-dm-sans)" }}
|
||||
>
|
||||
{svc.title}
|
||||
</h4>
|
||||
<p className="text-[16px] text-aiero-text-muted">{svc.desc}</p>
|
||||
<p className="text-[16px] text-tenext-text-muted">{svc.desc}</p>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 right-0 flex h-[60px] w-[60px] items-center justify-center rounded-tl-[25px] bg-white text-aiero-dark transition-all duration-300 group-hover:bg-aiero-teal group-hover:text-white">
|
||||
<div className="absolute bottom-0 right-0 flex h-[60px] w-[60px] items-center justify-center rounded-tl-[25px] bg-white text-tenext-dark transition-all duration-300 group-hover:bg-tenext-teal group-hover:text-white">
|
||||
<ArrowIcon className="h-4 w-4" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -32,9 +32,21 @@ export function ServiceFeaturesSection() {
|
||||
];
|
||||
|
||||
const DefaultIcon = () => (
|
||||
<div className="flex h-full w-full items-center justify-center rounded-[18px] bg-aiero-card-purple">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" className="text-white">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<div className="flex h-full w-full items-center justify-center rounded-[18px] bg-tenext-card-purple">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
className="text-white"
|
||||
>
|
||||
<path
|
||||
d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -4,65 +4,84 @@ import { PageContainer } from "@/components/shared/PageContainer";
|
||||
import { SectionContainer } from "@/components/shared/SectionContainer";
|
||||
import { SectionHeading } from "@/components/shared/SectionHeading";
|
||||
|
||||
export function TestimonialsSection() {
|
||||
const testimonials = [
|
||||
{
|
||||
text: "Working with Aiero has been a game-changer for our business. Their AI solutions have revolutionized our operations, enabling us to automate repetitive tasks and make data-driven decisions. The level of efficiency we've achieved is unprecedented.",
|
||||
author: "David Smith",
|
||||
role: "CEO Company",
|
||||
},
|
||||
{
|
||||
text: "Aiero has been a game-changer for our business. Their AI solutions have revolutionized our operations, enabling us to automate repetitive tasks and make data-driven decisions. The level of efficiency we've achieved is unprecedented.",
|
||||
author: "Mark Dowson",
|
||||
role: "Manager",
|
||||
},
|
||||
];
|
||||
const testimonials = [
|
||||
{
|
||||
author: "Daniel Cross",
|
||||
text: "Working with tenext has been a game-changer for our business. Their AI solutions automated our repetitive tasks and let us make data-driven decisions fast.",
|
||||
},
|
||||
{
|
||||
author: "Marta Wolfe",
|
||||
text: "The onboarding was smooth and the support team responded within a day for every request we had. Genuinely impressed with the attention to detail.",
|
||||
},
|
||||
{
|
||||
author: "Rajiv Patel",
|
||||
text: "tenext's dashboard gave us actionable insights we didn't have before. Setup was fast and the documentation made customization painless.",
|
||||
},
|
||||
{
|
||||
author: "Daniel Cross",
|
||||
text: "Working with tenext has been a game-changer for our business. Their AI solutions automated our repetitive tasks and let us make data-driven decisions fast.",
|
||||
},
|
||||
{
|
||||
author: "Elena Novak",
|
||||
text: "Excellent customer support from the whole team. All of our integration questions were resolved within a day.",
|
||||
},
|
||||
{
|
||||
author: "Sam Okafor",
|
||||
text: "A perfect solution in every respect. The team is especially strong on support — we recommend it without hesitation.",
|
||||
},
|
||||
{
|
||||
author: "Priya Chandran",
|
||||
text: "Fast, reliable support and an API that's genuinely easy to customize. Great work all around.",
|
||||
},
|
||||
{
|
||||
author: "Marta Wolfe",
|
||||
text: "The onboarding was smooth and the support team responded within a day for every request we had. Genuinely impressed with the attention to detail.",
|
||||
},
|
||||
{
|
||||
author: "Tom Bennett",
|
||||
text: "Great platform and even better support. The team always found a solution even when the request was out of scope.",
|
||||
},
|
||||
{
|
||||
author: "Lucia Fernandez",
|
||||
text: "High quality documentation and a codebase that's genuinely easy to extend. Our developers picked it up in a day.",
|
||||
},
|
||||
{
|
||||
author: "Rajiv Patel",
|
||||
text: "tenext's dashboard gave us actionable insights we didn't have before. Setup was fast and the documentation made customization painless.",
|
||||
},
|
||||
{
|
||||
author: "Owen Marsh",
|
||||
text: "We evaluated several AI vendors and tenext stood out for speed of support and clarity of their onboarding process.",
|
||||
},
|
||||
];
|
||||
|
||||
export function TestimonialsSection() {
|
||||
return (
|
||||
<SectionContainer paddingY="lg" className="bg-aiero-card-dark">
|
||||
<SectionContainer paddingY="lg" className="bg-tenext-surface-muted">
|
||||
<PageContainer>
|
||||
<div className="mb-16">
|
||||
<div className="mb-12 max-w-[650px]">
|
||||
<SectionHeading
|
||||
tag="testimonials"
|
||||
title="Discover what our clients have to say about our AI solutions"
|
||||
titleClassName="text-white max-w-[650px]"
|
||||
title="User stories: hear what others love about our AI solutions"
|
||||
titleClassName="text-tenext-dark"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
||||
<div className="columns-1 gap-6 sm:columns-2 lg:columns-4">
|
||||
{testimonials.map((t, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex flex-col justify-between rounded-[25px] border border-aiero-card-border bg-[#1A1A1A] p-10 lg:p-12"
|
||||
className="mb-6 break-inside-avoid rounded-[20px] bg-white p-8"
|
||||
>
|
||||
<div className="mb-8">
|
||||
<div className="mb-6 flex gap-1 text-aiero-teal">
|
||||
{[...Array(5)].map((_, index) => (
|
||||
<svg key={index} width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[18px] leading-[1.8] text-white">"{t.text}"</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-[60px] w-[60px] overflow-hidden rounded-full bg-aiero-dark">
|
||||
<img
|
||||
src={`/images/aiero/client-${i + 1}.jpg`}
|
||||
alt={t.author}
|
||||
className="h-full w-full object-cover"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).src = "/images/aiero/home-9-img.png";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-[18px] font-bold text-white" style={{ fontFamily: "var(--font-dm-sans)" }}>
|
||||
{t.author}
|
||||
</h5>
|
||||
<p className="text-[14px] text-aiero-teal">{t.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
<h5
|
||||
className="mb-4 text-[18px] font-bold text-tenext-dark"
|
||||
style={{ fontFamily: "var(--font-dm-sans)" }}
|
||||
>
|
||||
{t.author}
|
||||
</h5>
|
||||
<p className="text-[15px] leading-[1.7] text-tenext-text-muted">
|
||||
{t.text}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
|
||||
|
||||
type ButtonVariant = "solid" | "outline" | "gradient-border" | "gradient-fill" | "simple";
|
||||
type ButtonVariant =
|
||||
| "solid"
|
||||
| "outline"
|
||||
| "gradient-border"
|
||||
| "gradient-fill"
|
||||
| "simple";
|
||||
|
||||
interface AieroButtonProps {
|
||||
interface tenextButtonProps {
|
||||
href?: string;
|
||||
variant?: ButtonVariant;
|
||||
children: React.ReactNode;
|
||||
@@ -12,7 +17,7 @@ interface AieroButtonProps {
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export function AieroButton({
|
||||
export function tenextButton({
|
||||
href = "#",
|
||||
variant = "solid",
|
||||
children,
|
||||
@@ -20,14 +25,14 @@ export function AieroButton({
|
||||
showArrow = true,
|
||||
target,
|
||||
onClick,
|
||||
}: AieroButtonProps) {
|
||||
const baseClasses = "aiero-button";
|
||||
}: tenextButtonProps) {
|
||||
const baseClasses = "tenext-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",
|
||||
solid: "tenext-button-solid",
|
||||
outline: "tenext-button-solid",
|
||||
"gradient-border": "tenext-button-gradient-border",
|
||||
"gradient-fill": "tenext-button-gradient-fill",
|
||||
simple: "",
|
||||
};
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #ffffff;
|
||||
border-top-left-radius: 30px;
|
||||
border-bottom-right-radius: 25px;
|
||||
padding: 10px 10px 0 10px;
|
||||
@@ -46,6 +46,6 @@
|
||||
}
|
||||
|
||||
.iconSlideAslant:hover .iconSlideAslantInner,
|
||||
:global(.aiero-card:hover) .iconSlideAslantInner {
|
||||
:global(.tenext-card:hover) .iconSlideAslantInner {
|
||||
transform: translate3d(12px, -12px, 0);
|
||||
}
|
||||
|
||||
@@ -19,9 +19,7 @@ export function CardHeading({
|
||||
return (
|
||||
<div className={`mb-5 ${wrapperClassName}`}>
|
||||
{subtitle && (
|
||||
<div
|
||||
className={`aiero-subheading font-sora ${subtitleClassName}`}
|
||||
>
|
||||
<div className={`tenext-subheading font-sora ${subtitleClassName}`}>
|
||||
{subtitle}
|
||||
</div>
|
||||
)}
|
||||
@@ -39,7 +37,7 @@ export function IconButton({ className = "" }: { className?: string }) {
|
||||
<div className={`${styles.iconWrapper} ${className}`}>
|
||||
<a
|
||||
href="#"
|
||||
className={`${styles.iconSlideAslant} flex h-[52px] w-[52px] items-center justify-center rounded-[15px] bg-aiero-card-dark text-white transition-all duration-300 hover:bg-aiero-teal hover:text-aiero-dark`}
|
||||
className={`${styles.iconSlideAslant} flex h-[52px] w-[52px] items-center justify-center rounded-[15px] bg-tenext-card-dark text-white transition-all duration-300 hover:bg-tenext-teal hover:text-tenext-dark`}
|
||||
aria-label="Open details"
|
||||
>
|
||||
<span className={styles.iconSlideAslantInner} aria-hidden="true">
|
||||
|
||||
@@ -30,14 +30,14 @@ export function ContactFormSection() {
|
||||
}
|
||||
|
||||
function handleChange(
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
||||
) {
|
||||
setFormState((prev) => ({ ...prev, [e.target.name]: e.target.value }));
|
||||
}
|
||||
|
||||
return (
|
||||
<SectionContainer paddingY="lg" className="bg-aiero-dark px-5">
|
||||
<div className="overflow-hidden rounded-[25px] bg-aiero-card-dark">
|
||||
<SectionContainer paddingY="lg" className="bg-tenext-dark px-5">
|
||||
<div className="overflow-hidden rounded-[25px] bg-tenext-card-dark">
|
||||
<PageContainer className="grid grid-cols-1 gap-12 py-16 md:py-20 lg:grid-cols-2 lg:gap-16 lg:py-24">
|
||||
{/* ── Left: Info column ── */}
|
||||
<div className="flex flex-col">
|
||||
@@ -58,13 +58,13 @@ export function ContactFormSection() {
|
||||
<div className="flex flex-col gap-1">
|
||||
<a
|
||||
href={`tel:${siteConfig.phoneRaw}`}
|
||||
className="text-[15px] text-aiero-text-muted transition-colors hover:text-aiero-teal"
|
||||
className="text-[15px] text-tenext-text-muted transition-colors hover:text-tenext-teal"
|
||||
>
|
||||
{siteConfig.phone}
|
||||
</a>
|
||||
<a
|
||||
href="tel:+11800234567"
|
||||
className="text-[15px] text-aiero-text-muted transition-colors hover:text-aiero-teal"
|
||||
className="text-[15px] text-tenext-text-muted transition-colors hover:text-tenext-teal"
|
||||
>
|
||||
+ (123) 1800-234-5678
|
||||
</a>
|
||||
@@ -76,7 +76,7 @@ export function ContactFormSection() {
|
||||
<h6 className="mb-3 font-sora text-sm font-semibold text-white">
|
||||
Our Location
|
||||
</h6>
|
||||
<p className="text-[15px] leading-relaxed text-aiero-text-muted">
|
||||
<p className="text-[15px] leading-relaxed text-tenext-text-muted">
|
||||
{siteConfig.address.line1}
|
||||
<br />
|
||||
{siteConfig.address.line2}
|
||||
@@ -90,7 +90,7 @@ export function ContactFormSection() {
|
||||
</h6>
|
||||
<a
|
||||
href={`mailto:${siteConfig.email}`}
|
||||
className="text-[15px] text-aiero-text-muted underline transition-colors hover:text-aiero-teal"
|
||||
className="text-[15px] text-tenext-text-muted underline transition-colors hover:text-tenext-teal"
|
||||
>
|
||||
{siteConfig.email}
|
||||
</a>
|
||||
@@ -109,7 +109,7 @@ export function ContactFormSection() {
|
||||
{/* ── Right: Form column ── */}
|
||||
<div className="rounded-[25px] bg-white p-8 md:p-10">
|
||||
<h4
|
||||
className="mb-8 text-aiero-dark"
|
||||
className="mb-8 text-tenext-dark"
|
||||
style={{
|
||||
fontFamily: "var(--font-sora)",
|
||||
fontSize: "28px",
|
||||
@@ -127,7 +127,7 @@ export function ContactFormSection() {
|
||||
placeholder="Full name"
|
||||
value={formState.fullName}
|
||||
onChange={handleChange}
|
||||
className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-aiero-dark outline-none transition-colors focus:border-aiero-teal"
|
||||
className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-tenext-dark outline-none transition-colors focus:border-tenext-teal"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
@@ -136,7 +136,7 @@ export function ContactFormSection() {
|
||||
required
|
||||
value={formState.email}
|
||||
onChange={handleChange}
|
||||
className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-aiero-dark outline-none transition-colors focus:border-aiero-teal"
|
||||
className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-tenext-dark outline-none transition-colors focus:border-tenext-teal"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
@@ -144,7 +144,7 @@ export function ContactFormSection() {
|
||||
placeholder="Subject"
|
||||
value={formState.subject}
|
||||
onChange={handleChange}
|
||||
className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-aiero-dark outline-none transition-colors focus:border-aiero-teal"
|
||||
className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-tenext-dark outline-none transition-colors focus:border-tenext-teal"
|
||||
/>
|
||||
<textarea
|
||||
name="message"
|
||||
@@ -152,11 +152,11 @@ export function ContactFormSection() {
|
||||
rows={4}
|
||||
value={formState.message}
|
||||
onChange={handleChange}
|
||||
className="resize-none rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-aiero-dark outline-none transition-colors focus:border-aiero-teal"
|
||||
className="resize-none rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-tenext-dark outline-none transition-colors focus:border-tenext-teal"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="aiero-button aiero-button-gradient-border mt-2 self-start rounded-full px-8 py-4 font-sora text-base font-semibold text-aiero-dark"
|
||||
className="tenext-button tenext-button-gradient-border mt-2 self-start rounded-full px-8 py-4 font-sora text-base font-semibold text-tenext-dark"
|
||||
>
|
||||
Send message
|
||||
<ArrowIcon className="h-3 w-3" />
|
||||
|
||||
@@ -17,7 +17,7 @@ import { PageContainer } from "@/components/shared/PageContainer";
|
||||
*/
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="bg-aiero-dark px-5 pb-10 pt-16 md:pt-20">
|
||||
<footer className="bg-tenext-dark px-5 pb-10 pt-16 md:pt-20">
|
||||
<PageContainer>
|
||||
{/* ── Top row: Logo + link columns ── */}
|
||||
<div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-[1.5fr_1fr_1fr]">
|
||||
@@ -25,7 +25,7 @@ export function Footer() {
|
||||
<div className="flex flex-col items-start gap-8">
|
||||
<Link href="/" aria-label="Home">
|
||||
<Image
|
||||
src="/images/aiero/logo-dark.png"
|
||||
src="/images/tenext/logo-dark.png"
|
||||
alt={siteConfig.name}
|
||||
width={146}
|
||||
height={26}
|
||||
@@ -57,7 +57,7 @@ export function Footer() {
|
||||
<li key={link.label}>
|
||||
<a
|
||||
href={link.href}
|
||||
className="text-[15px] text-aiero-text-muted transition-colors duration-300 hover:text-aiero-teal"
|
||||
className="text-[15px] text-tenext-text-muted transition-colors duration-300 hover:text-tenext-teal"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
@@ -76,7 +76,7 @@ export function Footer() {
|
||||
<li key={link.label}>
|
||||
<a
|
||||
href={link.href}
|
||||
className="text-[15px] text-aiero-text-muted transition-colors duration-300 hover:text-aiero-teal"
|
||||
className="text-[15px] text-tenext-text-muted transition-colors duration-300 hover:text-tenext-teal"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
@@ -87,8 +87,8 @@ export function Footer() {
|
||||
</div>
|
||||
|
||||
{/* ── Bottom bar ── */}
|
||||
<div className="mt-14 flex flex-col items-center justify-between gap-4 border-t border-aiero-card-border pt-8 md:flex-row">
|
||||
<p className="text-sm text-aiero-text-muted">
|
||||
<div className="mt-14 flex flex-col items-center justify-between gap-4 border-t border-tenext-card-border pt-8 md:flex-row">
|
||||
<p className="text-sm text-tenext-text-muted">
|
||||
{siteConfig.copyright}
|
||||
</p>
|
||||
<div className="flex gap-6">
|
||||
@@ -96,7 +96,7 @@ export function Footer() {
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className="text-sm text-aiero-text-muted transition-colors duration-300 hover:text-aiero-teal"
|
||||
className="text-sm text-tenext-text-muted transition-colors duration-300 hover:text-tenext-teal"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
|
||||
@@ -8,31 +8,35 @@ interface IconBoxProps {
|
||||
theme?: "dark" | "light";
|
||||
}
|
||||
|
||||
export function IconBox({ icon, title, description, hasBorder = true, theme = "dark" }: IconBoxProps) {
|
||||
export function IconBox({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
hasBorder = true,
|
||||
theme = "dark",
|
||||
}: IconBoxProps) {
|
||||
const isLight = theme === "light";
|
||||
|
||||
|
||||
return (
|
||||
<div className="aiero-icon-box-widget w-full">
|
||||
<div className="tenext-icon-box-widget w-full">
|
||||
<div className="icon-box-item flex flex-col items-start gap-[20px] sm:flex-row sm:gap-[40px]">
|
||||
{icon && (
|
||||
<div className="icon-container background-type-none flex h-[88px] w-[88px] shrink-0 items-center justify-center">
|
||||
<span className="icon block h-full w-full">
|
||||
{icon}
|
||||
</span>
|
||||
<span className="icon block h-full w-full">{icon}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
<div
|
||||
className={`content-container flex-1 pb-[30px] pt-[5px] ${
|
||||
hasBorder
|
||||
? isLight
|
||||
? "border-b border-gray-200"
|
||||
: "border-b border-aiero-card-border"
|
||||
hasBorder
|
||||
? isLight
|
||||
? "border-b border-gray-200"
|
||||
: "border-b border-tenext-card-border"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<h5
|
||||
className={`icon-box-title mb-[15px] ${isLight ? "text-aiero-dark" : "text-white"}`}
|
||||
className={`icon-box-title mb-[15px] ${isLight ? "text-tenext-dark" : "text-white"}`}
|
||||
style={{
|
||||
fontFamily: "var(--font-manrope)",
|
||||
fontSize: "25px",
|
||||
@@ -43,7 +47,7 @@ export function IconBox({ icon, title, description, hasBorder = true, theme = "d
|
||||
{title}
|
||||
</h5>
|
||||
<div className="icon-box-info">
|
||||
<p className="text-[16px] leading-[1.6] text-aiero-text-muted">
|
||||
<p className="text-[16px] leading-[1.6] text-tenext-text-muted">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -19,31 +19,31 @@ interface PageTitleBannerProps {
|
||||
* - Full-width rounded card with gradient background
|
||||
* - Centered "/ Title /" text
|
||||
* - Breadcrumbs bottom-left
|
||||
* - Decorative "Aiero" outline text right side
|
||||
* - Decorative "tenext" outline text right side
|
||||
* - Top-left and bottom-right rounded corner decorations
|
||||
*/
|
||||
export function PageTitleBanner({ title, breadcrumbs }: PageTitleBannerProps) {
|
||||
return (
|
||||
<div className="relative mx-5 overflow-hidden rounded-[25px] bg-aiero-dark">
|
||||
<div className="relative mx-5 overflow-hidden rounded-[25px] bg-tenext-dark">
|
||||
{/* Background image */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center opacity-80"
|
||||
style={{
|
||||
backgroundImage: "url(/images/aiero/page-top-bg-min.png)",
|
||||
backgroundImage: "url(/images/tenext/page-top-bg-min.png)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Gradient overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-aiero-dark/60" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-tenext-dark/60" />
|
||||
|
||||
{/* Top-left corner decoration */}
|
||||
<div className="absolute left-0 top-0 h-20 w-20">
|
||||
<div className="absolute left-0 top-0 h-full w-full rounded-br-[25px] bg-white" />
|
||||
<div className="absolute left-0 top-0 h-full w-full rounded-tl-[25px] bg-aiero-dark">
|
||||
<div className="absolute left-0 top-0 h-full w-full rounded-tl-[25px] bg-tenext-dark">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center opacity-80"
|
||||
style={{
|
||||
backgroundImage: "url(/images/aiero/page-top-bg-min.png)",
|
||||
backgroundImage: "url(/images/tenext/page-top-bg-min.png)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -52,11 +52,11 @@ export function PageTitleBanner({ title, breadcrumbs }: PageTitleBannerProps) {
|
||||
{/* Bottom-right corner decoration */}
|
||||
<div className="absolute bottom-0 right-0 h-20 w-20">
|
||||
<div className="absolute bottom-0 right-0 h-full w-full rounded-tl-[25px] bg-white" />
|
||||
<div className="absolute bottom-0 right-0 h-full w-full rounded-br-[25px] bg-aiero-dark">
|
||||
<div className="absolute bottom-0 right-0 h-full w-full rounded-br-[25px] bg-tenext-dark">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center opacity-80"
|
||||
style={{
|
||||
backgroundImage: "url(/images/aiero/page-top-bg-min.png)",
|
||||
backgroundImage: "url(/images/tenext/page-top-bg-min.png)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -74,23 +74,26 @@ export function PageTitleBanner({ title, breadcrumbs }: PageTitleBannerProps) {
|
||||
lineHeight: 1.1,
|
||||
}}
|
||||
>
|
||||
<span className="mr-3 text-aiero-text-muted">/</span>
|
||||
<span className="mr-3 text-tenext-text-muted">/</span>
|
||||
{title}
|
||||
<span className="ml-3 text-aiero-text-muted">/</span>
|
||||
<span className="ml-3 text-tenext-text-muted">/</span>
|
||||
</h1>
|
||||
|
||||
{/* Breadcrumbs */}
|
||||
<nav className="absolute bottom-8 left-8 md:bottom-10 md:left-12" aria-label="Breadcrumb">
|
||||
<nav
|
||||
className="absolute bottom-8 left-8 md:bottom-10 md:left-12"
|
||||
aria-label="Breadcrumb"
|
||||
>
|
||||
<ol className="flex items-center gap-2 text-sm text-white/70">
|
||||
{breadcrumbs.map((crumb, index) => (
|
||||
<li key={crumb.label} className="flex items-center gap-2">
|
||||
{index > 0 && (
|
||||
<span className="mx-1 inline-block h-1 w-1 rounded-full bg-aiero-teal" />
|
||||
<span className="mx-1 inline-block h-1 w-1 rounded-full bg-tenext-teal" />
|
||||
)}
|
||||
{index < breadcrumbs.length - 1 && crumb.href ? (
|
||||
<a
|
||||
href={crumb.href}
|
||||
className="transition-colors hover:text-aiero-teal"
|
||||
className="transition-colors hover:text-tenext-teal"
|
||||
>
|
||||
{crumb.label}
|
||||
</a>
|
||||
@@ -102,7 +105,7 @@ export function PageTitleBanner({ title, breadcrumbs }: PageTitleBannerProps) {
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
{/* Decorative vertical "Aiero" text */}
|
||||
{/* Decorative vertical "tenext" text */}
|
||||
<div
|
||||
className="absolute bottom-8 right-8 hidden select-none lg:block"
|
||||
style={{
|
||||
@@ -117,7 +120,7 @@ export function PageTitleBanner({ title, breadcrumbs }: PageTitleBannerProps) {
|
||||
WebkitTextFillColor: "transparent",
|
||||
}}
|
||||
>
|
||||
Aiero
|
||||
tenext
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,16 +5,19 @@ import { SectionContainer } from "@/components/shared/SectionContainer";
|
||||
|
||||
export function PartnerLogosSection() {
|
||||
const logos = [
|
||||
"/images/aiero/partners-1.png",
|
||||
"/images/aiero/partners-2.png",
|
||||
"/images/aiero/partners-1.png",
|
||||
"/images/aiero/partners-2.png",
|
||||
"/images/aiero/partners-1.png",
|
||||
"/images/aiero/partners-2.png",
|
||||
"/images/tenext/partners-1.png",
|
||||
"/images/tenext/partners-2.png",
|
||||
"/images/tenext/partners-1.png",
|
||||
"/images/tenext/partners-2.png",
|
||||
"/images/tenext/partners-1.png",
|
||||
"/images/tenext/partners-2.png",
|
||||
];
|
||||
|
||||
return (
|
||||
<SectionContainer paddingY="lg" className="border-t border-aiero-card-border bg-aiero-dark">
|
||||
<SectionContainer
|
||||
paddingY="lg"
|
||||
className="border-t border-tenext-card-border bg-tenext-dark"
|
||||
>
|
||||
<PageContainer className="flex flex-col items-center">
|
||||
<h3
|
||||
className="mb-16 max-w-[800px] text-center text-white"
|
||||
@@ -25,18 +28,22 @@ export function PartnerLogosSection() {
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
Tinker with a Neural Network right here in your browser. Don’t worry, you can’t break it. We Promise.
|
||||
Our trusted collaborators in progress and success
|
||||
</h3>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-8 md:gap-16 lg:gap-24 opacity-60">
|
||||
{logos.map((src, index) => (
|
||||
<div key={index} className="flex h-12 items-center justify-center grayscale transition-all hover:grayscale-0">
|
||||
<div
|
||||
key={index}
|
||||
className="flex h-12 items-center justify-center grayscale transition-all hover:grayscale-0"
|
||||
>
|
||||
<img
|
||||
src={src}
|
||||
alt={`Partner ${index + 1}`}
|
||||
className="h-full w-auto object-contain"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).src = "/images/aiero/logo-dark.png";
|
||||
(e.target as HTMLImageElement).src =
|
||||
"/images/tenext/logo-dark.png";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,45 +1,42 @@
|
||||
import { AieroButton } from "@/components/shared/AieroButton";
|
||||
import { tenextButton as TenextButton } from "@/components/shared/AieroButton";
|
||||
import { PageContainer } from "@/components/shared/PageContainer";
|
||||
|
||||
/**
|
||||
* PreFooterCTA — "It's blow your mind! Meet Neural Networks" banner.
|
||||
* PreFooterCTA — "Elevate your business with our innovative solutions" banner.
|
||||
*
|
||||
* Shared across: Home, About, Services, Contacts.
|
||||
*
|
||||
* Structure (from reference):
|
||||
* - Dark grey rounded card
|
||||
* - Large teal gradient heading
|
||||
* - "Get a Quote" button with arrow
|
||||
* - Plain white section
|
||||
* - Large dark heading, left aligned
|
||||
* - "Get in touch" text link, right aligned
|
||||
*/
|
||||
export function PreFooterCTA() {
|
||||
return (
|
||||
<section className="px-5 pb-5">
|
||||
<div className="overflow-hidden rounded-[25px] bg-aiero-card-dark">
|
||||
<PageContainer className="flex flex-col items-center gap-8 py-16 text-center md:flex-row md:justify-between md:py-20 md:text-left lg:py-24">
|
||||
{/* Heading */}
|
||||
<h2
|
||||
className="max-w-[700px]"
|
||||
style={{
|
||||
fontFamily: "var(--font-sora)",
|
||||
fontSize: "clamp(28px, 3.5vw, 48px)",
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.15,
|
||||
}}
|
||||
>
|
||||
<span className="text-white">{"It's blow your mind! "}</span>
|
||||
<span className="gradient-text-purple">Meet Neural Networks</span>
|
||||
</h2>
|
||||
<section className="bg-white px-5 py-[60px] md:py-[80px]">
|
||||
<PageContainer className="flex flex-col items-center gap-8 text-center md:flex-row md:justify-between md:text-left">
|
||||
{/* Heading */}
|
||||
<h2
|
||||
className="max-w-[700px] text-tenext-dark"
|
||||
style={{
|
||||
fontFamily: "var(--font-sora)",
|
||||
fontSize: "clamp(28px, 3.5vw, 48px)",
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.15,
|
||||
}}
|
||||
>
|
||||
Elevate your business with our innovative solutions
|
||||
</h2>
|
||||
|
||||
{/* CTA */}
|
||||
<AieroButton
|
||||
href="/contacts"
|
||||
variant="gradient-border"
|
||||
className="shrink-0 rounded-full px-8 py-4 text-base font-semibold text-white"
|
||||
>
|
||||
Get a Quote
|
||||
</AieroButton>
|
||||
</PageContainer>
|
||||
</div>
|
||||
{/* CTA */}
|
||||
<TenextButton
|
||||
href="/contacts"
|
||||
variant="simple"
|
||||
className="shrink-0 text-[15px] font-semibold text-tenext-teal"
|
||||
>
|
||||
Get in touch
|
||||
</TenextButton>
|
||||
</PageContainer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
import { ArrowIcon } from "./icons/ArrowIcon";
|
||||
|
||||
interface ScrollDownProps {
|
||||
@@ -10,7 +9,7 @@ interface ScrollDownProps {
|
||||
|
||||
/**
|
||||
* ScrollDown — interactive scroll indicator.
|
||||
* Matches original Aiero reference animation and styling.
|
||||
* Matches original tenext reference animation and styling.
|
||||
*/
|
||||
export function ScrollDown({
|
||||
href = "#scroll-down",
|
||||
@@ -23,8 +22,8 @@ export function ScrollDown({
|
||||
<a
|
||||
href={href}
|
||||
className={`inline-flex h-[78px] w-[190px] items-center justify-center gap-2 rounded-b-[25px] ${
|
||||
light ? "bg-white text-aiero-dark" : "bg-aiero-dark text-white"
|
||||
} text-[14px] font-semibold no-underline transition-all hover:text-aiero-teal hover:shadow-scroll-btn`}
|
||||
light ? "bg-white text-tenext-dark" : "bg-tenext-dark text-white"
|
||||
} text-[14px] font-semibold no-underline transition-all hover:text-tenext-teal hover:shadow-scroll-btn`}
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
{text}
|
||||
|
||||
@@ -41,7 +41,7 @@ export function SectionHeading({
|
||||
<div className={className}>
|
||||
{tag && (
|
||||
<span
|
||||
className={`aiero-subheading mb-4 text-aiero-teal ${tagClassName}`}
|
||||
className={`tenext-subheading mb-4 text-tenext-teal ${tagClassName}`}
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
{tag}
|
||||
@@ -62,7 +62,7 @@ export function SectionHeading({
|
||||
|
||||
{description && (
|
||||
<p
|
||||
className={`mt-6 text-base leading-relaxed text-aiero-text-muted ${descriptionClassName}`}
|
||||
className={`mt-6 text-base leading-relaxed text-tenext-text-muted ${descriptionClassName}`}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
|
||||
@@ -25,7 +25,7 @@ export function SocialIcons({
|
||||
rel="noopener noreferrer"
|
||||
role="listitem"
|
||||
aria-label={link.platform}
|
||||
className={`flex h-10 w-10 items-center justify-center rounded-full border border-aiero-card-border text-aiero-text-muted transition-all duration-300 hover:border-aiero-teal hover:text-aiero-teal ${iconClassName}`}
|
||||
className={`flex h-10 w-10 items-center justify-center rounded-full border border-tenext-card-border text-tenext-text-muted transition-all duration-300 hover:border-tenext-teal hover:text-tenext-teal ${iconClassName}`}
|
||||
>
|
||||
<SocialSvg icon={link.icon} />
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user