import Image from "next/image";
import { BsArrowRight } from "react-icons/bs";

export const Card2 = () => (
  <div className=" rounded-lg bg-white border shadow-md group-hover:bg-[#146C43] group trasition-all duration-500">
    <div className=" px-14 py-10 flex flex-col justify-center items-center">
      <div className="  w-[40px] h-[45px] relative ">
        <Image src="/images/Vector.svg" alt="" fill />
      </div>

      <h2 className="transition-all duration-500 text-[#212529] text-3xl mt-5 font-bold group-hover:text-white">
        Pre-roles
      </h2>
      <p className="transition-all duration-500 text-base text-[#333333] mb-5 text-center group-hover:text-white">
        Not just a cannabis brand but a lifestyle Not just a cannabis brand but
        a lifestyle{" "}
      </p>
      <BsArrowRight className=" text-[#000000] text-3xl group-hover:text-white" />
    </div>
  </div>
);

import Image from 'next/image';
import React from 'react';

type Props = {};

const Card5 = (props: Props) => {
  return (
    <div className=" border border-[#CED4DA] bg-white rounded-md group">
      <div className=" p-6">
        <div className=" md:w-full md:h-[301px] relative rounded-lg w-[325px] h-[295px] ">
          <Image
            src={'/images/Background (1).png'}
            alt=""
            fill
            className=" object-contain"
          />
        </div>
        <h2 className=" text-xl text-[#212529] group-hover:text-[#146C43] font-bold duration-1000 mb-2 uppercase">
          blog post can announce upcoming event now and Then
        </h2>
        <p className=" text-base text-[#6C757D]">
          by John Smith | 18 July 2023
        </p>
      </div>
    </div>
  );
};

export default Card5;

export const Card7 = () => {
  return (
    <div className="w-full rounded-md shadow-md lg:max-w-sm">
      <img
        className="object-cover w-full h-48 rounded-tl-md rounded-tr-md"
        src="https://cdn.pixabay.com/photo/2022/08/18/09/20/houses-7394390__340.jpg"
        alt="image"
      />
      <div className="p-4">
        <h4 className="text-xl font-semibold tracking-tight text-blue-600">
          Lorem ipsum dolor sit amet consectetur
        </h4>
        <p className="mb-2 leading-normal">
          react tailwind css card with image It is a long established fact that
          a reader will be distracted by the readable content.
        </p>
        <button className="px-4 py-2 text-sm text-blue-100 bg-blue-500 rounded shadow">
          Read more
        </button>
      </div>
    </div>
  );
};

import ButtonPrimary from '@/components/Buttons';
import Image from 'next/image';

export const Card8 = () => {
  return (
    <div className="p-4 border border-gray-200 rounded-md flex gap-5 w-[400px] h-[150px]">
      <div className="">
        <Image
          src="/images/image 22942.png"
          alt="img"
          width={120}
          height={120}
          className=" object-cover"
        />
      </div>

      <div>
        <h3 className="text-xl font-medium text-sc">Molotov</h3>
        <p className="text-base font-medium mb-3 text-[#8D8D8D]">Series I</p>
        <ButtonPrimary>Details</ButtonPrimary>
      </div>
    </div>
  );
};

