CTA Block

1"use client";
2 
3import { Button } from "@base-ui/react/button";
4import { motion } from "framer-motion";
5import { ArrowRight, MessageSquare } from "lucide-react";
6 
7export function CTABlockBaseui() {
8  return (
9    <section>
10      <div className="mx-auto max-w-5xl">
11        <motion.div
12          initial={{ opacity: 0, scale: 0.95 }}
13          whileInView={{ opacity: 1, scale: 1 }}
14          viewport={{ once: true }}
15          transition={{ duration: 0.6 }}
16        >
17          <div className="relative overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-sm">
18            {/* Background Pattern */}
19            <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]" />
20 
21            {/* Gradient Overlay */}
22            <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5" />
23 
24            <div className="relative z-10 p-8 text-center md:p-12 lg:p-16">
25              <motion.div
26                initial={{ opacity: 0, y: 20 }}
27                whileInView={{ opacity: 1, y: 0 }}
28                viewport={{ once: true }}
29                transition={{ delay: 0.2, duration: 0.6 }}
30              >
31                <h2 className="mb-6 text-3xl font-bold text-foreground md:text-4xl lg:text-5xl">
32                  Ready to Start Your Project?
33                </h2>
34 
35                <p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground md:text-xl">
36                  Let's turn your ideas into reality. Get in touch today and
37                  let's discuss how we can work together to build something
38                  amazing.
39                </p>
40 
41                <motion.div
42                  initial={{ opacity: 0, y: 20 }}
43                  whileInView={{ opacity: 1, y: 0 }}
44                  viewport={{ once: true }}
45                  transition={{ delay: 0.4, duration: 0.6 }}
46                  className="flex flex-col justify-center gap-4 sm:flex-row"
47                >
48                  <Button className="group inline-flex h-11 w-full items-center justify-center gap-2 rounded-md bg-primary px-8 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 sm:w-auto">
49// … truncated