131 lines
6.8 KiB
TypeScript
131 lines
6.8 KiB
TypeScript
import Section from "@/components/Section";
|
|
import Button from "@/components/Button";
|
|
import Image from "@/components/Image";
|
|
|
|
import { text, content, apps } from "@/mocks/collaboration";
|
|
|
|
type CollaborationProps = {};
|
|
|
|
const Collaboration = ({}: CollaborationProps) => {
|
|
return (
|
|
<Section crosses>
|
|
<div className="container lg:flex">
|
|
<div className="max-w-[25rem]">
|
|
<h2 className="h2 mb-4 md:mb-8">
|
|
AI chat app for seamless collaboration
|
|
</h2>
|
|
<ul className="max-w-[22.5rem] mb-10 md:mb-14">
|
|
{content.map((item) => (
|
|
<li className="mb-3 py-3" key={item.id}>
|
|
<div className="flex items-center">
|
|
<Image
|
|
src="/images/check.svg"
|
|
width={24}
|
|
height={24}
|
|
alt="Check"
|
|
/>
|
|
<h6 className="body-2 ml-5">
|
|
{item.title}
|
|
</h6>
|
|
</div>
|
|
{item.text && (
|
|
<p className="body-2 mt-3 text-n-4">
|
|
{item.text}
|
|
</p>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Button>Try it now</Button>
|
|
</div>
|
|
<div className="mt-15 lg:mt-0 lg:ml-auto xl:w-[37.5rem]">
|
|
<div className="relative lg:w-[22.5rem] lg:mx-auto">
|
|
<p className="body-2 mb-4 text-n-4 md:mb-16 lg:mb-32">
|
|
{text}
|
|
</p>
|
|
<div className="relative left-1/2 flex w-[22.5rem] aspect-square border border-n-6 rounded-full -translate-x-1/2 scale-75 md:scale-100">
|
|
<div className="flex w-60 aspect-square m-auto border border-n-6 rounded-full">
|
|
<div className="w-[5.75rem] aspect-square m-auto p-[0.1875rem] bg-conic-gradient rounded-full">
|
|
<div className="flex items-center justify-center w-full h-full bg-n-8 rounded-full">
|
|
<Image
|
|
src="/images/brainwave-symbol.svg"
|
|
width={48}
|
|
height={48}
|
|
alt="Brainwave"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul>
|
|
{apps.map((app, index) => (
|
|
<li
|
|
className={`absolute top-0 left-1/2 h-1/2 -ml-[1.625rem] ${
|
|
index === 1 && "rotate-[45deg]"
|
|
} ${index === 2 && "rotate-[90deg]"} ${
|
|
index === 3 && "rotate-[135deg]"
|
|
} ${index === 4 && "rotate-[180deg]"} ${
|
|
index === 5 && "rotate-[225deg]"
|
|
} ${index === 6 && "rotate-[270deg]"} ${
|
|
index === 7 && "rotate-[315deg]"
|
|
} origin-bottom`}
|
|
key={app.id}
|
|
>
|
|
<div
|
|
className={`relative -top-[1.625rem] flex w-[3.25rem] h-[3.25rem] bg-n-7 border border-n-1/15 rounded-xl ${
|
|
index === 1 && "-rotate-[45deg]"
|
|
} ${
|
|
index === 2 && "-rotate-[90deg]"
|
|
} ${
|
|
index === 3 &&
|
|
"-rotate-[135deg]"
|
|
} ${
|
|
index === 4 &&
|
|
"-rotate-[180deg]"
|
|
} ${
|
|
index === 5 &&
|
|
"-rotate-[225deg]"
|
|
} ${
|
|
index === 6 &&
|
|
"-rotate-[270deg]"
|
|
} ${
|
|
index === 7 &&
|
|
"-rotate-[315deg]"
|
|
}`}
|
|
>
|
|
<Image
|
|
className="m-auto"
|
|
src={app.icon}
|
|
width={app.width}
|
|
height={app.height}
|
|
alt={app.title}
|
|
/>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="hidden absolute top-1/2 right-full w-[32.625rem] -mt-1 mr-10 pointer-events-none xl:block">
|
|
<Image
|
|
src="/images/collaboration/curve-1.svg"
|
|
width={522}
|
|
height={182}
|
|
alt="Curve 1"
|
|
/>
|
|
</div>
|
|
<div className="hidden absolute top-1/2 left-full w-[10.125rem] -mt-1 ml-10 pointer-events-none xl:block">
|
|
<Image
|
|
src="/images/collaboration/curve-2.svg"
|
|
width={162}
|
|
height={76}
|
|
alt="Curve 2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
);
|
|
};
|
|
|
|
export default Collaboration;
|