About

1import Image from "next/image";
2import Link from "next/link";
3import React from "react";
4import { FaCheckCircle } from "react-icons/fa";
5
6const BadgeOnImage = () => {
7  return (
8    <section className="p-4 flex flex-col lg:flex-row items-center justify-center gap-12 my-24 ">
9      <AboutImage />
10      <Description />
11    </section>
12  );
13};
14
15export default BadgeOnImage;
16
17const AboutImage = () => {
18  return (
19    <div className="relative w-fit">
20      <Image
21        width={600}
22        height={600}
23        alt=""
24        src="https://images.unsplash.com/photo-1513692398020-cbaea622c427?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
25        className="lg:size-[30rem] object-cover"
26        style={{
27          clipPath: "polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%)",
28        }}
29      />
30
31      <div
32        className="bg-white absolute top-0 left-0 -translate-x-1/4 -translate-y-1/4 pb-4 pr-4"
33        style={{ clipPath: "polygon(0 0, 100% 0, 85% 90%, 0% 100%)" }}
34      >
35        <Image
36          width={700}
37          height={600}
38          alt=""
39          src="https://images.unsplash.com/uploads/14123892966835548e7bd/14369636?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
40          className="size-[10rem] lg:size-[20rem] object-cover "
41          style={{ clipPath: "polygon(0 0, 100% 0, 85% 90%, 0% 100%)" }}
42        />
43      </div>
44      <div className="size-40 bg-white rounded-full absolute bottom-0 right-0 p-4">
45        <div className=" bg-white rounded-full size-full p-4 border-[2px] border-orange-500 flex flex-col text-center items-center justify-center">
46          <p className="text-5xl font-bold text-orange-500">25</p>
47          <p className="text-neutral-500 leading-4 font-semibold ">
48            years of experience
49          </p>
50        </div>
51      </div>
52    </div>
53  );
54};
55
56const Description = () => {
57  return (
58    <div className="flex flex-col justify-center max-w-xl gap-4">
59      <p className="relative w-fit flex items-center gap-2 text-orange-500 text-xl font-semibold uppercase after:content-[''] after:absolute after:w-12 after:h-[2px] after:bg-orange-500 after:-right-16 after:hidden sm:after:block">
60        about our company
61      </p>
62
63      <h2 className="text-6xl font-semibold">We think about your dreams</h2>
64
65      <p className="text-lg text-neutral-600">
66        Many modern construction companies are focusing on sustainable
67        construction practices, using green materials, energy-efficient systems
68        and eco-friendly designs to reduce the impact of of their investments on
69        the environment.
70      </p>
71
72      {/* list */}
73
74      <div className="grid grid-cols-1 sm:grid-cols-2 w-full gap-8 font-semibold">
75        {/* item */}
76        <div className="flex items-center gap-4">
77          <FaCheckCircle className="text-orange-500 text-4xl" />
78          <p className="text-xl text-neutral-600">Available 24/7</p>
79        </div>
80        {/* item */}
81        <div className="flex items-center gap-4">
82          <FaCheckCircle className="text-orange-500 text-4xl" />
83          <p className="text-xl text-neutral-600">Qualified employees</p>
84        </div>
85        {/* item */}
86        <div className="flex items-center gap-4">
87          <FaCheckCircle className="text-orange-500 text-4xl" />
88          <p className="text-xl text-neutral-600">Modern technology</p>
89        </div>
90        {/* item */}
91        <div className="flex items-center gap-4">
92          <FaCheckCircle className="text-orange-500 text-4xl" />
93          <p className="text-xl text-neutral-600">25 years of experience</p>
94        </div>
95      </div>
96
97      {/* bottom */}
98
99      <div className="flex flex-col md:flex-row gap-4 items-start justify-start mt-6">
100        <Link
101          href="/"
102          className="flex w-fit px-8 items-center gap-4 p-4 font-semibold text-xl text-white duration-300 transition-transform active:scale-90 relative overflow-hidden group z-20 cursor-pointer"
103        >
104          Contact Us
105          <div className="absolute w-full h-1/2 top-0 left-0 bg-gradient-to-r from-neutral-800 to-neutral-900 translate-x-[-110%] group-hover:translate-x-[0%] transition-transform duration-700 z-[-1]" />
106          <div className="absolute w-full h-1/2 bottom-0 right-0 bg-gradient-to-r from-neutral-800 to-neutral-900 translate-x-[110%] group-hover:translate-x-[0%] transition-transform duration-700 z-[-1]" />
107          <div className="absolute inset-0 bg-orange-500 z-[-2]" />
108        </Link>
109        <div className="border-l-2 border-neutral-300 flex flex-col pl-4">
110          <p className="text-xl font-semibold">Benjamin Smith</p>
111          <p className="text-orange-500">CEO & Founder</p>
112        </div>
113      </div>
114    </div>
115  );
116};
117

