init
Some checks failed
linter / quality (push) Has been cancelled
tests / ci (push) Has been cancelled

This commit is contained in:
Chief-spartan-117
2026-01-21 11:13:09 +05:45
commit 972264e361
188 changed files with 27498 additions and 0 deletions

View File

@@ -0,0 +1,271 @@
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>
</>
);
}