Features

<div className="grid md:grid-cols-3 gap-8 py-12"><div className="p-6 border rounded-xl"><div className="w-10 h-10 bg-primary/10 rounded-lg mb-4"></div><h3 className="font-bold text-lg mb-2">Fast</h3><p className="text-muted-foreground text-sm">Lightning fast performance out of the box.</p></div><div className="p-6 border rounded-xl"><div className="w-10 h-10 bg-primary/10 rounded-lg mb-4"></div><h3 className="font-bold text-lg mb-2">Secure</h3><p className="text-muted-foreground text-sm">Enterprise grade security protocols.</p></div><div className="p-6 border rounded-xl"><div className="w-10 h-10 bg-primary/10 rounded-lg mb-4"></div><h3 className="font-bold text-lg mb-2">Scalable</h3><p className="text-muted-foreground text-sm">Grows with your business seamlessly.</p></div></div>

"use client";

import React, { useState } from "react";

interface FeatureGridProps {
  className?: string;
  children?: React.ReactNode;
}

export default function FeatureGrid({
  className = "",
  children,
}: FeatureGridProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="grid md:grid-cols-3 gap-8 py-12"><div className="p-6 border rounded-xl"><div className="w-10 h-10 bg-primary/10 rounded-lg mb-4"></div><h3 className="font-bold text-lg mb-2">Fast</h3><p className="text-muted-foreground text-sm">Lightning fast performance out of the box.</p></div><div className="p-6 border rounded-xl"><div className="w-10 h-10 bg-primary/10 rounded-lg mb-4"></div><h3 className="font-bold text-lg mb-2">Secure</h3><p className="text-muted-foreground text-sm">Enterprise grade security protocols.</p></div><div className="p-6 border rounded-xl"><div className="w-10 h-10 bg-primary/10 rounded-lg mb-4"></div><h3 className="font-bold text-lg mb-2">Scalable</h3><p className="text-muted-foreground text-sm">Grows with your business seamlessly.</p></div></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedFeatureGrid() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="grid md:grid-cols-3 gap-8 py-12"><div className="p-6 border rounded-xl"><div className="w-10 h-10 bg-primary/10 rounded-lg mb-4"></div><h3 className="font-bold text-lg mb-2">Fast</h3><p className="text-muted-foreground text-sm">Lightning fast performance out of the box.</p></div><div className="p-6 border rounded-xl"><div className="w-10 h-10 bg-primary/10 rounded-lg mb-4"></div><h3 className="font-bold text-lg mb-2">Secure</h3><p className="text-muted-foreground text-sm">Enterprise grade security protocols.</p></div><div className="p-6 border rounded-xl"><div className="w-10 h-10 bg-primary/10 rounded-lg mb-4"></div><h3 className="font-bold text-lg mb-2">Scalable</h3><p className="text-muted-foreground text-sm">Grows with your business seamlessly.</p></div></div>
    </motion.div>
  );
}

<div className="space-y-24 py-12"><div className="flex flex-col md:flex-row gap-12 items-center"><div className="flex-1"><h3 className="text-3xl font-bold mb-4">Feature One</h3><p className="text-muted-foreground">This is a great feature that does amazing things for your productivity and happiness.</p></div><div className="flex-1 h-64 bg-muted rounded-xl w-full"></div></div><div className="flex flex-col md:flex-row-reverse gap-12 items-center"><div className="flex-1"><h3 className="text-3xl font-bold mb-4">Feature Two</h3><p className="text-muted-foreground">Another incredible capability that will completely change how you work forever.</p></div><div className="flex-1 h-64 bg-muted rounded-xl w-full"></div></div></div>

"use client";

import React, { useState } from "react";

interface FeatureZigzagProps {
  className?: string;
  children?: React.ReactNode;
}

