147 lines
7.4 KiB
JavaScript
147 lines
7.4 KiB
JavaScript
import React from "react";
|
|
import Image from "next/image";
|
|
export default function Features3() {
|
|
return (
|
|
<section id="services">
|
|
<div className="wrapper ">
|
|
<div className="container py-[5rem] xl:!py-[7rem] lg:!py-[7rem] md:!py-[7rem]">
|
|
<div className="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-50px] items-center">
|
|
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:px-0 lg:px-0 !mt-[50px]">
|
|
<div className="flex flex-wrap mx-[-15px] !mt-[-30px] !text-center">
|
|
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
|
<div className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-6">
|
|
<figure className="card-img-top overlay overlay-1 group">
|
|
<a href="#">
|
|
<Image
|
|
className="max-w-full h-auto"
|
|
alt="image"
|
|
src="/assets/img/photos/fs4.jpg"
|
|
width={600}
|
|
height={400}
|
|
/>
|
|
</a>
|
|
<figcaption className="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 className="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">
|
|
View Gallery
|
|
</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div className="card-body p-4">
|
|
<h3 className="h4 !mb-0">Products</h3>
|
|
</div>
|
|
{/*/.card-body */}
|
|
</div>
|
|
{/* /.card */}
|
|
<div className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<figure className="card-img-top overlay overlay-1 group">
|
|
<a href="#">
|
|
<Image
|
|
className="max-w-full h-auto"
|
|
alt="image"
|
|
src="/assets/img/photos/fs6.jpg"
|
|
width={600}
|
|
height={400}
|
|
/>
|
|
</a>
|
|
<figcaption className="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 className="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">
|
|
View Gallery
|
|
</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div className="card-body p-4">
|
|
<h3 className="h4 !mb-0">Recipes</h3>
|
|
</div>
|
|
{/*/.card-body */}
|
|
</div>
|
|
{/* /.card */}
|
|
</div>
|
|
{/* /column */}
|
|
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
|
<div className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] xl:!mt-6 lg:!mt-6 md:!mt-6 !mb-6">
|
|
<figure className="card-img-top overlay overlay-1 group">
|
|
<a href="#">
|
|
<Image
|
|
className="max-w-full h-auto"
|
|
alt="image"
|
|
src="/assets/img/photos/fs5.jpg"
|
|
width={600}
|
|
height={400}
|
|
/>
|
|
</a>
|
|
<figcaption className="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 className="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">
|
|
View Gallery
|
|
</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div className="card-body p-4">
|
|
<h3 className="h4 !mb-0">Restaurants</h3>
|
|
</div>
|
|
{/*/.card-body */}
|
|
</div>
|
|
{/* /.card */}
|
|
<div className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<figure className="card-img-top overlay overlay-1 group">
|
|
<a href="#">
|
|
<Image
|
|
className="max-w-full h-auto"
|
|
alt="image"
|
|
src="/assets/img/photos/fs7.jpg"
|
|
width={600}
|
|
height={400}
|
|
/>
|
|
</a>
|
|
<figcaption className="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 className="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">
|
|
View Gallery
|
|
</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div className="card-body p-4">
|
|
<h3 className="h4 !mb-0">Still Life</h3>
|
|
</div>
|
|
{/*/.card-body */}
|
|
</div>
|
|
{/* /.card */}
|
|
</div>
|
|
{/* /column */}
|
|
</div>
|
|
{/* /.row */}
|
|
</div>
|
|
{/* /column */}
|
|
<div className="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] xl:px-0 lg:px-0 !mt-[50px]">
|
|
<h2 className="xl:!text-[1.7rem] !text-[calc(1.295rem_+_0.54vw)] !leading-[1.25] !font-semibold !mb-3">
|
|
My Services
|
|
</h2>
|
|
<p className="lead !text-[1.1rem] !leading-[1.55] font-medium">
|
|
I would like to give you a unique photography experience,
|
|
capture your products with excellent composition and lighting
|
|
skills.
|
|
</p>
|
|
<p>
|
|
Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum
|
|
dolor sit amet, consectetur adipiscing elit. Nullam quis risus
|
|
eget urna mollis ornare vel eu leo. Nullam quis risus eget urna
|
|
mollis ornare vel eu leo. Maecenas faucibus mollis elit
|
|
interdum. Duis mollis, est non commodo luctus, nisi erat ligula
|
|
mollis metus auctor fringilla.
|
|
</p>
|
|
<a
|
|
href="#"
|
|
className="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !rounded-[50rem] !mt-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
|
>
|
|
More Details
|
|
</a>
|
|
</div>
|
|
{/* /column */}
|
|
</div>
|
|
{/* /.row */}
|
|
</div>
|
|
{/* /.container */}
|
|
</div>
|
|
{/* /.wrapper */}
|
|
</section>
|
|
);
|
|
}
|