Easy-to-use and reusable templates

Copy

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

interface FeatureProps {
  reverse?: boolean;
  title: string;
  description: string;
  image: string;
}

export default function Feature({
  reverse = false,
  title,
  description,
  image,
}: FeatureProps) {
  return (
    <div
      className={`flex w-full items-center justify-evenly ${
        reverse && "flex-row-reverse"
      }`}
    >
      <div className="w-[450px] h-[550px] relative  overflow-hidden  rounded-2xl  relative shadow-2xl shadow-primary/30">
        <Image
          src={image}
          alt={image}
          width={1800}
          height={1800}
          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, (max-width: 1440px) 33vw, 25vw "
          quality={100}
          loading="eager"
        />
      </div>
      <div className="grid gap-4 w-[30%]">
        <h2 className="text-2xl">{title}</h2>
        <p className="text-base-content/70">{description}</p>
      </div>
    </div>
  );
}