CTA Block

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import { Card } from "@/components/ui/card";
5import { motion } from "framer-motion";
6import { ArrowRight, MessageSquare } from "lucide-react";
7 
8export function CTABlock() {
9  return (
10    <section>
11      <div className="mx-auto max-w-5xl">
12        <motion.div
13          initial={{ opacity: 0, scale: 0.95 }}
14          whileInView={{ opacity: 1, scale: 1 }}
15          viewport={{ once: true }}
16          transition={{ duration: 0.6 }}
17        >
18          <Card className="relative overflow-hidden border-border bg-card">
19            {/* Background Pattern */}
20            <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
21 
22            {/* Gradient Overlay */}
23            <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5" />
24 
25            <div className="relative z-10 p-8 text-center md:p-12 lg:p-16">
26              <motion.div
27                initial={{ opacity: 0, y: 20 }}
28                whileInView={{ opacity: 1, y: 0 }}
29                viewport={{ once: true }}
30                transition={{ delay: 0.2, duration: 0.6 }}
31              >
32                <h2 className="mb-6 text-3xl font-bold text-foreground md:text-4xl lg:text-5xl">
33                  Ready to Start Your Project?
34                </h2>
35 
36                <p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground md:text-xl">
37                  Let's turn your ideas into reality. Get in touch today and
38                  let's discuss how we can work together to build something
39                  amazing.
40                </p>
41 
42                <motion.div
43                  initial={{ opacity: 0, y: 20 }}
44                  whileInView={{ opacity: 1, y: 0 }}
45                  viewport={{ once: true }}
46                  transition={{ delay: 0.4, duration: 0.6 }}
47                  className="flex flex-col justify-center gap-4 sm:flex-row"
48                >
49                  <Button size="lg" className="group w-full gap-2 sm:w-auto">
50                    Start a Conversation
51                    <MessageSquare className="h-4 w-4 transition-transform group-hover:scale-110" />
52                  </Button>
53 
54                  <Button
55                    size="lg"
56                    variant="outline"
57                    className="group w-full gap-2 sm:w-auto"
58                  >
59// … truncated