Card

import React from "react";
import { Building2, Clock, DollarSign, MapPin } from "lucide-react";
const Card = () => {
  return (
    <div className="h-screen flex justify-center items-center bg-gray-50 dark:bg-gray-900">
      <div className="w-full max-w-md mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-sm overflow-hidden border border-gray-200/80 dark:border-gray-700/50">
        <div className="p-6">
          <div className="flex justify-between items-start mb-5">
            <div>
              <h2 className="text-xl font-semibold mb-1 dark:text-white tracking-tight">
                Software Engineer
              </h2>
              <p className="text-sm text-gray-500 dark:text-gray-400 flex items-center font-medium">
                <Building2 className="w-4 h-4 mr-2" />
                TechCorp Inc.
              </p>
            </div>
            <span className="bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-300 text-xs font-semibold px-3 py-1.5 rounded-full">
              Full-time
            </span>
          </div>
          <div className="space-y-2.5 mb-5">
            <div className="flex items-center text-sm text-gray-600 dark:text-gray-400">
              <MapPin className="w-4 h-4 mr-2.5 text-gray-400 dark:text-gray-500" />
              <span>San Francisco, CA (On-site)</span>
            </div>
            <div className="flex items-center text-sm text-gray-600 dark:text-gray-400">
              <DollarSign className="w-4 h-4 mr-2.5 text-gray-400 dark:text-gray-500" />
              <span>$120,000 - $160,000 per year</span>
            </div>
            <div className="flex items-center text-sm text-gray-600 dark:text-gray-400">
              <Clock className="w-4 h-4 mr-2.5 text-gray-400 dark:text-gray-500" />
              <span>Posted 2 days ago</span>
            </div>
          </div>
          <p className="mb-6 text-sm leading-relaxed text-gray-600 dark:text-gray-400">
            We're seeking a talented Software Engineer to join our dynamic team.
            You'll work on cutting-edge projects, collaborate with
            cross-functional teams, and have the opportunity to make a
            significant impact on our products.
          </p>
          <div className="flex gap-3">
            <button className="flex-1 rounded-full bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 active:bg-blue-800 transition-all duration-150 shadow-sm">
              Apply Now
            </button>
            <button className="flex-1 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/50 px-5 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600/50 active:bg-gray-100 dark:active:bg-gray-600 transition-all duration-150">
              View Details
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};
export default Card;

import React from "react";
import { ShoppingCart, Star } from "lucide-react";
const Card = () => {
  return (
    <div className="min-h-screen flex justify-center items-center bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 md:p-8">
      <div className="w-full max-w-sm bg-white dark:bg-gray-800 rounded-3xl shadow-sm overflow-hidden border border-gray-200/80 dark:border-gray-700/50">
        <div className="relative">
          <img
            src="/headphone.jpg"
            alt="Wireless Headphones"
            className="w-full h-48 sm:h-56 object-cover"
          />
          <span className="absolute top-4 right-4 bg-red-500 text-white text-xs font-semibold px-3 py-1.5 rounded-full shadow-sm">
            Sale
          </span>
        </div>
        <div className="p-6 sm:p-7">
          <h2 className="text-xl font-semibold mb-2 dark:text-white tracking-tight">
            Wireless Noise-Cancelling Headphones
          </h2>
          <div className="flex items-center mb-4">
            {[...Array(4)].map((_, i) => (
              <Star
                key={i}
                className="w-4 h-4 fill-yellow-400 text-yellow-400"
              />
            ))}
            <Star className="w-4 h-4 text-gray-300 dark:text-gray-600" />
            <span className="ml-2 text-sm text-gray-500 dark:text-gray-400 font-medium">
              (4.0)
            </span>
          </div>
          <p className="text-gray-600 dark:text-gray-400 text-sm mb-5 leading-relaxed">
            Experience crystal-clear audio with our premium noise-cancelling
            headphones. Perfect for music lovers and frequent travelers.
          </p>
          <div className="flex justify-between items-center mb-5">
            <div>
              <span className="text-2xl font-semibold dark:text-white tracking-tight">
                $249.99
              </span>
              <span className="text-sm text-gray-400 dark:text-gray-500 line-through ml-2">
                $299.99
              </span>
            </div>
            <span className="bg-green-50 text-green-600 dark:bg-green-900/30 dark:text-green-300 text-xs font-semibold px-3 py-1.5 rounded-full">
              Save $50
            </span>
          </div>
          <button className="flex items-center justify-center w-full rounded-full bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 active:bg-blue-800 transition-all duration-150 shadow-sm">
            <ShoppingCart className="mr-2 h-5 w-5" /> Add to Cart
          </button>
        </div>
      </div>
    </div>
  );
};
export default Card;

import React from "react";
import { Briefcase, Link, MapPin } from "lucide-react";
const Card = () => {
  return (
    <div className="min-h-screen flex justify-center items-center bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 md:p-8">
      <div className="w-full max-w-sm bg-white dark:bg-gray-800 rounded-3xl shadow-sm overflow-hidden border border-gray-200/80 dark:border-gray-700/50">
        <div className="p-6 sm:p-7 text-center">
          <div className="relative w-24 h-24 sm:w-28 sm:h-28 rounded-full overflow-hidden mx-auto mb-5 ring-4 ring-gray-100 dark:ring-gray-700/50 shadow-sm">
            <img
              src="/pfp.jpg"
              alt="Jane Doe"
              className="w-full h-full object-cover"
            />
          </div>
          <h2 className="text-xl sm:text-2xl font-semibold mb-1 dark:text-white tracking-tight">
            Jane Doe
          </h2>
          <p className="text-gray-500 dark:text-gray-400 mb-4 text-sm font-medium">
            Senior UX Designer
          </p>
          <div className="flex flex-wrap justify-center gap-2 mb-5">
            {["UI/UX", "Product Design", "Prototyping"].map((skill) => (
              <span
                key={skill}
                className="bg-gray-100 dark:bg-gray-700/50 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1.5 rounded-full"
              >
                {skill}
              </span>
            ))}
          </div>
          <div className="space-y-2.5 mb-5">
            <div className="flex items-center justify-center text-sm text-gray-600 dark:text-gray-400">
              <MapPin className="w-4 h-4 mr-2 text-gray-400 dark:text-gray-500" />
              San Francisco, CA
            </div>
            <div className="flex items-center justify-center text-sm text-gray-600 dark:text-gray-400">
              <Briefcase className="w-4 h-4 mr-2 text-gray-400 dark:text-gray-500" />
              TechCorp Inc.
            </div>
            <div className="flex items-center justify-center text-sm">
              <Link className="w-4 h-4 mr-2 text-gray-400 dark:text-gray-500" />
              <a
                href="#"
                className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium transition-colors duration-150"
              >
                portfolio.com/janedoe
              </a>
            </div>
          </div>
          <p className="text-sm text-gray-600 dark:text-gray-400 mb-6 leading-relaxed px-2">
            Passionate UX designer with 5+ years of experience creating
            intuitive and engaging digital experiences for global brands.
          </p>
        </div>
        <div className="px-6 sm:px-7 pb-6 sm:pb-7 flex gap-3">
          <button className="flex-1 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/50 px-4 sm:px-5 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600/50 active:bg-gray-100 dark:active:bg-gray-600 transition-all duration-150">
            Message
          </button>
          <button className="flex-1 rounded-full bg-blue-600 px-4 sm:px-5 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 active:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 transition-all duration-150 shadow-sm">
            Connect
          </button>
        </div>
      </div>
    </div>
  );
};
export default Card;

import React from "react";
import { Bath, Bed, Car, Maximize2, Heart } from "lucide-react";
const Card = () => {
  return (
    <div className="min-h-screen flex justify-center items-center bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 md:p-8">
      <div className="w-full max-w-sm overflow-hidden rounded-3xl bg-white dark:bg-gray-800 shadow-sm border border-gray-200/80 dark:border-gray-700/50">
        <div className="relative">
          <img
            src="/property.jpg"
            alt="Modern house exterior"
            className="h-56 w-full object-cover"
          />
          <span className="absolute left-4 top-4 rounded-full bg-green-500 px-3 py-1.5 text-xs font-semibold text-white shadow-sm">
            For Sale
          </span>
          <button className="absolute right-4 top-4 rounded-full bg-white/90 dark:bg-gray-800/90 p-2 text-gray-400 hover:text-rose-500 dark:hover:text-rose-400 hover:bg-white dark:hover:bg-gray-800 transition-all duration-150 shadow-sm backdrop-blur-sm">
            <Heart className="h-5 w-5" />
            <span className="sr-only">Add to favorites</span>
          </button>
        </div>
        <div className="p-6 sm:p-7">
          <h2 className="mb-2 text-2xl font-semibold text-gray-900 dark:text-white tracking-tight">
            $450,000
          </h2>
          <p className="mb-5 text-sm text-gray-500 dark:text-gray-400">
            123 Modern Lane, Cityville, State 12345
          </p>
          <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm text-gray-600 dark:text-gray-400">
            <div className="flex items-center">
              <Bed className="mr-2.5 h-4 w-4 text-gray-400 dark:text-gray-500" />
              <span>3 Beds</span>
            </div>
            <div className="flex items-center">
              <Bath className="mr-2.5 h-4 w-4 text-gray-400 dark:text-gray-500" />
              <span>2 Baths</span>
            </div>
            <div className="flex items-center">
              <Car className="mr-2.5 h-4 w-4 text-gray-400 dark:text-gray-500" />
              <span>2 Garage</span>
            </div>
            <div className="flex items-center">
              <Maximize2 className="mr-2.5 h-4 w-4 text-gray-400 dark:text-gray-500" />
              <span>1,800 sqft</span>
            </div>
          </div>
        </div>
        <div className="bg-gray-50 dark:bg-gray-900/50 px-6 sm:px-7 py-5 sm:py-6">
          <button className="w-full rounded-full bg-blue-600 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 active:bg-blue-800 transition-all duration-150 shadow-sm">
            View Property
          </button>
        </div>
      </div>
    </div>
  );
};
export default Card;

import React from "react";
import { Clock, MessageCircle } from "lucide-react";
const Card = () => {
  return (
    <div className="min-h-screen flex justify-center items-center bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 md:p-8">
      <div className="w-full max-w-md overflow-hidden rounded-3xl bg-white dark:bg-gray-800 shadow-sm border border-gray-200/80 dark:border-gray-700/50">
        <img
          src="/thumbnail.jpg"
          alt="Article thumbnail"
          className="h-48 sm:h-56 w-full object-cover"
        />
        <div className="p-6 sm:p-7">
          <span className="mb-3 inline-block rounded-full bg-blue-50 px-3 py-1.5 text-xs font-semibold text-blue-600 dark:bg-blue-900/30 dark:text-blue-300">
            Technology
          </span>
          <h2 className="mb-2 text-xl font-semibold text-gray-900 dark:text-white tracking-tight">
            The Future of AI in Web Development
          </h2>
          <p className="mb-5 text-sm text-gray-600 dark:text-gray-400 line-clamp-2 leading-relaxed">
            Explore how artificial intelligence is revolutionizing the way we
            build and interact with websites...
          </p>
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <img
                src="/placeholder.svg?height=32&width=32"
                alt="Author"
                className="h-8 w-8 rounded-full ring-2 ring-gray-100 dark:ring-gray-700/50"
              />
              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                John Doe
              </span>
            </div>
            <div className="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
              <Clock className="h-4 w-4 text-gray-400 dark:text-gray-500" />
              <span>5 min read</span>
            </div>
          </div>
        </div>
        <div className="flex items-center justify-between bg-gray-50 dark:bg-gray-900/50 px-6 sm:px-7 py-4 sm:py-5">
          <div className="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
            <MessageCircle className="h-4 w-4 text-gray-400 dark:text-gray-500" />
            <span>24 comments</span>
          </div>
          <button className="rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/50 px-5 py-2 text-sm font-semibold text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600/50 active:bg-gray-100 dark:active:bg-gray-600 transition-all duration-150">
            Read More
          </button>
        </div>
      </div>
    </div>
  );
};
export default Card;

import React from "react";
import { Eye, MessageCircle, ThumbsUp } from "lucide-react";
const Card = () => {
  return (
    <div className="min-h-screen flex justify-center items-center bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 md:p-8">
      <div className="w-full max-w-md rounded-3xl bg-white dark:bg-gray-800 shadow-sm border border-gray-200/80 dark:border-gray-700/50 transition-all duration-200 hover:shadow-md">
        <div className="p-6 sm:p-7">
          <div className="flex items-center justify-between mb-5">
            <span className="rounded-full bg-gray-100 px-3 py-1.5 text-xs font-semibold text-gray-600 dark:bg-gray-700/50 dark:text-gray-300">
              Discussion
            </span>
            <span className="text-xs text-gray-500 dark:text-gray-400 font-medium">
              2 hours ago
            </span>
          </div>
          <h2 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white tracking-tight">
            Best practices for React hooks?
          </h2>
          <p className="mb-5 text-sm text-gray-600 dark:text-gray-400 line-clamp-2 leading-relaxed">
            I'm new to React hooks and I'm wondering what are some best
            practices when using them in larger applications...
          </p>
          <div className="flex items-center space-x-3">
            <img
              src="/pfp.jpg"
              alt="User"
              className="h-8 w-8 rounded-full ring-2 ring-gray-100 dark:ring-gray-700/50"
            />
            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
              Jane Smith
            </span>
          </div>
        </div>
        <div className="flex items-center justify-between rounded-b-3xl bg-gray-50 dark:bg-gray-900/50 px-6 sm:px-7 py-4 sm:py-5">
          <div className="flex flex-wrap gap-x-5 gap-y-2">
            <div className="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
              <MessageCircle className="h-4 w-4 text-gray-400 dark:text-gray-500" />
              <span>15</span>
            </div>
            <div className="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
              <ThumbsUp className="h-4 w-4 text-gray-400 dark:text-gray-500" />
              <span>23</span>
            </div>
            <div className="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
              <Eye className="h-4 w-4 text-gray-400 dark:text-gray-500" />
              <span>102</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default Card;

import React from "react";
import { Clock, Headphones, Share2 } from "lucide-react";
const Card = () => {
  return (
    <div className="min-h-screen flex justify-center items-center bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 md:p-8">
      <div className="w-full max-w-md rounded-3xl bg-white dark:bg-gray-800 shadow-sm border border-gray-200/80 dark:border-gray-700/50">
        <div className="relative">
          <img
            src="/podcast.jpg"
            alt="Podcast cover"
            className="h-48 sm:h-56 w-full object-cover rounded-t-3xl"
          />
          <span className="absolute left-4 top-4 rounded-full bg-red-500 px-3 py-1.5 text-xs font-semibold text-white shadow-sm">
            New Episode
          </span>
        </div>
        <div className="p-6 sm:p-7">
          <h2 className="mb-2 text-xl font-semibold text-gray-900 dark:text-white tracking-tight">
            The Web Dev Podcast
          </h2>
          <p className="mb-5 text-sm text-gray-600 dark:text-gray-400 line-clamp-2 leading-relaxed">
            Episode 42: Mastering CSS Grid - Tips and Tricks from the Experts
          </p>
          <div className="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 mb-5">
            <div className="flex items-center space-x-2">
              <Clock className="h-4 w-4 text-gray-400 dark:text-gray-500" />
              <span>45 min</span>
            </div>
            <div className="flex items-center space-x-2">
              <Headphones className="h-4 w-4 text-gray-400 dark:text-gray-500" />
              <span>10k listens</span>
            </div>
          </div>
          <div className="flex items-center space-x-3">
            <div className="flex -space-x-2">
              <img
                src="/pfp.jpg"
                alt="Host 1"
                className="h-7 w-7 rounded-full ring-2 ring-white dark:ring-gray-800"
              />
              <img
                src="/pfp.jpg"
                alt="Host 2"
                className="h-7 w-7 rounded-full ring-2 ring-white dark:ring-gray-800"
              />
            </div>
            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
              Sarah & Mike
            </span>
          </div>
        </div>
        <div className="flex items-center gap-3 rounded-b-3xl bg-gray-50 dark:bg-gray-900/50 px-6 sm:px-7 py-5 sm:py-6">
          <button className="flex items-center justify-center flex-1 rounded-full bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 active:bg-blue-800 transition-all duration-150 shadow-sm">
            <Headphones className="mr-2 h-4 w-4" />
            Listen Now
          </button>
          <button className="flex items-center justify-center flex-1 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/50 px-5 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600/50 active:bg-gray-100 dark:active:bg-gray-600 transition-all duration-150">
            <Share2 className="mr-2 h-4 w-4" />
            Share
          </button>
        </div>
      </div>
    </div>
  );
};
export default Card;