1import { FaPerson } from "react-icons/fa6";
2import classes from "./expert.module.css";
3import Image from "next/image";
4import Link from "next/link";
5
6const ExpertAbout = () => {
7  function yearsSince(dataObecna: any) {
8    const dataUrodzenia: any = new Date("2011-03-12");
9    const roznicaCzasu = dataObecna - dataUrodzenia;
10    const roznicaWiek = new Date(roznicaCzasu).getFullYear() - 1970;
11    return roznicaWiek;
12  }
13
14  return (
15    <div className="mx-auto grid place-items-center p-4 lg:p-8">
16      <section
17        className={
18          classes.bgBoxes +
19          " bg-fixed max-w-7xl rounded-3xl px-4  relative text-white text-center flex flex-col items-center justify-center gap-12 overflow-hidden w-full"
20        }
21      >
22        <div className="text-2xl flex items-center gap-4 text-center font-bold mt-12 z-20">
23          <div className="text-orange-400">
24            <FaPerson />
25          </div>
26          <h4>Experts</h4>
27        </div>
28
29        <p className="text-5xl font-bold text-center z-20">
30          Many years of experience
31        </p>
32        <Link
33          href=""
34          className="px-6 py-4 bg-orange-400 rounded-lg font-semibold hover:bg-orange-600 active:scale-95 transition-all duration-300 z-20"
35        >
36          Get in touch
37        </Link>
38        <div className="z-20 flex flex-col lg:flex-row items-center gap-8 lg:items-end justify-around w-full pt-24 lg:pt-12">
39          {/* item */}
40          <div className="bg-white px-16 pt-4 rounded-xl lg:rounded-b-none lg:max-w-[20rem] w-full">
41            <Image
42              width={300}
43              height={600}
44              src="/img/worker.png"
45              alt="Dariusz Kowalski"
46              className="scale-[1.4] origin-bottom"
47            />
48          </div>
49          {/* item */}
50          <div className="flex flex-col gap-4">
51            <p className="text-8xl font-bold text-orange-400">
52              {yearsSince(new Date())}
53            </p>
54            <div className="bg-white p-8 rounded-xl lg:rounded-b-none lg:max-w-[20rem] lg:w-[1000px]">
55              <p className="text-2xl font-bold text-black">
56                So many years of experience has our company
57              </p>
58              <p className="text-xl text-neutral-500">
59                Our many years of experience translates into the quality and
60                reliability of our services.
61              </p>
62            </div>
63          </div>
64          <div className="bg-white rounded-xl lg:rounded-b-none lg:max-w-[20rem] w-full relative overflow-hidden h-[26rem]">
65            <Image
66              width={600}
67              height={800}
68              src="https://images.unsplash.com/photo-1593630265256-d2cc162ab58f?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
69              alt=""
70              className="object-cover w-full h-full"
71            />
72          </div>
73        </div>
74        <div
75          className={
76            classes.bgRoudedMask + " absolute top-0 left-0 w-full h-full z-10"
77          }
78        ></div>
79      </section>
80    </div>
81  );
82};
83
84export default ExpertAbout;
85
86
87// here you can have styles for expert.module.css that you have to add under this file
88
89.bgBoxes {
90  background-color: #000000;
91  opacity: 1;
92  background-image: linear-gradient(#242424 2px, transparent 2px),
93    linear-gradient(to right, #242424 2px, #000000 2px);
94  background-size: 100px 100px;
95}
96.bgRoudedMask {
97  background: rgb(0, 0, 0);
98  background: -moz-radial-gradient(
99    circle,
100    rgba(0, 0, 0, 0) 56%,
101    rgba(0, 0, 0, 1) 100%
102  );
103  background: -webkit-radial-gradient(
104    circle,
105    rgba(0, 0, 0, 0) 56%,
106    rgba(0, 0, 0, 1) 100%
107  );
108  background: radial-gradient(
109    circle,
110    rgba(0, 0, 0, 0) 56%,
111    rgba(0, 0, 0, 1) 100%
112  );
113  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
114}
115
116