export const Card9 = () => {
  return (
    <div className="flex items-center justify-center bg-neutral-800">
      <div className="grid grid-cols-1 gap-5">
        <div className="group relative cursor-pointer items-center justify-center overflow-hidden transition-shadow hover:shadow-xl hover:shadow-black/30">
          <div className="h-96 w-72">
            <img
              className="h-full w-full object-cover transition-transform duration-500 group-hover:rotate-3 group-hover:scale-125"
              src="https://images.unsplash.com/photo-1502675135487-e971002a6adb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80"
              alt=""
            />
          </div>
          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black group-hover:from-black/70 group-hover:via-black/60 group-hover:to-black/70"></div>
          <div className="absolute inset-0 flex translate-y-[80%] flex-col items-center justify-center px-9 text-center transition-all duration-700 group-hover:translate-y-0">
            <h1 className="font-dmserif text-3xl font-bold text-white">
              Shooting Star
            </h1>
            <p className="mb-3 text-lg italic text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
              dolore adipisci placeat.
            </p>
            <button className="rounded-full bg-neutral-900 py-2 px-3.5 font-com text-sm capitalize text-white shadow shadow-black/60">
              See More
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export const Card10 = () => {
  return (
    <div className="flex items-center justify-center">
      <div className="group h-96 w-80 [perspective:1000px]">
        <div className="relative h-full w-full rounded-xl shadow-xl transition-all duration-700 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
          <div className="absolute inset-0">
            <img
              className="h-full w-full rounded-xl object-cover shadow-xl shadow-black/40"
              src="https://images.unsplash.com/photo-1562583489-bf23ec64651d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80')"
              alt=""
            />
          </div>
          <div className="absolute inset-0 h-full w-full rounded-xl bg-black/80 px-12 text-center text-slate-200 [transform:rotateY(180deg)] [backface-visibility:hidden]">
            <div className="flex min-h-full flex-col items-center justify-center">
              <h1 className="text-3xl font-bold">Jane Doe</h1>
              <p className="text-lg">Photographer & Art</p>
              <p className="text-base">
                Lorem ipsum dolor sit amet consectetur adipisicing.
              </p>
              <button className="mt-2 rounded-md bg-neutral-800 py-1 px-2 text-sm hover:bg-neutral-900">
                Read More
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

import Image from 'next/image';
import Link from 'next/link';

export const Card13 = () => {
  return (
    <Link href={'/residential/hi'} className="bg-[#F1F5F9] group">
      <div className="relative overflow-hidden">
        <div className="relative w-full h-56">
          <Image
            src="/images/card/service-1.svg"
            alt="img"
            fill
            className=" object-cover"
          />
        </div>
        <div className="absolute inset-0 bg-gradient-to-t from-transparent group-hover:from-black/60 group-hover:via-black/50 group-hover:to-black/60"></div>
        <div className="absolute inset-0 flex translate-y-[200px] flex-col items-center justify-center px-9 text-center transition-all duration-700 group-hover:translate-y-0">
          <Image
            src={'/images/card/hover_img.svg'}
            width={48}
            height={48}
            className=" object-cover"
            alt=""
          />
        </div>
      </div>
      <div className="px-3 py-5 text-center bg-[#F1F5F9]">
        <h2 className="text-[#334155] font-semibold">Weeding & Cleanups</h2>
        <p className="text-[#475569] mt-1 mb-3">
          It is a long established fact that reader will be distracted by the
        </p>
        <Link href="" className="text-[#15803D] font-semibold">
          Let’s Starts Today
        </Link>
      </div>
    </Link>
  );
};

import Image from 'next/image';
import Link from 'next/link';
import { BiLogoInstagramAlt } from 'react-icons/bi';
import { FaFacebookF, FaLinkedinIn } from 'react-icons/fa';

export const Card14 = () => {
  return (
    <div>
      <div className="relative w-full h-56">
        <Image
          src="/images/card/profile.svg"
          alt="img"
          fill
          className="translate-y-1/2 object-contain"
        />
      </div>
      <div className="bg-[#F1F5F9] pt-28 px-8 py-5 text-center mt-2">
        <h2 className="text-[#334155] font-semibold">Jacqueline Capicchioni</h2>
        <p className="text-[#475569] mt-1 mb-3">Administration</p>
        <div className="flex items-center justify-center gap-4 text-[#15803D] text-lg">
          <FaFacebookF />
          <BiLogoInstagramAlt />
          <FaLinkedinIn />
        </div>
      </div>
    </div>
  );
};

import Image from 'next/image';
import Link from 'next/link';
import React from 'react';

type Props = {};

const Card16 = (props: Props) => {
  return (
    <div className="group w-full md:h-[516px] h-[420px] overflow-hidden">
      <div className="relative">
        <div className="relative md:h-[428px] h-[340px] group-hover:h-[252px] group-hover:md:h-[275px] duration-500 transition-all">
          <Image
            src={'/images/card/service-1.svg'}
            fill
            className=" object-cover"
            alt=""
          />
        </div>
        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black group-hover:from-black/50 group-hover:via-black/40 group-hover:to-black/50"></div>
      </div>

      <p className="_heading-3 text-gray-700 bg-white py-5 text-center group-hover:hidden">
        Weeding
      </p>
      <div className=" bg-white hidden group-hover:flex flex-col items-center justify-center p-6 md:py-12">
        <h2 className="_heading-3 text-s700 pb-3">Sod Installation</h2>
        <p className="_body_text text-s600 text-center">
          Lorem ipsum is the filler text that typically demonstrates the font
          and style of a text{' '}
        </p>
        <Link
          href={'/project/1'}
          className="_btn_text text-center text-g700 py-2"
        >
          View All
        </Link>
      </div>
    </div>
  );
};

export default Card16;

import Image from 'next/image';
import React from 'react';
import { BsArrowRight } from 'react-icons/bs';

type Props = {};

const Card6 = (props: Props) => {
  return (
    <div className=" w-[240px] h-[342px]">
      <Image
        src={'/images/image 22942.png'}
        width={240}
        height={230}
        className=" object-cover"
        alt=""
      />
      <h2 className="text-2xl text-white bg-[#198754] py-3 font-bold px-3">
        Berry Lime
      </h2>
      <div className=" flex justify-between items-center text-white bg-[#146C43] py-3 text-base px-3">
        <p>Our Retailers</p>
        <BsArrowRight />
      </div>
    </div>
  );
};

export default Card6;