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>
|
||||
|
||||
Reference in New Issue
Block a user