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>
        </>
    );
}