update home page

2026-06-18 16:32:31 +05:30
parent d9cc83aa82
commit 8e0d704438
57 changed files with 2813 additions and 301 deletions
--- a/components/aiero/services/PricingSection.tsx
+++ b/components/aiero/services/PricingSection.tsx
@@ -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>
+  );
+}