Stats Pillars

1"use client";
2
3import React from "react";
4import { Button } from "@/components/ui/button";
5import { motion } from "framer-motion";
6import { CheckCircle2, Trophy, Users, Rocket } from "lucide-react";
7
8export function About() {
9  const stats = [
10    { label: "Founded", value: "2024", icon: Rocket },
11    { label: "Clients", value: "500+", icon: Users },
12    { label: "Awards", value: "12", icon: Trophy },
13  ];
14
15  const features = [
16    "Pixel perfect design implementation",
17    "Highly optimized for performance",
18    "Accessibility first approach (a11y)",
19    "Fully customizable via Tailwind CSS",
20  ];
21
22  return (
23    <section className="w-full py-16 md:py-24 bg-background overflow-hidden text-left">
24      <div className="container px-4 sm:px-6 mx-auto">
25        <div className="flex flex-col lg:flex-row items-center gap-10 lg:gap-16">
26          <div className="w-full lg:w-1/2 space-y-8">
27            <div className="space-y-4">
28              <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-[1.2]">
29                Crafting interfaces that <span className="text-primary italic">matter.</span>
30              </h2>
31              <p className="text-base sm:text-lg text-muted-foreground font-light leading-relaxed">
32                At Shadway, we believe that every pixel has a purpose.
33                Our team of designers and engineers work tirelessly to bring
34                you the highest quality React components for your next big idea.
35              </p>
36            </div>
37
38            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
39              {features.map((feature, i) => (
40                <div key={i} className="flex items-center gap-2">
41                  <CheckCircle2 className="w-5 h-5 text-primary shrink-0" />
42                  <span className="text-sm font-medium">{feature}</span>
43                </div>
44              ))}
45            </div>
46
47            <div className="flex flex-col sm:flex-row items-center gap-4 pt-4">
48              <Button size="lg" className="w-full sm:w-auto px-8">Learn More</Button>
49              <Button size="lg" variant="ghost" className="w-full sm:w-auto">Meet the team</Button>
50            </div>
51          </div>
52
53          <div className="w-full lg:w-1/2 relative mt-12 lg:mt-0">
54            <motion.div
55              initial={{ opacity: 0, scale: 0.95 }}
56              animate={{ opacity: 1, scale: 1 }}
57// … truncated