Particles

1"use client";
2
3import React from "react";
4import { motion } from "framer-motion";
5import { ArrowRight, Sparkles } from "lucide-react";
6import { Button } from "@/components/ui/button";
7
8export function CtaParticles() {
9  return (
10    <section className="py-24 px-4 relative overflow-hidden flex items-center justify-center min-h-[500px] rounded-3xl my-8 mx-4 md:mx-8 border border-border/50 bg-foreground/5 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-primary/10 via-background to-background">
11
12      {/* Dynamic Background Particles */}
13      <div className="absolute inset-0 overflow-hidden pointer-events-none">
14        {[...Array(20)].map((_, i) => (
15          <motion.div
16            key={i}
17            initial={{
18              opacity: 0,
19              scale: 0,
20              x: Math.random() * 1000 - 500,
21              y: Math.random() * 1000 - 500
22            }}
23            animate={{
24              opacity: [0, 0.5, 0],
25              scale: [0, 1.5, 0],
26              x: Math.random() * 1000 - 500,
27              y: Math.random() * 1000 - 500
28            }}
29            transition={{
30              duration: Math.random() * 3 + 2,
31              repeat: Infinity,
32              delay: Math.random() * 2
33            }}
34            className="absolute top-1/2 left-1/2 w-1 h-1 bg-primary rounded-full blur-[1px]"
35          />
36        ))}
37      </div>
38
39      <div className="relative z-10 text-center max-w-3xl space-y-8 p-8">
40        <motion.div
41          initial={{ opacity: 0, scale: 0.9 }}
42          whileInView={{ opacity: 1, scale: 1 }}
43          transition={{ duration: 0.5 }}
44          className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-primary/30 bg-primary/10 text-primary text-sm font-medium"
45        >
46          <Sparkles className="w-4 h-4" />
47          <span>Launch Week Deal</span>
48        </motion.div>
49
50        <motion.h2
51          initial={{ opacity: 0, y: 20 }}
52          whileInView={{ opacity: 1, y: 0 }}
53          transition={{ duration: 0.6, delay: 0.1 }}
54          className="text-4xl md:text-6xl font-black tracking-tighter"
55        >
56          Build better products <br />
57          <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-blue-600">faster than ever.</span>
58        </motion.h2>
59
60        <motion.p
61          initial={{ opacity: 0, y: 20 }}
62          whileInView={{ opacity: 1, y: 0 }}
63// … truncated