aethex-forge/client/components/blog/BlogCTASection.tsx
2025-11-15 21:13:01 +00:00

95 lines
3.4 KiB
TypeScript

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;