update home page
This commit is contained in:
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