272 lines
17 KiB
TypeScript
272 lines
17 KiB
TypeScript
import logo from '@/assets/logo.png';
|
|
import { InstagramIcon } from '@hugeicons/core-free-icons';
|
|
import { HugeiconsIcon } from '@hugeicons/react';
|
|
export default function Social() {
|
|
return (
|
|
<>
|
|
<div className="mx-auto flex max-w-7xl items-center justify-center overflow-clip">
|
|
<div className="relative grid w-full grid-cols-3 items-center justify-center gap-4 px-32">
|
|
<div className="absolute top-0 z-50 h-40 w-full bg-linear-180 from-white to-transparent"></div>
|
|
<div className="flex translate-y-6 flex-col gap-4">
|
|
<div className="h-32 w-full rounded-lg border border-neutral-300"></div>
|
|
<div className="w-full rounded-lg border border-neutral-300 bg-neutral-100 p-2 backdrop-blur-lg">
|
|
<div className="rounded-md bg-white px-3 py-2 shadow-lg">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm">@col.thinkspace</p>
|
|
<HugeiconsIcon
|
|
icon={InstagramIcon}
|
|
size={16}
|
|
></HugeiconsIcon>
|
|
</div>
|
|
<div className="relative w-full">
|
|
<img
|
|
src={logo}
|
|
alt="logo"
|
|
className="aspect-square h-full w-full object-contain object-center"
|
|
/>
|
|
<p className="absolute right-2 bottom-2 rounded-sm bg-neutral-600/40 px-2 py-1 text-xs backdrop-blur-lg">
|
|
325 Views
|
|
</p>
|
|
</div>
|
|
<div className="mt-2">
|
|
<p className="line-clamp-2 px-2 text-sm">
|
|
Lorem ipsum dolor sit amet consectetur
|
|
adipisicing elit. Libero asperiores esse
|
|
enim maiores aliquid perferendis velit
|
|
dignissimos magni consequuntur officiis?
|
|
</p>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-full rounded-lg border border-neutral-300 bg-neutral-100 p-2 backdrop-blur-lg">
|
|
<div className="rounded-md bg-white px-3 py-2 shadow-lg">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm">@col.thinkspace</p>
|
|
<HugeiconsIcon
|
|
icon={InstagramIcon}
|
|
size={16}
|
|
></HugeiconsIcon>
|
|
</div>
|
|
<div className="relative w-full">
|
|
<img
|
|
src={logo}
|
|
alt="logo"
|
|
className="aspect-square h-full w-full object-contain object-center"
|
|
/>
|
|
<p className="absolute right-2 bottom-2 rounded-sm bg-neutral-600/40 px-2 py-1 text-xs backdrop-blur-lg">
|
|
325 Views
|
|
</p>
|
|
</div>
|
|
<div className="mt-2">
|
|
<p className="line-clamp-2 px-2 text-sm">
|
|
Lorem ipsum dolor sit amet consectetur
|
|
adipisicing elit. Libero asperiores esse
|
|
enim maiores aliquid perferendis velit
|
|
dignissimos magni consequuntur officiis?
|
|
</p>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="h-32 w-full rounded-lg border border-neutral-300"></div>
|
|
</div>{' '}
|
|
<div className="flex -translate-y-8 flex-col gap-4">
|
|
<div className="h-32 w-full rounded-lg border border-neutral-300"></div>
|
|
<div className="w-full rounded-lg border border-neutral-300 bg-neutral-100 p-2 backdrop-blur-lg">
|
|
<div className="rounded-md bg-white px-3 py-2 shadow-lg">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm">@col.thinkspace</p>
|
|
<HugeiconsIcon
|
|
icon={InstagramIcon}
|
|
size={16}
|
|
></HugeiconsIcon>
|
|
</div>
|
|
<div className="relative w-full">
|
|
<img
|
|
src={logo}
|
|
alt="logo"
|
|
className="aspect-square h-full w-full object-contain object-center"
|
|
/>
|
|
<p className="absolute right-2 bottom-2 rounded-sm bg-neutral-600/40 px-2 py-1 text-xs backdrop-blur-lg">
|
|
325 Views
|
|
</p>
|
|
</div>
|
|
<div className="mt-2">
|
|
<p className="line-clamp-2 px-2 text-sm">
|
|
Lorem ipsum dolor sit amet consectetur
|
|
adipisicing elit. Libero asperiores esse
|
|
enim maiores aliquid perferendis velit
|
|
dignissimos magni consequuntur officiis?
|
|
</p>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-full rounded-lg border border-neutral-300 bg-neutral-100 p-2 backdrop-blur-lg">
|
|
<div className="rounded-md bg-white px-3 py-2 shadow-lg">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm">@col.thinkspace</p>
|
|
<HugeiconsIcon
|
|
icon={InstagramIcon}
|
|
size={16}
|
|
></HugeiconsIcon>
|
|
</div>
|
|
<div className="relative w-full">
|
|
<img
|
|
src={logo}
|
|
alt="logo"
|
|
className="aspect-square h-full w-full object-contain object-center"
|
|
/>
|
|
<p className="absolute right-2 bottom-2 rounded-sm bg-neutral-600/40 px-2 py-1 text-xs backdrop-blur-lg">
|
|
325 Views
|
|
</p>
|
|
</div>
|
|
<div className="mt-2">
|
|
<p className="line-clamp-2 px-2 text-sm">
|
|
Lorem ipsum dolor sit amet consectetur
|
|
adipisicing elit. Libero asperiores esse
|
|
enim maiores aliquid perferendis velit
|
|
dignissimos magni consequuntur officiis?
|
|
</p>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="h-32 w-full rounded-lg border border-neutral-300"></div>
|
|
</div>{' '}
|
|
<div className="flex flex-col gap-4">
|
|
<div className="h-32 w-full rounded-lg border border-neutral-300"></div>
|
|
<div className="w-full rounded-lg border border-neutral-300 bg-neutral-100 p-2 backdrop-blur-lg">
|
|
<div className="rounded-md bg-white px-3 py-2 shadow-lg">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm">@col.thinkspace</p>
|
|
<HugeiconsIcon
|
|
icon={InstagramIcon}
|
|
size={16}
|
|
></HugeiconsIcon>
|
|
</div>
|
|
<div className="relative w-full">
|
|
<img
|
|
src={logo}
|
|
alt="logo"
|
|
className="aspect-square h-full w-full object-contain object-center"
|
|
/>
|
|
<p className="absolute right-2 bottom-2 rounded-sm bg-neutral-600/40 px-2 py-1 text-xs backdrop-blur-lg">
|
|
325 Views
|
|
</p>
|
|
</div>
|
|
<div className="mt-2">
|
|
<p className="line-clamp-2 px-2 text-sm">
|
|
Lorem ipsum dolor sit amet consectetur
|
|
adipisicing elit. Libero asperiores esse
|
|
enim maiores aliquid perferendis velit
|
|
dignissimos magni consequuntur officiis?
|
|
</p>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-full rounded-lg border border-neutral-300 bg-neutral-100 p-2 backdrop-blur-lg">
|
|
<div className="rounded-md bg-white px-3 py-2 shadow-lg">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm">@col.thinkspace</p>
|
|
<HugeiconsIcon
|
|
icon={InstagramIcon}
|
|
size={16}
|
|
></HugeiconsIcon>
|
|
</div>
|
|
<div className="relative w-full">
|
|
<img
|
|
src={logo}
|
|
alt="logo"
|
|
className="aspect-square h-full w-full object-contain object-center"
|
|
/>
|
|
<p className="absolute right-2 bottom-2 rounded-sm bg-neutral-600/40 px-2 py-1 text-xs backdrop-blur-lg">
|
|
325 Views
|
|
</p>
|
|
</div>
|
|
<div className="mt-2">
|
|
<p className="line-clamp-2 px-2 text-sm">
|
|
Lorem ipsum dolor sit amet consectetur
|
|
adipisicing elit. Libero asperiores esse
|
|
enim maiores aliquid perferendis velit
|
|
dignissimos magni consequuntur officiis?
|
|
</p>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="h-32 w-full rounded-lg border border-neutral-300"></div>
|
|
</div>{' '}
|
|
{/* <div className="flex -translate-y-10 flex-col gap-4">
|
|
<div className="h-32 w-full rounded-lg border border-neutral-300"></div>
|
|
<div className="w-full rounded-lg border border-neutral-300 bg-neutral-100 p-2 backdrop-blur-lg">
|
|
<div className="rounded-md bg-white px-3 py-2 shadow-lg">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm">@col.thinkspace</p>
|
|
<HugeiconsIcon
|
|
icon={InstagramIcon}
|
|
size={16}
|
|
></HugeiconsIcon>
|
|
</div>
|
|
<div className="relative w-full">
|
|
<img
|
|
src={logo}
|
|
alt="logo"
|
|
className="aspect-square h-full w-full object-contain object-center"
|
|
/>
|
|
<p className="absolute right-2 bottom-2 rounded-sm bg-neutral-600/40 px-2 py-1 text-xs backdrop-blur-lg">
|
|
325 Views
|
|
</p>
|
|
</div>
|
|
<div className="mt-2">
|
|
<p className="line-clamp-2 px-2 text-sm">
|
|
Lorem ipsum dolor sit amet consectetur
|
|
adipisicing elit. Libero asperiores esse
|
|
enim maiores aliquid perferendis velit
|
|
dignissimos magni consequuntur officiis?
|
|
</p>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-full rounded-lg border border-neutral-300 bg-neutral-100 p-2 backdrop-blur-lg">
|
|
<div className="rounded-md bg-white px-3 py-2 shadow-lg">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm">@col.thinkspace</p>
|
|
<HugeiconsIcon
|
|
icon={InstagramIcon}
|
|
size={16}
|
|
></HugeiconsIcon>
|
|
</div>
|
|
<div className="relative w-full">
|
|
<img
|
|
src={logo}
|
|
alt="logo"
|
|
className="aspect-square h-full w-full object-contain object-center"
|
|
/>
|
|
<p className="absolute right-2 bottom-2 rounded-sm bg-neutral-600/40 px-2 py-1 text-xs backdrop-blur-lg">
|
|
325 Views
|
|
</p>
|
|
</div>
|
|
<div className="mt-2">
|
|
<p className="line-clamp-2 px-2 text-sm">
|
|
Lorem ipsum dolor sit amet consectetur
|
|
adipisicing elit. Libero asperiores esse
|
|
enim maiores aliquid perferendis velit
|
|
dignissimos magni consequuntur officiis?
|
|
</p>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="h-32 w-full rounded-lg border border-neutral-300"></div>
|
|
</div> */}
|
|
<div className="absolute bottom-0 z-50 h-48 w-full bg-linear-0 from-white to-transparent"></div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|