init
This commit is contained in:
271
resources/js/components/pages/home/Social.tsx
Normal file
271
resources/js/components/pages/home/Social.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user