You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
import React from "react";
|
|
|
|
|
|
const Competitions = () => {
|
|
|
return (
|
|
|
<div className="container mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative">
|
|
|
<h1 className="text-4xl font-bold text-center pb-20 ">Competitions</h1>
|
|
|
<div className="w-[330px] h-[220px] md:w-[600px] md:h-[400px] lg:w-[800px] lg:h-[500px] border-l-2 border-b-2 border-black mx-auto relative md:absolute md:top-[50%] md:translate-y-[-50%] md:left-[50%] md:translate-x-[-50%] ">
|
|
|
<div className="absolute top-[-15px] left-[-9px] h-0 w-0 border-x-8 border-x-transparent border-b-[16px] border-black"></div>
|
|
|
<div className="absolute bottom-[-9px] right-[-9px] h-0 w-0 border-y-8 border-y-transparent border-l-[16px] border-black"></div>
|
|
|
<span className="absolute top-[16%] left-[-16%] md:top-[10%] md:left-[-10%] rotate-[-90deg]">
|
|
|
Innovative
|
|
|
</span>
|
|
|
<span className="absolute bottom-[-10%] right-[6%] md:bottom-[-10%] md:right-[10%] ">
|
|
|
Specialization
|
|
|
</span>
|
|
|
<div className="absolute top-0 left-[10%] w-[80px] h-[60px] md:top-0 md:left-[10%] md:w-[120px] md:h-[80px] rounded-[50%] flex justify-center items-center bg-slate-200 ">
|
|
|
<span className="text-center text-xs md:text-lg">Google</span>
|
|
|
</div>
|
|
|
<div className="absolute top-[10%] left-[35%] w-[80px] h-[60px] md:top-[10%] md:left-[30%] md:w-[120px] md:h-[80px] rounded-[50%] flex justify-center items-center bg-slate-200 ">
|
|
|
<span className="text-center text-xs md:text-lg">ChatGPT</span>
|
|
|
</div>
|
|
|
<div className="absolute top-[15%] right-[10%] w-[80px] h-[60px] md:top-[15%] md:right-[10%] md:w-[120px] md:h-[80px] rounded-[50%] flex justify-center items-center bg-gradient-to-r from-cyan-400 to-blue-400">
|
|
|
<span className="text-center text-white font-bold text-xs md:text-lg">
|
|
|
Us
|
|
|
</span>
|
|
|
</div>
|
|
|
<div className="absolute bottom-[15%] right-[25%] w-[80px] h-[60px] md:bottom-[15%] md:right-[20%] md:w-[120px] md:h-[80px] rounded-[50%] flex justify-center items-center bg-slate-200 ">
|
|
|
<span className="text-center text-xs md:text-lg">
|
|
|
Traditional Chatbot
|
|
|
</span>
|
|
|
</div>
|
|
|
<div className="absolute bottom-[15%] right-[0%] w-[80px] h-[60px] md:bottom-[15%] md:right-[0%] md:w-[120px] md:h-[80px] rounded-[50%] flex justify-center items-center bg-slate-200 ">
|
|
|
<span className="text-center text-xs md:text-lg">
|
|
|
Chat Application
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
export default Competitions;
|
|
|
|
