componenets standardization 1

2026-01-01 21:42:04 +00:00
parent c880e24fc0
commit a4691ad2da
95 changed files with 3597 additions and 1745 deletions
--- a/frontend/src/marketing/pages/CaseStudies.tsx
+++ b/frontend/src/marketing/pages/CaseStudies.tsx
@@ -8,6 +8,7 @@ import {
 } from "@heroicons/react/24/outline";
 import SEO from "../components/SEO";
 import { getMetaTags } from "../config/metaTags";
+import Button from "../../components/ui/button/Button";

 const CaseStudies: React.FC = () => {
  const renderCta = (cta: { label: string; href: string }, className: string) => {
@@ -190,10 +191,12 @@ const CaseStudies: React.FC = () => {
            <p className="text-base text-gray-700 leading-relaxed">
              Igny8's roadmap is shaped by an active community of customer strategists, agency partners, and product marketers. Join and get early access to features, template libraries, and industry benchmarks.
            </p>
-            <button className="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white px-6 py-3 text-sm font-semibold hover:shadow-lg transition">
+            <Button
+              variant="gradient"
+              endIcon={<ArrowRightIcon className="h-4 w-4" />}
+            >
              Join the CAB waitlist
-              <ArrowRightIcon className="h-4 w-4" />
-            </button>
+            </Button>
          </div>
        </div>
      </section>
--- a/frontend/src/marketing/pages/Contact.tsx
+++ b/frontend/src/marketing/pages/Contact.tsx
@@ -3,6 +3,9 @@ import SectionHeading from "../components/SectionHeading";
 import CTASection from "../components/CTASection";
 import SEO from "../components/SEO";
 import { getMetaTags } from "../config/metaTags";
+import InputField from "../../components/form/input/InputField";
+import TextArea from "../../components/form/input/TextArea";
+import Button from "../../components/ui/button/Button";

 const Contact: React.FC = () => {
  return (
@@ -22,7 +25,7 @@ const Contact: React.FC = () => {
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <label className="flex flex-col gap-2 text-sm text-gray-600">
              First name
-              <input
+              <InputField
                type="text"
                placeholder="Alex"
                className="rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
@@ -30,7 +33,7 @@ const Contact: React.FC = () => {
            </label>
            <label className="flex flex-col gap-2 text-sm text-gray-600">
              Last name
-              <input
+              <InputField
                type="text"
                placeholder="Rivera"
                className="rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
@@ -40,7 +43,7 @@ const Contact: React.FC = () => {

          <label className="flex flex-col gap-2 text-sm text-gray-600">
            Work email
-            <input
+            <InputField
              type="email"
              placeholder="you@company.com"
              className="rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
@@ -49,7 +52,7 @@ const Contact: React.FC = () => {

          <label className="flex flex-col gap-2 text-sm text-gray-600">
            Company
-            <input
+            <InputField
              type="text"
              placeholder="Company name"
              className="rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
@@ -58,19 +61,22 @@ const Contact: React.FC = () => {

          <label className="flex flex-col gap-2 text-sm text-gray-600">
            How can we help?
-            <textarea
+            <TextArea
              rows={4}
              placeholder="Tell us about your current workflow, challenges, and goals."
              className="rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20 resize-none"
            />
          </label>

-          <button
+          <Button
            type="submit"
+            variant="primary"
+            tone="brand"
+            size="md"
            className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-brand-700)] hover:from-[var(--color-brand-700)] hover:to-[var(--color-primary)] text-white px-6 py-3 text-sm font-semibold shadow-lg shadow-[var(--color-primary)]/30 transition-all w-full"
          >
            Book strategy call
-          </button>
+          </Button>
        </form>

        <div className="space-y-8">
--- a/frontend/src/marketing/pages/Pricing.tsx
+++ b/frontend/src/marketing/pages/Pricing.tsx
@@ -14,6 +14,7 @@ import { PricingTable, PricingPlan } from "../../components/ui/pricing-table";
 import PricingTable1 from "../../components/ui/pricing-table/pricing-table-1";
 import { Link } from "react-router-dom";
 import { Plan, convertToPricingPlan } from "../../utils/pricingHelpers";
+import Button from "../../components/ui/button/Button";

 const Pricing: React.FC = () => {
  const [plans, setPlans] = useState<Plan[]>([]);
@@ -326,12 +327,15 @@ const Pricing: React.FC = () => {
        <section className="max-w-7xl mx-auto px-6 pb-24">
          <div className="text-center py-12">
            <p className="text-error-600">{error}</p>
-            <button
+            <Button
+              variant="primary"
+              tone="brand"
+              size="md"
              onClick={() => window.location.reload()}
              className="mt-4 px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)]"
            >
              Retry
-            </button>
+            </Button>
          </div>
        </section>
      )}
--- a/frontend/src/marketing/pages/Waitlist.tsx
+++ b/frontend/src/marketing/pages/Waitlist.tsx
@@ -3,6 +3,9 @@ import SectionHeading from "../components/SectionHeading";
 import CTASection from "../components/CTASection";
 import SEO from "../components/SEO";
 import { getMetaTags } from "../config/metaTags";
+import InputField from "../../components/form/input/InputField";
+import TextArea from "../../components/form/input/TextArea";
+import Button from "../../components/ui/button/Button";

 const roadmapItems = [
  {
@@ -42,27 +45,25 @@ const Waitlist: React.FC = () => {
            Share your details and we'll invite you to beta cohorts with onboarding resources and direct feedback loops to our product team.
          </p>
          <form className="space-y-4">
-            <input
+            <InputField
              type="text"
              placeholder="Name"
-              className="w-full rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
            />
-            <input
+            <InputField
              type="email"
              placeholder="Work email"
-              className="w-full rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
            />
-            <textarea
+            <TextArea
              rows={4}
              placeholder="Tell us about your current workflow and why you're excited."
-              className="w-full rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20 resize-none"
            />
-            <button
+            <Button
              type="submit"
-              className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-brand-700)] hover:from-[var(--color-brand-700)] hover:to-[var(--color-primary)] text-white px-6 py-3 text-sm font-semibold shadow-lg shadow-[var(--color-primary)]/30 transition-all w-full"
+              variant="primary"
+              className="w-full"
            >
              Join waitlist
-            </button>
+            </Button>
          </form>
        </div>