export default function FeatureZigzag({
  className = "",
  children,
}: FeatureZigzagProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="space-y-24 py-12"><div className="flex flex-col md:flex-row gap-12 items-center"><div className="flex-1"><h3 className="text-3xl font-bold mb-4">Feature One</h3><p className="text-muted-foreground">This is a great feature that does amazing things for your productivity and happiness.</p></div><div className="flex-1 h-64 bg-muted rounded-xl w-full"></div></div><div className="flex flex-col md:flex-row-reverse gap-12 items-center"><div className="flex-1"><h3 className="text-3xl font-bold mb-4">Feature Two</h3><p className="text-muted-foreground">Another incredible capability that will completely change how you work forever.</p></div><div className="flex-1 h-64 bg-muted rounded-xl w-full"></div></div></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedFeatureZigzag() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="space-y-24 py-12"><div className="flex flex-col md:flex-row gap-12 items-center"><div className="flex-1"><h3 className="text-3xl font-bold mb-4">Feature One</h3><p className="text-muted-foreground">This is a great feature that does amazing things for your productivity and happiness.</p></div><div className="flex-1 h-64 bg-muted rounded-xl w-full"></div></div><div className="flex flex-col md:flex-row-reverse gap-12 items-center"><div className="flex-1"><h3 className="text-3xl font-bold mb-4">Feature Two</h3><p className="text-muted-foreground">Another incredible capability that will completely change how you work forever.</p></div><div className="flex-1 h-64 bg-muted rounded-xl w-full"></div></div></div>
    </motion.div>
  );
}

<div className="max-w-2xl mx-auto py-12 space-y-8"><div className="flex gap-4"><div className="w-12 h-12 shrink-0 bg-primary/10 rounded-full flex items-center justify-center text-primary font-bold">1</div><div><h3 className="text-xl font-bold mb-2">Sign Up</h3><p className="text-muted-foreground">Create your account in seconds using Google or Github.</p></div></div><div className="flex gap-4"><div className="w-12 h-12 shrink-0 bg-primary/10 rounded-full flex items-center justify-center text-primary font-bold">2</div><div><h3 className="text-xl font-bold mb-2">Configure</h3><p className="text-muted-foreground">Set up your preferences and invite your team members.</p></div></div><div className="flex gap-4"><div className="w-12 h-12 shrink-0 bg-primary/10 rounded-full flex items-center justify-center text-primary font-bold">3</div><div><h3 className="text-xl font-bold mb-2">Launch</h3><p className="text-muted-foreground">Deploy your application to production instantly.</p></div></div></div>

"use client";

import React, { useState } from "react";

interface FeatureListProps {
  className?: string;
  children?: React.ReactNode;
}

export default function FeatureList({
  className = "",
  children,
}: FeatureListProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="max-w-2xl mx-auto py-12 space-y-8"><div className="flex gap-4"><div className="w-12 h-12 shrink-0 bg-primary/10 rounded-full flex items-center justify-center text-primary font-bold">1</div><div><h3 className="text-xl font-bold mb-2">Sign Up</h3><p className="text-muted-foreground">Create your account in seconds using Google or Github.</p></div></div><div className="flex gap-4"><div className="w-12 h-12 shrink-0 bg-primary/10 rounded-full flex items-center justify-center text-primary font-bold">2</div><div><h3 className="text-xl font-bold mb-2">Configure</h3><p className="text-muted-foreground">Set up your preferences and invite your team members.</p></div></div><div className="flex gap-4"><div className="w-12 h-12 shrink-0 bg-primary/10 rounded-full flex items-center justify-center text-primary font-bold">3</div><div><h3 className="text-xl font-bold mb-2">Launch</h3><p className="text-muted-foreground">Deploy your application to production instantly.</p></div></div></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedFeatureList() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="max-w-2xl mx-auto py-12 space-y-8"><div className="flex gap-4"><div className="w-12 h-12 shrink-0 bg-primary/10 rounded-full flex items-center justify-center text-primary font-bold">1</div><div><h3 className="text-xl font-bold mb-2">Sign Up</h3><p className="text-muted-foreground">Create your account in seconds using Google or Github.</p></div></div><div className="flex gap-4"><div className="w-12 h-12 shrink-0 bg-primary/10 rounded-full flex items-center justify-center text-primary font-bold">2</div><div><h3 className="text-xl font-bold mb-2">Configure</h3><p className="text-muted-foreground">Set up your preferences and invite your team members.</p></div></div><div className="flex gap-4"><div className="w-12 h-12 shrink-0 bg-primary/10 rounded-full flex items-center justify-center text-primary font-bold">3</div><div><h3 className="text-xl font-bold mb-2">Launch</h3><p className="text-muted-foreground">Deploy your application to production instantly.</p></div></div></div>
    </motion.div>
  );
}

