update home page
This commit is contained in:
@@ -1,123 +1,169 @@
|
||||
import Image from "next/image";
|
||||
import { CardHeading, IconButton } from "@/components/shared/CardShared";
|
||||
import { ChartIcon } from "@/components/shared/icons/ChartIcon";
|
||||
import { Counter } from "@/components/shared/Counter";
|
||||
import { RevealOnView } from "@/components/shared/RevealOnView";
|
||||
|
||||
const socialIcons = [
|
||||
{
|
||||
src: "/images/aiero/messenger-logo-1.png",
|
||||
alt: "Messenger",
|
||||
width: 57,
|
||||
height: 59,
|
||||
},
|
||||
{
|
||||
src: "/images/aiero/skype-logo.png",
|
||||
alt: "Skype",
|
||||
width: 56,
|
||||
height: 57,
|
||||
},
|
||||
{
|
||||
src: "/images/aiero/telegram-symbol-1.png",
|
||||
alt: "Telegram",
|
||||
width: 59,
|
||||
height: 58,
|
||||
},
|
||||
{
|
||||
src: "/images/aiero/discord-1.png",
|
||||
alt: "Discord",
|
||||
width: 54,
|
||||
height: 54,
|
||||
},
|
||||
];
|
||||
|
||||
export function CardsGrid() {
|
||||
return (
|
||||
<section className="px-[20px] pb-[20px]">
|
||||
<div className="grid grid-cols-1 gap-[20px] md:grid-cols-2 xl:grid-cols-4">
|
||||
<div className="grid grid-cols-1 gap-[20px] md:grid-cols-2 xl:grid-cols-[1fr_1fr_0.73fr]">
|
||||
|
||||
{/* Card 1 */}
|
||||
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] bg-[#343F78] p-[40px_35px_45px_35px] lg:p-[55px_45px_60px_45px] xl:col-span-1">
|
||||
<div
|
||||
className="absolute inset-0 bg-[url('/images/aiero/assistant-artificial-intelligence-min.png')] bg-right-top bg-no-repeat opacity-100 transition-all duration-300 hover:scale-105"
|
||||
<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-[#45D0BD] hover:text-[#45D0BD]">
|
||||
<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-[#45D0BD] hover:text-[#45D0BD]">
|
||||
<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-[60px] lg:mt-[100px]">
|
||||
<div className="relative z-10 mt-[66px] max-w-[460px] lg:mt-[110px]">
|
||||
<CardHeading
|
||||
title="Enhance operational efficiency"
|
||||
title="Transform customer support with intelligent AI chatbots for seamless and effortless service"
|
||||
titleClassName="text-white"
|
||||
wrapperClassName="mb-0"
|
||||
/>
|
||||
|
||||
<div className="mt-[44px] flex -space-x-[15px]">
|
||||
<div className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-[#E8F3FF] shadow-sm">
|
||||
<svg className="h-[24px] w-[24px]" viewBox="0 0 24 24" fill="#0084FF"><path d="M12 2C6.477 2 2 6.145 2 11.258C2 14.156 3.52 16.735 5.868 18.361V22L9.208 20.151C10.096 20.395 11.033 20.516 12 20.516C17.523 20.516 22 16.371 22 11.258C22 6.145 17.523 2 12 2Z"/></svg>
|
||||
</div>
|
||||
<div className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-[#E5F5FF] shadow-sm">
|
||||
<svg className="h-[24px] w-[24px]" viewBox="0 0 24 24" fill="#00AFF0"><path d="M11.996 22C17.519 22 22 17.523 22 12C22 6.477 17.519 2 11.996 2C6.473 2 2 6.477 2 12C2 17.523 6.473 22 11.996 22Z"/></svg>
|
||||
</div>
|
||||
<div className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-[#E5FAFF] shadow-sm">
|
||||
<svg className="h-[24px] w-[24px]" viewBox="0 0 24 24" fill="#229ED9"><path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C2 6.477 17.523 2 12 2Z"/></svg>
|
||||
</div>
|
||||
<div className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-[#EAE8FF] shadow-sm">
|
||||
<svg className="h-[24px] w-[24px]" viewBox="0 0 24 24" fill="#5865F2"><path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C2 6.477 17.523 2 12 2Z"/></svg>
|
||||
</div>
|
||||
<div 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>
|
||||
</RevealOnView>
|
||||
|
||||
{/* Card 2 */}
|
||||
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] bg-[#56619E] p-[40px_35px_45px_35px] lg:p-[45px_45px_50px_45px] xl:col-span-1">
|
||||
<div
|
||||
className="absolute inset-0 bg-[url('/images/aiero/c0eb2845-min.png')] bg-bottom bg-no-repeat transition-all duration-300 hover:scale-105"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-[#3F497F00] to-[#333D74] from-[75%] to-[100%]" />
|
||||
<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-[50px]">
|
||||
<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="Tailor algorithms to adapt and optimize processes"
|
||||
title="All-in-One AI solutions dashboard for smarter business insights & innovation."
|
||||
titleClassName="text-white"
|
||||
wrapperClassName="mb-[18px]"
|
||||
/>
|
||||
|
||||
<p className="text-[16px] text-white">
|
||||
Cobra opaleye gray reef shark bluntnose minnow.
|
||||
<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>
|
||||
|
||||
<IconButton />
|
||||
</div>
|
||||
</RevealOnView>
|
||||
|
||||
{/* Card 3 (spans 2 columns) */}
|
||||
<div className="flex flex-col gap-[20px] md:col-span-2 xl:col-span-2">
|
||||
<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="relative flex flex-col justify-center overflow-hidden rounded-[25px] bg-[#AC8DE0] p-[40px] lg:p-[45px_50px]">
|
||||
<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 md:flex-row md:items-center md:justify-between">
|
||||
<div className="relative z-10 flex flex-col items-start">
|
||||
<div>
|
||||
<Counter
|
||||
target={500}
|
||||
suffix="K+"
|
||||
numberClassName="text-[80px] font-bold leading-none font-[var(--font-manrope)] gradient-text-counter"
|
||||
style={{ backgroundImage: "linear-gradient(0deg, rgba(255,255,255,0) 15%, #FFFFFF 100%)" }}
|
||||
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-4 md:mt-0">
|
||||
<h4 className="font-[var(--font-manrope)] text-[16px] font-medium leading-[20px] text-[#F8E1E1]">
|
||||
Happy
|
||||
<br />
|
||||
clients
|
||||
<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="relative flex flex-col justify-between overflow-hidden rounded-[25px] bg-[#282828] p-[40px_35px_45px_35px] lg:p-[50px_45px_45px_45px]">
|
||||
<div className="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-300 hover:scale-105"
|
||||
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 today with the power of Aiero AI"
|
||||
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">
|
||||
<svg width="136" viewBox="0 0 100 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M26.4 13.9C26.4 11.2 25.4 9 23.5 7.4C21.6 5.8 19 5 15.7 5C12.4 5 9.8 5.8 7.9 7.4C6 9 5 11.2 5 13.9C5 16.6 6 18.8 7.9 20.4C9.8 22 12.4 22.8 15.7 22.8C19 22.8 21.6 22 23.5 20.4C25.4 18.8 26.4 16.6 26.4 13.9ZM30.7 13.9C30.7 18 29.3 21.2 26.5 23.7C23.7 26.2 19.9 27.5 15.1 27.5C10.3 27.5 6.5 26.2 3.7 23.7C0.9 21.2 -0.5 18 -0.5 13.9C-0.5 9.8 0.9 6.6 3.7 4.1C6.5 1.6 10.3 0.3 15.1 0.3C19.9 0.3 23.7 1.6 26.5 4.1C29.3 6.6 30.7 9.8 30.7 13.9ZM37.7 27V0.8H42V4.5C43.5 2 46.1 0.8 49.8 0.8C52.9 0.8 55.4 1.8 57.3 3.8C59.2 5.8 60.1 8.5 60.1 11.9V27H55.8V12.4C55.8 9.9 55.1 8.1 53.7 6.9C52.3 5.7 50.4 5.1 48 5.1C45.3 5.1 43.1 5.9 41.4 7.5C39.7 9.1 38.8 11.4 38.8 14.4V27H37.7ZM71.1 27.5C67.5 27.5 64.6 26.4 62.4 24.2C60.2 22 59.1 18.9 59.1 14.9V14.2C59.1 10.1 60.3 6.9 62.7 4.5C65.1 2.1 68.3 0.9 72.3 0.9C75.8 0.9 78.6 1.9 80.7 3.9C82.8 5.9 83.8 8.8 83.8 12.6V15.7H63.4C63.6 18.4 64.5 20.4 66.1 21.6C67.7 22.8 69.8 23.4 72.4 23.4C74.6 23.4 76.5 23 78.1 22.2C79.7 21.4 81.1 20.2 82.2 18.6L84.8 21.8C83.2 23.6 81.2 25 78.8 26C76.4 27 73.8 27.5 71.1 27.5ZM80.6 10.6C80.6 8.3 79.9 6.6 78.5 5.5C77.1 4.4 75 3.8 72.2 3.8C69.3 3.8 67 4.6 65.3 6.2C63.6 7.8 62.7 10 62.7 12.8H80.6V10.6ZM90.2 0H94.4V27H90.2V0Z" fill="white"/>
|
||||
</svg>
|
||||
<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,7 +7,7 @@ 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-[#3F3F3F]" />
|
||||
<div className="mb-[20px] h-px w-[130px] bg-aiero-card-border" />
|
||||
<h2
|
||||
className="max-w-[700px] tracking-[-0.03em] text-white"
|
||||
style={{
|
||||
@@ -25,7 +25,7 @@ export function FeaturesSection() {
|
||||
<div className="grid grid-cols-1 gap-[20px] lg:grid-cols-2">
|
||||
|
||||
{/* Card 1 - Left */}
|
||||
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] border border-[#3F3F3F] bg-[#282828] p-[40px_35px_45px_35px] lg:p-[22%_9%_20%_9%]">
|
||||
<div className="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="absolute inset-0 bg-[url('/images/aiero/home-9-img.png')] bg-bottom bg-no-repeat transition-all duration-300 hover:scale-105"
|
||||
style={{ backgroundSize: "100% auto" }}
|
||||
@@ -39,16 +39,16 @@ export function FeaturesSection() {
|
||||
/>
|
||||
|
||||
<ul className="mt-[20px] flex flex-col gap-3">
|
||||
<li className="flex items-center gap-3 text-[#87899B]">
|
||||
<span className="flex h-1 w-1 rounded-full bg-[#87899B]" />
|
||||
<li className="flex items-center gap-3 text-aiero-text-muted">
|
||||
<span className="flex h-1 w-1 rounded-full bg-aiero-text-muted" />
|
||||
Advanced analytics processing
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-[#87899B]">
|
||||
<span className="flex h-1 w-1 rounded-full bg-[#87899B]" />
|
||||
<li className="flex items-center gap-3 text-aiero-text-muted">
|
||||
<span className="flex h-1 w-1 rounded-full bg-aiero-text-muted" />
|
||||
Real-time data synchronization
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-[#87899B]">
|
||||
<span className="flex h-1 w-1 rounded-full bg-[#87899B]" />
|
||||
<li className="flex items-center gap-3 text-aiero-text-muted">
|
||||
<span className="flex h-1 w-1 rounded-full bg-aiero-text-muted" />
|
||||
Secure API endpoints
|
||||
</li>
|
||||
</ul>
|
||||
@@ -58,7 +58,7 @@ export function FeaturesSection() {
|
||||
</div>
|
||||
|
||||
{/* Card 2 - Right */}
|
||||
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] border border-[#3F3F3F] bg-[#282828] p-[40px_35px_45px_35px] lg:p-[10%_9%_11%_9%]">
|
||||
<div className="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"
|
||||
/>
|
||||
@@ -74,7 +74,7 @@ export function FeaturesSection() {
|
||||
title="Data privacy and security with robust measures"
|
||||
titleClassName="text-white"
|
||||
/>
|
||||
<p className="text-[16px] text-[#87899B]">
|
||||
<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>
|
||||
</div>
|
||||
@@ -83,7 +83,7 @@ export function FeaturesSection() {
|
||||
</div>
|
||||
|
||||
{/* Card 3 - Bottom Full Width */}
|
||||
<div className="relative col-span-1 overflow-hidden rounded-[25px] border border-[#3F3F3F] bg-[#282828] lg:col-span-2">
|
||||
<div className="relative col-span-1 overflow-hidden rounded-[25px] border border-aiero-card-border bg-aiero-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"
|
||||
style={{ backgroundSize: "83% auto" }}
|
||||
@@ -95,24 +95,24 @@ export function FeaturesSection() {
|
||||
subtitle="Technology"
|
||||
title="Tailored solutions specifically to your needs"
|
||||
titleClassName="text-white"
|
||||
subtitleClassName="text-[#45D0BD]"
|
||||
subtitleClassName="text-aiero-teal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-[40px] sm:flex-row sm:gap-[60px] lg:pl-[15%]">
|
||||
<Counter
|
||||
target={99}
|
||||
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-[#87899B] mt-2"
|
||||
titleClassName="font-[var(--font-sora)] text-[11px] font-semibold tracking-[0.18em] uppercase text-aiero-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-[#87899B] mt-2"
|
||||
titleClassName="font-[var(--font-sora)] text-[11px] font-semibold tracking-[0.18em] uppercase text-aiero-text-muted mt-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
214
components/aiero/HeroImageScene.tsx
Normal file
214
components/aiero/HeroImageScene.tsx
Normal file
@@ -0,0 +1,214 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { Mesh, Plane, Program, Renderer, Texture } from "ogl";
|
||||
|
||||
const vertex = `
|
||||
attribute vec2 uv;
|
||||
attribute vec2 position;
|
||||
varying vec2 vUv;
|
||||
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = vec4(position, 0.0, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const fragment = `
|
||||
precision highp float;
|
||||
|
||||
uniform sampler2D tMap;
|
||||
uniform vec2 uResolution;
|
||||
uniform vec2 uImageResolution;
|
||||
uniform vec2 uPointer;
|
||||
uniform vec2 uVelocity;
|
||||
uniform float uStrength;
|
||||
varying vec2 vUv;
|
||||
|
||||
vec2 coverUv(vec2 uv, vec2 screen, vec2 image) {
|
||||
float screenRatio = screen.x / screen.y;
|
||||
float imageRatio = image.x / image.y;
|
||||
vec2 scale = vec2(1.0);
|
||||
|
||||
if (screenRatio > imageRatio) {
|
||||
scale.y = imageRatio / screenRatio;
|
||||
} else {
|
||||
scale.x = screenRatio / imageRatio;
|
||||
}
|
||||
|
||||
return (uv - 0.5) * scale + 0.5;
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec2 uv = coverUv(vUv, uResolution, uImageResolution);
|
||||
|
||||
vec2 pointerDelta = uv - uPointer;
|
||||
float distanceFromPointer = length(pointerDelta);
|
||||
float cursorMask = smoothstep(0.36, 0.0, distanceFromPointer);
|
||||
float innerMask = smoothstep(0.16, 0.0, distanceFromPointer);
|
||||
vec2 pull = normalize(pointerDelta + 0.0001) * innerMask * 0.0035;
|
||||
vec2 distortion = ((uVelocity * 0.075) - pull) * cursorMask * uStrength;
|
||||
|
||||
uv += distortion;
|
||||
|
||||
float red = texture2D(tMap, uv + distortion * 0.12).r;
|
||||
float green = texture2D(tMap, uv).g;
|
||||
float blue = texture2D(tMap, uv - distortion * 0.1).b;
|
||||
gl_FragColor = vec4(red, green, blue, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
interface HeroImageSceneProps {
|
||||
imageSrc: string;
|
||||
}
|
||||
|
||||
export function HeroImageScene({ imageSrc }: HeroImageSceneProps) {
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
const pointerRef = useRef({ x: 0.5, y: 0.5 });
|
||||
const velocityRef = useRef({ x: 0, y: 0 });
|
||||
const strengthRef = useRef(0);
|
||||
const lastMoveTimeRef = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
const root = rootRef.current;
|
||||
if (!root) return;
|
||||
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
if (reduceMotion.matches) return;
|
||||
|
||||
const renderer = new Renderer({
|
||||
alpha: true,
|
||||
antialias: true,
|
||||
dpr: Math.min(window.devicePixelRatio, 2),
|
||||
});
|
||||
const gl = renderer.gl;
|
||||
root.appendChild(gl.canvas);
|
||||
|
||||
gl.canvas.className = "absolute inset-0 h-full w-full";
|
||||
gl.clearColor(0, 0, 0, 0);
|
||||
|
||||
const texture = new Texture(gl, {
|
||||
generateMipmaps: false,
|
||||
minFilter: gl.LINEAR,
|
||||
magFilter: gl.LINEAR,
|
||||
});
|
||||
|
||||
const image = new Image();
|
||||
image.src = imageSrc;
|
||||
image.onload = () => {
|
||||
texture.image = image;
|
||||
texture.needsUpdate = true;
|
||||
};
|
||||
|
||||
const program = new Program(gl, {
|
||||
vertex,
|
||||
fragment,
|
||||
uniforms: {
|
||||
tMap: { value: texture },
|
||||
uResolution: { value: [1, 1] },
|
||||
uImageResolution: { value: [1883, 855] },
|
||||
uPointer: { value: [0.5, 0.5] },
|
||||
uVelocity: { value: [0, 0] },
|
||||
uStrength: { value: 0 },
|
||||
},
|
||||
transparent: true,
|
||||
});
|
||||
|
||||
const mesh = new Mesh(gl, {
|
||||
geometry: new Plane(gl, { width: 2, height: 2 }),
|
||||
program,
|
||||
});
|
||||
|
||||
let animationFrame = 0;
|
||||
let width = 1;
|
||||
let height = 1;
|
||||
|
||||
const resize = () => {
|
||||
const rect = root.getBoundingClientRect();
|
||||
width = Math.max(1, rect.width);
|
||||
height = Math.max(1, rect.height);
|
||||
renderer.setSize(width, height);
|
||||
program.uniforms.uResolution.value = [width, height];
|
||||
};
|
||||
|
||||
const onPointerMove = (event: PointerEvent) => {
|
||||
const rect = root.getBoundingClientRect();
|
||||
const isInside =
|
||||
event.clientX >= rect.left &&
|
||||
event.clientX <= rect.right &&
|
||||
event.clientY >= rect.top &&
|
||||
event.clientY <= rect.bottom;
|
||||
|
||||
if (!isInside) {
|
||||
velocityRef.current = { x: 0, y: 0 };
|
||||
return;
|
||||
}
|
||||
|
||||
const nextPointer = {
|
||||
x: (event.clientX - rect.left) / rect.width,
|
||||
y: 1 - (event.clientY - rect.top) / rect.height,
|
||||
};
|
||||
const now = performance.now();
|
||||
const elapsed = Math.max(16, now - lastMoveTimeRef.current);
|
||||
lastMoveTimeRef.current = now;
|
||||
velocityRef.current = {
|
||||
x: ((nextPointer.x - pointerRef.current.x) / elapsed) * 16.67,
|
||||
y: ((nextPointer.y - pointerRef.current.y) / elapsed) * 16.67,
|
||||
};
|
||||
pointerRef.current = nextPointer;
|
||||
strengthRef.current = Math.min(1, strengthRef.current + 0.72);
|
||||
};
|
||||
|
||||
const onPointerLeave = () => {
|
||||
velocityRef.current = { x: 0, y: 0 };
|
||||
};
|
||||
|
||||
const render = () => {
|
||||
strengthRef.current *= 0.86;
|
||||
velocityRef.current = {
|
||||
x: velocityRef.current.x * 0.74,
|
||||
y: velocityRef.current.y * 0.74,
|
||||
};
|
||||
|
||||
program.uniforms.uPointer.value = [
|
||||
pointerRef.current.x,
|
||||
pointerRef.current.y,
|
||||
];
|
||||
program.uniforms.uVelocity.value = [
|
||||
velocityRef.current.x,
|
||||
velocityRef.current.y,
|
||||
];
|
||||
program.uniforms.uStrength.value = strengthRef.current;
|
||||
renderer.render({ scene: mesh });
|
||||
animationFrame = requestAnimationFrame(render);
|
||||
};
|
||||
|
||||
const observer = new ResizeObserver(resize);
|
||||
observer.observe(root);
|
||||
window.addEventListener("pointermove", onPointerMove);
|
||||
root.addEventListener("pointerleave", onPointerLeave);
|
||||
|
||||
resize();
|
||||
animationFrame = requestAnimationFrame(render);
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(animationFrame);
|
||||
observer.disconnect();
|
||||
window.removeEventListener("pointermove", onPointerMove);
|
||||
root.removeEventListener("pointerleave", onPointerLeave);
|
||||
gl.canvas.remove();
|
||||
};
|
||||
}, [imageSrc]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={rootRef}
|
||||
aria-hidden="true"
|
||||
className="hero-ogl-scene absolute inset-[-18px]"
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
style={{ backgroundImage: `url(${imageSrc})` }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,49 +1,35 @@
|
||||
import { HeroImageScene } from "@/components/aiero/HeroImageScene";
|
||||
import { ScrollDown } from "@/components/shared/ScrollDown";
|
||||
|
||||
export function HeroSection() {
|
||||
return (
|
||||
<section className="relative px-5 pt-5">
|
||||
<section className="relative px-5 py-5">
|
||||
{/* Scroll Down button — vertical, left side */}
|
||||
<div
|
||||
className="absolute left-0 top-1/2 z-20 hidden xl:block"
|
||||
style={{
|
||||
transform: "rotate(-90deg) translateX(-50%) translateY(100%)",
|
||||
transformOrigin: "left bottom",
|
||||
}}
|
||||
>
|
||||
<span className="scroll-btn-decoration">
|
||||
<a
|
||||
href="#scroll-down"
|
||||
className="inline-flex items-center gap-2 rounded-b-[25px] bg-white px-[56px] py-[16px] text-[13px] font-semibold text-[#0b0e17] no-underline transition-colors hover:text-[#45d0bd]"
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
Scroll down
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M1 11L11 1M11 1H3M11 1V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
<div className="scroll-widget absolute left-0 top-[40%] z-20 hidden xl:block">
|
||||
<ScrollDown />
|
||||
</div>
|
||||
|
||||
{/* Hero container with background */}
|
||||
<div
|
||||
className="relative overflow-hidden rounded-[25px] bg-[#1f1f1f] bg-cover bg-center"
|
||||
className="relative overflow-hidden rounded-[25px] bg-aiero-dark"
|
||||
style={{
|
||||
backgroundImage: "url(/images/aiero/home-9-top-bg-min.jpg)",
|
||||
padding: "13.5% 0 8.333% 0",
|
||||
minHeight: "min(858px, calc(100vw * 0.447))",
|
||||
padding: "14.3% 0 8.1% 0",
|
||||
}}
|
||||
>
|
||||
<HeroImageScene imageSrc="/images/aiero/home-9-top-bg-min.jpg" />
|
||||
|
||||
{/* Hero content */}
|
||||
<div className="relative z-10 mx-auto max-w-[1140px] px-[15px]" style={{ marginLeft: "-35px", paddingLeft: "calc(50% - 570px + 15px)" }}>
|
||||
<div className="relative z-10 w-full px-[12.7vw]">
|
||||
<div className="flex flex-col items-start">
|
||||
{/* Heading */}
|
||||
<h1
|
||||
className="mb-5 max-w-[1100px] text-left tracking-[-0.03em] text-white"
|
||||
className="hero-reveal mb-[24px] max-w-[1280px] text-left tracking-[-0.03em] text-white"
|
||||
style={{
|
||||
fontFamily: "var(--font-manrope)",
|
||||
fontSize: "clamp(32px, 5.2vw, 80px)",
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.1,
|
||||
fontSize: "clamp(42px, 4.43vw, 85px)",
|
||||
fontWeight: 400,
|
||||
lineHeight: 1.06,
|
||||
}}
|
||||
>
|
||||
Revolutionizing businesses with cutting-edge AI solutions and
|
||||
@@ -51,8 +37,8 @@ export function HeroSection() {
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<div style={{ marginRight: "53%" }}>
|
||||
<p className="text-[16px] leading-[1.6] text-white">
|
||||
<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
|
||||
cichlid.
|
||||
@@ -60,12 +46,12 @@ export function HeroSection() {
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="mt-10">
|
||||
<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-[#EF6464] bg-[#EF6464] px-[30px] py-[14px] text-[16px] text-white transition-all hover:border-[#F57E7E] hover:bg-[#F57E7E]"
|
||||
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)]"
|
||||
style={{ minWidth: "216px", fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
Discover
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
export function MarqueeStrip() {
|
||||
interface MarqueeStripProps {
|
||||
text?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function MarqueeStrip({
|
||||
text = "Artificial Intelligence",
|
||||
className = ""
|
||||
}: MarqueeStripProps) {
|
||||
const marqueeItems = Array.from({ length: 6 });
|
||||
|
||||
return (
|
||||
<div className="relative z-10 mx-[-5px] mb-[-90px] mt-[20px] overflow-hidden bg-gradient-to-r from-[#45D0BD] to-[#44B6E9] py-[42px]" style={{ transform: "rotate(-2.07deg)" }}>
|
||||
<div className="flex w-[200%] whitespace-nowrap">
|
||||
{/* Marquee track 1 */}
|
||||
<div className="animate-marquee flex gap-8">
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-8">
|
||||
<span className="text-[60px] font-bold leading-none text-white" style={{ fontFamily: "var(--font-sora)" }}>
|
||||
Artificial Intelligence
|
||||
</span>
|
||||
<span className="flex h-3 w-3 rounded-full bg-white opacity-50" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Marquee track 2 (seamless loop) */}
|
||||
<div className="animate-marquee flex gap-8">
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div key={`dup-${i}`} className="flex items-center gap-8">
|
||||
<span className="text-[60px] font-bold leading-none text-white" style={{ fontFamily: "var(--font-sora)" }}>
|
||||
Artificial Intelligence
|
||||
</span>
|
||||
<span className="flex h-3 w-3 rounded-full bg-white opacity-50" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={`relative z-10 mx-[-5px] mb-[-90px] mt-[20px] overflow-hidden bg-gradient-to-r from-aiero-teal to-aiero-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)" }}>
|
||||
{text}
|
||||
</span>
|
||||
<span className="flex h-3 w-3 rounded-full bg-white opacity-50" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,58 +1,92 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { navigationData } from "@/data/navigation";
|
||||
import { SearchIcon } from "@/components/shared/icons/SearchIcon";
|
||||
|
||||
export function Navbar() {
|
||||
const [isSticky, setIsSticky] = useState(false);
|
||||
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => setIsSticky(window.scrollY > 120);
|
||||
|
||||
onScroll();
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", onScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header className="relative z-30 mx-auto flex h-[76px] max-w-[2520px] items-center justify-between px-2">
|
||||
{/* Logo */}
|
||||
<a href="#" className="flex items-center">
|
||||
<Image
|
||||
src="/images/aiero/logo-dark.png"
|
||||
alt="Aiero"
|
||||
width={109.5}
|
||||
height={19.5}
|
||||
className="h-auto w-auto"
|
||||
priority
|
||||
/>
|
||||
</a>
|
||||
<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 ${
|
||||
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"
|
||||
}`}
|
||||
>
|
||||
<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"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<span className="h-[7px] w-[7px] rounded-[2px] border-2 border-current" />
|
||||
<span className="h-[7px] w-[7px] rounded-[2px] border-2 border-current" />
|
||||
<span className="h-[7px] w-[7px] rounded-[2px] border-2 border-current" />
|
||||
<span className="h-[7px] w-[7px] rounded-[2px] border-2 border-current" />
|
||||
</button>
|
||||
|
||||
{/* Logo */}
|
||||
<a href="#" className="navbar-reveal flex items-center" style={{ animationDelay: "120ms" }}>
|
||||
<Image
|
||||
src="/images/aiero/logo-dark.png"
|
||||
alt="Aiero"
|
||||
width={109.5}
|
||||
height={19.5}
|
||||
className="h-auto w-auto"
|
||||
priority
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="hidden items-center gap-0 lg:flex" aria-label="Primary navigation">
|
||||
{navigationData.map((item) => (
|
||||
<nav className="hidden items-center justify-center gap-[11px] lg:flex" aria-label="Primary navigation">
|
||||
{navigationData.map((item, index) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className="relative"
|
||||
className="navbar-reveal relative"
|
||||
style={{ animationDelay: `${140 + index * 70}ms` }}
|
||||
onMouseEnter={() => setOpenDropdown(item.label)}
|
||||
onMouseLeave={() => setOpenDropdown(null)}
|
||||
>
|
||||
<a
|
||||
href={item.href}
|
||||
className="flex items-center gap-1 rounded-[20px] px-[18px] py-[10px] text-[11px] font-semibold uppercase tracking-[0.18em] text-white transition-colors hover:bg-[#1f1f1f]"
|
||||
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" : ""
|
||||
}`}
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
{item.label}
|
||||
<span className="text-active">{item.label}</span>
|
||||
<span aria-hidden>{item.label}</span>
|
||||
{item.children && (
|
||||
<svg className="ml-0.5 h-2 w-2 opacity-60" viewBox="0 0 8 5" fill="none">
|
||||
<path d="M1 1L4 4L7 1" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<svg 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-[200px] rounded-[15px] border border-[#2a2a2a] bg-[#111111] py-3 shadow-2xl">
|
||||
{item.children.map((child) => (
|
||||
<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">
|
||||
{item.children.map((child, childIndex) => (
|
||||
<a
|
||||
key={child.label}
|
||||
href={child.href}
|
||||
className="block px-5 py-2.5 text-[12px] font-medium text-white/80 transition-colors hover:text-[#45d0bd]"
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
className="dropdown-reveal block py-[10px] pr-5 text-[14px] font-medium text-white/80 transition-all hover:pl-5 hover:text-aiero-teal"
|
||||
style={{
|
||||
animationDelay: `${childIndex * 45}ms`,
|
||||
fontFamily: "var(--font-sora)",
|
||||
}}
|
||||
>
|
||||
{child.label}
|
||||
</a>
|
||||
@@ -64,14 +98,14 @@ export function Navbar() {
|
||||
</nav>
|
||||
|
||||
{/* Right Icons */}
|
||||
<div className="flex items-center gap-5">
|
||||
<button className="hidden text-white transition-colors hover:text-[#45d0bd] md:block" aria-label="Search">
|
||||
<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">
|
||||
<SearchIcon className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
className="hidden items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-white transition-colors hover:text-[#45d0bd] md:flex"
|
||||
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"
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
<svg className="h-4 w-4" viewBox="0 0 16 16" fill="none">
|
||||
@@ -83,7 +117,7 @@ export function Navbar() {
|
||||
|
||||
<a
|
||||
href="#"
|
||||
className="aiero-button aiero-button-gradient-border rounded-full px-[22px] py-[10px] text-[11px] font-semibold uppercase tracking-[0.18em] text-white"
|
||||
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"
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
Get in Touch
|
||||
|
||||
@@ -11,14 +11,14 @@ export function PossibilitiesSection() {
|
||||
{/* Left Column */}
|
||||
<div className="flex flex-col items-start pr-[10%] pt-[20px]">
|
||||
<span
|
||||
className="aiero-subheading mb-[16px] text-white"
|
||||
className="aiero-subheading mb-[16px] text-aiero-dark uppercase tracking-[0.1em]"
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
Possibilities
|
||||
[ possibilities ]
|
||||
</span>
|
||||
|
||||
<h2
|
||||
className="mb-[24px] max-w-[500px] tracking-[-0.03em] text-white"
|
||||
className="mb-[24px] max-w-[500px] tracking-[-0.03em] text-aiero-dark"
|
||||
style={{
|
||||
fontFamily: "var(--font-dm-sans)",
|
||||
fontSize: "clamp(32px, 4vw, 56px)",
|
||||
@@ -26,17 +26,17 @@ export function PossibilitiesSection() {
|
||||
lineHeight: 1.1,
|
||||
}}
|
||||
>
|
||||
Explore limitless possibilities with Aiero AI
|
||||
Explore limitless possibilities with our intelligent solutions
|
||||
</h2>
|
||||
|
||||
<p className="mb-[40px] max-w-[480px] text-[16px] text-[#87899B]">
|
||||
Guppy siamese fighting fish, round stingray roach, sand tiger yellow weaver fish. Longnose lancetfish mooneye opah ghost fish.
|
||||
<p 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>
|
||||
|
||||
<AieroButton
|
||||
variant="gradient-fill"
|
||||
variant="gradient-border"
|
||||
className="rounded-[25px] px-[35px] py-[15px] text-[15px] font-medium"
|
||||
showArrow={false}
|
||||
showArrow={true}
|
||||
>
|
||||
Explore more
|
||||
</AieroButton>
|
||||
@@ -45,9 +45,15 @@ export function PossibilitiesSection() {
|
||||
<Counter
|
||||
target={270}
|
||||
suffix="k"
|
||||
numberClassName="text-[60px] md:text-[80px] font-bold leading-none font-[var(--font-manrope)] gradient-text-purple"
|
||||
title="Global satisfied customers"
|
||||
titleClassName="font-[var(--font-manrope)] text-[16px] font-medium leading-[1.4] text-[#87899B] max-w-[120px]"
|
||||
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%)",
|
||||
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]"
|
||||
layout="row-reverse"
|
||||
gap="30px"
|
||||
/>
|
||||
@@ -59,26 +65,30 @@ export function PossibilitiesSection() {
|
||||
<IconBox
|
||||
icon={<OrbitIcon className="h-full w-full" />}
|
||||
title="Cutting-edge technology"
|
||||
description="Integration of state-of-the-art AI algorithms, including deep learning, natural language processing."
|
||||
description="Integrating neural network models into existing systems or software applications, enabling businesses to leverage AI capabilities seamlessly."
|
||||
hasBorder={true}
|
||||
theme="light"
|
||||
/>
|
||||
<IconBox
|
||||
icon={<FanIcon className="h-full w-full" />}
|
||||
title="Tailored solutions"
|
||||
description="Custom design and development of neural network architectures tailored to specific business needs."
|
||||
description="Integrating neural network models into existing systems or software applications, enabling businesses to leverage AI capabilities seamlessly."
|
||||
hasBorder={true}
|
||||
theme="light"
|
||||
/>
|
||||
<IconBox
|
||||
icon={<CirclesIcon className="h-full w-full" />}
|
||||
title="Training and workshops"
|
||||
description="Custom design and development of neural network architectures tailored to specific business needs and objectives."
|
||||
hasBorder={true}
|
||||
theme="light"
|
||||
/>
|
||||
<IconBox
|
||||
icon={<ExpandIcon className="h-full w-full" />}
|
||||
title="AI-powered design"
|
||||
description="Integration of state-of-the-art AI algorithms, including deep learning, natural language processing."
|
||||
hasBorder={false}
|
||||
title="Modern development"
|
||||
description="Building and training deep neural networks for tasks such as image recognition, natural language processing, speech recognition, and anomaly detection."
|
||||
hasBorder={true}
|
||||
theme="light"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
68
components/aiero/TinkerSection.tsx
Normal file
68
components/aiero/TinkerSection.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
export function TinkerSection() {
|
||||
return (
|
||||
<section className="relative px-[20px] py-[60px] md:py-[100px] overflow-hidden">
|
||||
<div className="mx-auto flex max-w-[1260px] flex-col gap-[50px] lg:flex-row lg:items-center">
|
||||
|
||||
{/* Left Column - Images */}
|
||||
<div className="relative flex w-full flex-col items-center justify-center lg:w-1/2">
|
||||
{/* Background Glow */}
|
||||
<div className="absolute inset-0 z-0 flex items-center justify-center pointer-events-none">
|
||||
<img
|
||||
src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2025/02/Group-18433.svg"
|
||||
alt=""
|
||||
className="w-[120%] max-w-[800px] h-auto object-contain opacity-80"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
{/* Big X Image */}
|
||||
<div className="relative z-10 w-full max-w-[450px]">
|
||||
<img
|
||||
src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2025/01/Vector-13.png"
|
||||
alt="Neural Network Visualization"
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Text & Partners */}
|
||||
<div className="relative z-10 flex w-full flex-col lg:w-1/2 lg:pl-[5%]">
|
||||
<h2
|
||||
className="mb-[60px] text-aiero-dark tracking-[-0.03em]"
|
||||
style={{
|
||||
fontFamily: "var(--font-dm-sans)",
|
||||
fontSize: "clamp(36px, 4.5vw, 65px)",
|
||||
fontWeight: 500,
|
||||
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.
|
||||
</h2>
|
||||
|
||||
{/* 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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
className="h-auto w-[140px] object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
55
components/aiero/about/AboutIntroSection.tsx
Normal file
55
components/aiero/about/AboutIntroSection.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
|
||||
import { PageContainer } from "@/components/shared/PageContainer";
|
||||
import { SectionContainer } from "@/components/shared/SectionContainer";
|
||||
|
||||
export function AboutIntroSection() {
|
||||
return (
|
||||
<SectionContainer paddingY="lg">
|
||||
<PageContainer className="grid grid-cols-1 gap-12 lg:grid-cols-[1fr_1fr] lg:gap-[60px] xl:gap-[100px]">
|
||||
{/* Left: Text Content */}
|
||||
<div className="flex flex-col items-start justify-center pt-5">
|
||||
<span
|
||||
className="aiero-subheading mb-4 text-aiero-teal"
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
about
|
||||
</span>
|
||||
<h2
|
||||
className="mb-6 tracking-[-0.03em] text-white"
|
||||
style={{
|
||||
fontFamily: "var(--font-dm-sans)",
|
||||
fontSize: "clamp(32px, 4vw, 56px)",
|
||||
fontWeight: 500,
|
||||
lineHeight: 1.1,
|
||||
}}
|
||||
>
|
||||
Awesome things in working with Aiero WordPress theme
|
||||
</h2>
|
||||
<p className="mb-8 text-base leading-relaxed text-aiero-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">
|
||||
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.
|
||||
</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="absolute inset-0 bg-cover bg-center"
|
||||
style={{
|
||||
backgroundImage: "url(/images/aiero/home-9-img.png)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</PageContainer>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
68
components/aiero/about/MissionSection.tsx
Normal file
68
components/aiero/about/MissionSection.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
|
||||
import { PageContainer } from "@/components/shared/PageContainer";
|
||||
import { SectionContainer } from "@/components/shared/SectionContainer";
|
||||
import { Counter } from "@/components/shared/Counter";
|
||||
|
||||
export function MissionSection() {
|
||||
return (
|
||||
<SectionContainer paddingY="lg">
|
||||
<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 inset-0 bg-cover bg-center"
|
||||
style={{
|
||||
backgroundImage: "url(/images/aiero/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 inset-0 bg-cover bg-center"
|
||||
style={{
|
||||
backgroundImage: "url(/images/aiero/home-9-img.png)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Text and Stats */}
|
||||
<div className="flex flex-col items-start justify-center pt-5">
|
||||
<span
|
||||
className="aiero-subheading mb-4 text-aiero-teal"
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
Mission
|
||||
</span>
|
||||
<h2
|
||||
className="mb-6 tracking-[-0.03em] text-white"
|
||||
style={{
|
||||
fontFamily: "var(--font-dm-sans)",
|
||||
fontSize: "clamp(32px, 4vw, 56px)",
|
||||
fontWeight: 500,
|
||||
lineHeight: 1.1,
|
||||
}}
|
||||
>
|
||||
we create a professional product using artificial intelligence
|
||||
</h2>
|
||||
<p className="mb-10 text-base leading-relaxed text-aiero-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">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</PageContainer>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
80
components/aiero/about/TeamSection.tsx
Normal file
80
components/aiero/about/TeamSection.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
"use client";
|
||||
|
||||
import { PageContainer } from "@/components/shared/PageContainer";
|
||||
import { SectionContainer } from "@/components/shared/SectionContainer";
|
||||
import { SectionHeading } from "@/components/shared/SectionHeading";
|
||||
|
||||
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",
|
||||
},
|
||||
{
|
||||
name: "Arthur Dowson",
|
||||
role: "AI Programmer",
|
||||
image: "/images/aiero/funny-curious-man-makes.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
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>
|
||||
</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"
|
||||
>
|
||||
<div className="relative aspect-[3/4] w-full">
|
||||
<img
|
||||
src={member.image}
|
||||
alt={member.name}
|
||||
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
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-80" />
|
||||
</div>
|
||||
<div className="absolute bottom-0 left-0 w-full p-6 text-white transition-transform duration-300 group-hover:-translate-y-2">
|
||||
<h4
|
||||
className="text-[20px] font-bold"
|
||||
style={{ fontFamily: "var(--font-dm-sans)" }}
|
||||
>
|
||||
{member.name}
|
||||
</h4>
|
||||
<p className="text-[14px] text-aiero-teal">{member.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</PageContainer>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
18
components/aiero/contacts/MapSection.tsx
Normal file
18
components/aiero/contacts/MapSection.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { SectionContainer } from "@/components/shared/SectionContainer";
|
||||
|
||||
export function MapSection() {
|
||||
return (
|
||||
<SectionContainer paddingY="none" className="h-[500px] w-full">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.15830869428!2d-74.11976397304603!3d40.69766374874431!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1716301234567!5m2!1sen!2s"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen={false}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="Google Map"
|
||||
/>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
92
components/aiero/services/PricingSection.tsx
Normal file
92
components/aiero/services/PricingSection.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import { PageContainer } from "@/components/shared/PageContainer";
|
||||
import { SectionContainer } from "@/components/shared/SectionContainer";
|
||||
import { SectionHeading } from "@/components/shared/SectionHeading";
|
||||
|
||||
export function PricingSection() {
|
||||
const plans = [
|
||||
{
|
||||
name: "Basic",
|
||||
target: "Great for private individuals",
|
||||
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"],
|
||||
price: "$ 59 /mo",
|
||||
isPopular: true,
|
||||
},
|
||||
{
|
||||
name: "Unlimited",
|
||||
target: "Great for private individuals",
|
||||
features: ["100 Users", "Unlimited Projects", "Download prototypes", "100 Gb workspace"],
|
||||
price: "$ 199 /mo",
|
||||
isPopular: false,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<SectionContainer paddingY="lg">
|
||||
<PageContainer>
|
||||
<div className="mb-16 flex flex-col items-center justify-center text-center">
|
||||
<SectionHeading
|
||||
tag="pricing"
|
||||
title="Choose the plan that fits your needs"
|
||||
titleClassName="text-white max-w-[500px] text-center"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||
{plans.map((plan, i) => (
|
||||
<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"
|
||||
} 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)" }}>
|
||||
Popular
|
||||
</div>
|
||||
)}
|
||||
<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>
|
||||
|
||||
<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>
|
||||
{feat}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="mt-auto">
|
||||
<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"
|
||||
}`}
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</PageContainer>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
63
components/aiero/services/ServiceCardsGrid.tsx
Normal file
63
components/aiero/services/ServiceCardsGrid.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
"use client";
|
||||
|
||||
import { PageContainer } from "@/components/shared/PageContainer";
|
||||
import { SectionContainer } from "@/components/shared/SectionContainer";
|
||||
import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
|
||||
|
||||
const services = [
|
||||
{
|
||||
title: "Neural Network Development",
|
||||
desc: "Custom design and development of neural network architectures tailored to your specific business needs",
|
||||
},
|
||||
{
|
||||
title: "Training & Optimization",
|
||||
desc: "Fine-tuning and optimizing neural network models to improve accuracy, speed, and efficiency",
|
||||
},
|
||||
{
|
||||
title: "Neural Network Integration",
|
||||
desc: "Expert guidance and strategic advice on integrating neural networks into your existing systems",
|
||||
},
|
||||
];
|
||||
|
||||
export function ServiceCardsGrid() {
|
||||
return (
|
||||
<SectionContainer paddingY="lg">
|
||||
<PageContainer>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{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"
|
||||
>
|
||||
<div className="mb-6 h-[60px] w-[60px] rounded-full bg-aiero-card-purple2 p-4">
|
||||
<img
|
||||
src="/images/aiero/3x.png"
|
||||
alt="Icon"
|
||||
className="h-full w-full object-contain"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).src =
|
||||
"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M12 2L2 22h20L12 2z'/></svg>";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4
|
||||
className="mb-4 text-[22px] font-bold text-white transition-colors group-hover:text-aiero-teal"
|
||||
style={{ fontFamily: "var(--font-dm-sans)" }}
|
||||
>
|
||||
{svc.title}
|
||||
</h4>
|
||||
<p className="text-[16px] text-aiero-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">
|
||||
<ArrowIcon className="h-4 w-4" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</PageContainer>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
67
components/aiero/services/ServiceFeaturesSection.tsx
Normal file
67
components/aiero/services/ServiceFeaturesSection.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import { PageContainer } from "@/components/shared/PageContainer";
|
||||
import { SectionContainer } from "@/components/shared/SectionContainer";
|
||||
import { SectionHeading } from "@/components/shared/SectionHeading";
|
||||
import { IconBox } from "@/components/shared/IconBox";
|
||||
|
||||
export function ServiceFeaturesSection() {
|
||||
const features = [
|
||||
{
|
||||
title: "AI Technology",
|
||||
desc: "Emphasize the expertise and knowledge of your team in developing and implementing neural networks.",
|
||||
},
|
||||
{
|
||||
title: "Tailored solutions",
|
||||
desc: "Mention your ability to create customized neural network solutions that specifically address your clients.",
|
||||
},
|
||||
{
|
||||
title: "Cutting-edge technology",
|
||||
desc: "Highlight that you use the latest and most advanced neural network frameworks and technologies.",
|
||||
},
|
||||
{
|
||||
title: "AI consultancy & strategy",
|
||||
desc: "Emphasize the expertise and knowledge of your team in developing and implementing neural networks.",
|
||||
},
|
||||
{
|
||||
title: "Computer vision",
|
||||
desc: "Mention your ability to create customized neural network solutions that specifically address your clients.",
|
||||
},
|
||||
{
|
||||
title: "Deployment & Integration",
|
||||
desc: "Highlight that you use the latest and most advanced neural network frameworks and technologies.",
|
||||
},
|
||||
];
|
||||
|
||||
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"/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<SectionContainer paddingY="lg">
|
||||
<PageContainer>
|
||||
<div className="mb-16">
|
||||
<SectionHeading
|
||||
tag="features"
|
||||
title="The unique selling points & advantages of our service"
|
||||
titleClassName="text-white max-w-[700px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-x-12 gap-y-12 md:grid-cols-2 lg:grid-cols-3">
|
||||
{features.map((feat, i) => (
|
||||
<IconBox
|
||||
key={i}
|
||||
icon={<DefaultIcon />}
|
||||
title={feat.title}
|
||||
description={feat.desc}
|
||||
hasBorder={i < 3} // The original has a border for the first row
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</PageContainer>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
72
components/aiero/services/TestimonialsSection.tsx
Normal file
72
components/aiero/services/TestimonialsSection.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
"use client";
|
||||
|
||||
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",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<SectionContainer paddingY="lg" className="bg-aiero-card-dark">
|
||||
<PageContainer>
|
||||
<div className="mb-16">
|
||||
<SectionHeading
|
||||
tag="testimonials"
|
||||
title="Discover what our clients have to say about our AI solutions"
|
||||
titleClassName="text-white max-w-[650px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
||||
{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"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</PageContainer>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user