Create Blog CTA components for NEXUS and CORP

cgen-fb5da5dc37dc45918d65492dee3699a1

client/components/blog/BlogCTASection.tsx

@@ -0,0 +1,99 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Link } from "react-router-dom";
+import {
+  Zap,
+  Building2,
+  ArrowRight,
+} from "lucide-react";
+
+interface BlogCTAProps {
+  variant?: "nexus" | "corp" | "both";
+}
+
+export const BlogCTANexus = () => {
+  return (
+    <Card className="border-border/40 bg-gradient-to-r from-purple-900/20 to-blue-900/20 shadow-lg">
+      <CardContent className="p-8">
+        <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Zap className="h-5 w-5 text-aethex-400" />
+              <p className="text-xs uppercase tracking-[0.4em] text-aethex-400">
+                Monetization
+              </p>
+            </div>
+            <h3 className="text-2xl font-semibold text-white">
+              Ready to launch your creative business?
+            </h3>
+            <p className="max-w-2xl text-sm text-muted-foreground">
+              Join NEXUS, our creator marketplace where artists, developers, and
+              designers connect with opportunities. Start earning from your
+              talent today with our 20% commission model and secure payment
+              infrastructure.
+            </p>
+          </div>
+          <Button
+            asChild
+            className="bg-gradient-to-r from-aethex-500 to-neon-blue whitespace-nowrap"
+          >
+            <Link to="/nexus">
+              Explore NEXUS
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Link>
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export const BlogCTACorp = () => {
+  return (
+    <Card className="border-border/40 bg-gradient-to-r from-orange-900/20 to-red-900/20 shadow-lg">
+      <CardContent className="p-8">
+        <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Building2 className="h-5 w-5 text-orange-400" />
+              <p className="text-xs uppercase tracking-[0.4em] text-orange-400">
+                Enterprise
+              </p>
+            </div>
+            <h3 className="text-2xl font-semibold text-white">
+              Building for enterprise?
+            </h3>
+            <p className="max-w-2xl text-sm text-muted-foreground">
+              CORP connects businesses with specialized teams for custom
+              development, consulting, and enterprise solutions. Get access to
+              vetted contractors and streamlined project management.
+            </p>
+          </div>
+          <Button
+            asChild
+            className="whitespace-nowrap border-border/60"
+            variant="outline"
+          >
+            <Link to="/corp">
+              Learn about CORP
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Link>
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+const BlogCTASection = ({ variant = "both" }: BlogCTAProps) => {
+  return (
+    <section className="border-t border-border/30 bg-background/70 py-16">
+      <div className="container mx-auto space-y-4 px-4">
+        {(variant === "nexus" || variant === "both") && <BlogCTANexus />}
+        {(variant === "corp" || variant === "both") && <BlogCTACorp />}
+      </div>
+    </section>
+  );
+};
+
+export default BlogCTASection;