<div className="text-center py-20 px-4 bg-primary text-primary-foreground rounded-3xl my-12"><h2 className="text-4xl font-bold mb-6">Built for performance</h2><p className="max-w-2xl mx-auto text-xl opacity-90 mb-10">We obsess over every millisecond so your users don't have to wait.</p><button className="bg-white text-primary px-8 py-3 rounded-md font-bold">See benchmarks</button></div>

"use client";

import React, { useState } from "react";

interface FeatureHeroProps {
  className?: string;
  children?: React.ReactNode;
}

export default function FeatureHero({
  className = "",
  children,
}: FeatureHeroProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="text-center py-20 px-4 bg-primary text-primary-foreground rounded-3xl my-12"><h2 className="text-4xl font-bold mb-6">Built for performance</h2><p className="max-w-2xl mx-auto text-xl opacity-90 mb-10">We obsess over every millisecond so your users don't have to wait.</p><button className="bg-white text-primary px-8 py-3 rounded-md font-bold">See benchmarks</button></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedFeatureHero() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="text-center py-20 px-4 bg-primary text-primary-foreground rounded-3xl my-12"><h2 className="text-4xl font-bold mb-6">Built for performance</h2><p className="max-w-2xl mx-auto text-xl opacity-90 mb-10">We obsess over every millisecond so your users don't have to wait.</p><button className="bg-white text-primary px-8 py-3 rounded-md font-bold">See benchmarks</button></div>
    </motion.div>
  );
}

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 py-12"><div className="bg-muted p-6 rounded-xl text-center"><h3 className="font-bold">Analytics</h3></div><div className="bg-muted p-6 rounded-xl text-center"><h3 className="font-bold">Reporting</h3></div><div className="bg-muted p-6 rounded-xl text-center"><h3 className="font-bold">Dashboard</h3></div><div className="bg-muted p-6 rounded-xl text-center"><h3 className="font-bold">Exports</h3></div></div>

"use client";

import React, { useState } from "react";

interface FeatureCardsProps {
  className?: string;
  children?: React.ReactNode;
}

export default function FeatureCards({
  className = "",
  children,
}: FeatureCardsProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 py-12"><div className="bg-muted p-6 rounded-xl text-center"><h3 className="font-bold">Analytics</h3></div><div className="bg-muted p-6 rounded-xl text-center"><h3 className="font-bold">Reporting</h3></div><div className="bg-muted p-6 rounded-xl text-center"><h3 className="font-bold">Dashboard</h3></div><div className="bg-muted p-6 rounded-xl text-center"><h3 className="font-bold">Exports</h3></div></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedFeatureCards() {
  return (
    <motion.div
      whileHover={{ y: -6, boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)" }}
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
      className="w-full max-w-sm rounded-2xl border border-border bg-card p-6 shadow-xs cursor-pointer"
    >
      <h3 className="font-bold text-base text-foreground mb-1">Animated Card</h3>
      <p className="text-xs text-muted-foreground leading-relaxed">
        Hover to trigger realistic physical lift and elevation shadow transitions.
      </p>
    </motion.div>
  );
}