Hugging Face's logo

Spaces:
DjPapzin
/
Medi-Scape
Sleeping

App Files Community
Medi-Scape / frontend /react-code /src /components /About.jsx
DjPapzin's picture
DjPapzin
Add falcondemo.mp4 and .keras model to Git LFS
c77acf1
raw
history blame contribute delete
25.7 kB
import React from "react";
const About = () => {
return (
<>
<section
id="about"
className="overflow-hidden pt-20 pb-12 lg:pt-[120px] lg:pb-[90px] bg-white dark:bg-dark"
>
<div className="container mx-auto">
<div className="flex flex-wrap items-center justify-between -mx-4">
<div className="w-full px-4 lg:w-6/12">
<div className="flex items-center -mx-3 sm:-mx-4">
<div className="w-full px-3 sm:px-4 xl:w-1/2">
<div className="py-3 sm:py-4">
<img
src="https://i.ibb.co/gFb3ns6/image-1.jpg"
alt=""
className="w-full rounded-2xl"
/>
</div>
<div className="py-3 sm:py-4">
<img
src="https://i.ibb.co/rfHFq15/image-2.jpg"
alt=""
className="w-full rounded-2xl"
/>
</div>
</div>
<div className="w-full px-3 sm:px-4 xl:w-1/2">
<div className="relative z-10 my-4">
<img
src="https://i.ibb.co/9y7nYCD/image-3.jpg"
alt=""
className="w-full rounded-2xl"
/>
<span className="absolute -right-7 -bottom-7 z-[-1]">
<svg
width={134}
height={106}
viewBox="0 0 134 106"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="1.66667"
cy={104}
r="1.66667"
transform="rotate(-90 1.66667 104)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy={104}
r="1.66667"
transform="rotate(-90 16.3333 104)"
fill="#3056D3"
/>
<circle
cx={31}
cy={104}
r="1.66667"
transform="rotate(-90 31 104)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy={104}
r="1.66667"
transform="rotate(-90 45.6667 104)"
fill="#3056D3"
/>
<circle
cx="60.3334"
cy={104}
r="1.66667"
transform="rotate(-90 60.3334 104)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy={104}
r="1.66667"
transform="rotate(-90 88.6667 104)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy={104}
r="1.66667"
transform="rotate(-90 117.667 104)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy={104}
r="1.66667"
transform="rotate(-90 74.6667 104)"
fill="#3056D3"
/>
<circle
cx={103}
cy={104}
r="1.66667"
transform="rotate(-90 103 104)"
fill="#3056D3"
/>
<circle
cx={132}
cy={104}
r="1.66667"
transform="rotate(-90 132 104)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="89.3333"
r="1.66667"
transform="rotate(-90 1.66667 89.3333)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="89.3333"
r="1.66667"
transform="rotate(-90 16.3333 89.3333)"
fill="#3056D3"
/>
<circle
cx={31}
cy="89.3333"
r="1.66667"
transform="rotate(-90 31 89.3333)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="89.3333"
r="1.66667"
transform="rotate(-90 45.6667 89.3333)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="89.3338"
r="1.66667"
transform="rotate(-90 60.3333 89.3338)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="89.3338"
r="1.66667"
transform="rotate(-90 88.6667 89.3338)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="89.3338"
r="1.66667"
transform="rotate(-90 117.667 89.3338)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="89.3338"
r="1.66667"
transform="rotate(-90 74.6667 89.3338)"
fill="#3056D3"
/>
<circle
cx={103}
cy="89.3338"
r="1.66667"
transform="rotate(-90 103 89.3338)"
fill="#3056D3"
/>
<circle
cx={132}
cy="89.3338"
r="1.66667"
transform="rotate(-90 132 89.3338)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="74.6673"
r="1.66667"
transform="rotate(-90 1.66667 74.6673)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="31.0003"
r="1.66667"
transform="rotate(-90 1.66667 31.0003)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="74.6668"
r="1.66667"
transform="rotate(-90 16.3333 74.6668)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="31.0003"
r="1.66667"
transform="rotate(-90 16.3333 31.0003)"
fill="#3056D3"
/>
<circle
cx={31}
cy="74.6668"
r="1.66667"
transform="rotate(-90 31 74.6668)"
fill="#3056D3"
/>
<circle
cx={31}
cy="31.0003"
r="1.66667"
transform="rotate(-90 31 31.0003)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="74.6668"
r="1.66667"
transform="rotate(-90 45.6667 74.6668)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="31.0003"
r="1.66667"
transform="rotate(-90 45.6667 31.0003)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="74.6668"
r="1.66667"
transform="rotate(-90 60.3333 74.6668)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="30.9998"
r="1.66667"
transform="rotate(-90 60.3333 30.9998)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="74.6668"
r="1.66667"
transform="rotate(-90 88.6667 74.6668)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="30.9998"
r="1.66667"
transform="rotate(-90 88.6667 30.9998)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="74.6668"
r="1.66667"
transform="rotate(-90 117.667 74.6668)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="30.9998"
r="1.66667"
transform="rotate(-90 117.667 30.9998)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="74.6668"
r="1.66667"
transform="rotate(-90 74.6667 74.6668)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="30.9998"
r="1.66667"
transform="rotate(-90 74.6667 30.9998)"
fill="#3056D3"
/>
<circle
cx={103}
cy="74.6668"
r="1.66667"
transform="rotate(-90 103 74.6668)"
fill="#3056D3"
/>
<circle
cx={103}
cy="30.9998"
r="1.66667"
transform="rotate(-90 103 30.9998)"
fill="#3056D3"
/>
<circle
cx={132}
cy="74.6668"
r="1.66667"
transform="rotate(-90 132 74.6668)"
fill="#3056D3"
/>
<circle
cx={132}
cy="30.9998"
r="1.66667"
transform="rotate(-90 132 30.9998)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="60.0003"
r="1.66667"
transform="rotate(-90 1.66667 60.0003)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="16.3333"
r="1.66667"
transform="rotate(-90 1.66667 16.3333)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="60.0003"
r="1.66667"
transform="rotate(-90 16.3333 60.0003)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="16.3333"
r="1.66667"
transform="rotate(-90 16.3333 16.3333)"
fill="#3056D3"
/>
<circle
cx={31}
cy="60.0003"
r="1.66667"
transform="rotate(-90 31 60.0003)"
fill="#3056D3"
/>
<circle
cx={31}
cy="16.3333"
r="1.66667"
transform="rotate(-90 31 16.3333)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="60.0003"
r="1.66667"
transform="rotate(-90 45.6667 60.0003)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="16.3333"
r="1.66667"
transform="rotate(-90 45.6667 16.3333)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="60.0003"
r="1.66667"
transform="rotate(-90 60.3333 60.0003)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="16.3333"
r="1.66667"
transform="rotate(-90 60.3333 16.3333)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="60.0003"
r="1.66667"
transform="rotate(-90 88.6667 60.0003)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="16.3333"
r="1.66667"
transform="rotate(-90 88.6667 16.3333)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="60.0003"
r="1.66667"
transform="rotate(-90 117.667 60.0003)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="16.3333"
r="1.66667"
transform="rotate(-90 117.667 16.3333)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="60.0003"
r="1.66667"
transform="rotate(-90 74.6667 60.0003)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="16.3333"
r="1.66667"
transform="rotate(-90 74.6667 16.3333)"
fill="#3056D3"
/>
<circle
cx={103}
cy="60.0003"
r="1.66667"
transform="rotate(-90 103 60.0003)"
fill="#3056D3"
/>
<circle
cx={103}
cy="16.3333"
r="1.66667"
transform="rotate(-90 103 16.3333)"
fill="#3056D3"
/>
<circle
cx={132}
cy="60.0003"
r="1.66667"
transform="rotate(-90 132 60.0003)"
fill="#3056D3"
/>
<circle
cx={132}
cy="16.3333"
r="1.66667"
transform="rotate(-90 132 16.3333)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="45.3333"
r="1.66667"
transform="rotate(-90 1.66667 45.3333)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="1.66683"
r="1.66667"
transform="rotate(-90 1.66667 1.66683)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="45.3333"
r="1.66667"
transform="rotate(-90 16.3333 45.3333)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="1.66683"
r="1.66667"
transform="rotate(-90 16.3333 1.66683)"
fill="#3056D3"
/>
<circle
cx={31}
cy="45.3333"
r="1.66667"
transform="rotate(-90 31 45.3333)"
fill="#3056D3"
/>
<circle
cx={31}
cy="1.66683"
r="1.66667"
transform="rotate(-90 31 1.66683)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="45.3333"
r="1.66667"
transform="rotate(-90 45.6667 45.3333)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="1.66683"
r="1.66667"
transform="rotate(-90 45.6667 1.66683)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="45.3338"
r="1.66667"
transform="rotate(-90 60.3333 45.3338)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="1.66683"
r="1.66667"
transform="rotate(-90 60.3333 1.66683)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="45.3338"
r="1.66667"
transform="rotate(-90 88.6667 45.3338)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="1.66683"
r="1.66667"
transform="rotate(-90 88.6667 1.66683)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="45.3338"
r="1.66667"
transform="rotate(-90 117.667 45.3338)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="1.66683"
r="1.66667"
transform="rotate(-90 117.667 1.66683)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="45.3338"
r="1.66667"
transform="rotate(-90 74.6667 45.3338)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="1.66683"
r="1.66667"
transform="rotate(-90 74.6667 1.66683)"
fill="#3056D3"
/>
<circle
cx={103}
cy="45.3338"
r="1.66667"
transform="rotate(-90 103 45.3338)"
fill="#3056D3"
/>
<circle
cx={103}
cy="1.66683"
r="1.66667"
transform="rotate(-90 103 1.66683)"
fill="#3056D3"
/>
<circle
cx={132}
cy="45.3338"
r="1.66667"
transform="rotate(-90 132 45.3338)"
fill="#3056D3"
/>
<circle
cx={132}
cy="1.66683"
r="1.66667"
transform="rotate(-90 132 1.66683)"
fill="#3056D3"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
<div className="w-full px-4 lg:w-1/2 xl:w-5/12">
<div className="mt-10 lg:mt-0 mb-20">
<span className="relative inline-flex mb-20 ">
<span className="absolute inset-x-0 bottom-0 border-b-[20px] border-[#b8ffad]"></span>
<span className="relative text-4xl font-bold text-black sm:text-6xl lg:text-5xl">
Why Choose MediScape?
</span>
</span>
<p className="mb-5 text-base text-body-color dark:text-dark-6">
Mediscape stands out with its cutting-edge AI technology that
integrates seamlessly into your workflow, offering
comprehensive tools for handwriting analysis, disease
detection, and symptom-based diagnostics.
</p>
<p className="mb-8 text-base text-body-color dark:text-dark-6">
Our platform is designed to enhance accuracy and efficiency
while ensuring robust data security and compliance with
healthcare regulations. With future-ready solutions and a
dedicated support team, Mediscape provides a transformative
healthcare automation experience that keeps you ahead in the
field of medical technology.
</p>
</div>
</div>
</div>
</div>
</section>
</>
);
};
export default About;