diff options
Diffstat (limited to 'src/app/page.jsx')
| -rw-r--r-- | src/app/page.jsx | 67 |
1 files changed, 41 insertions, 26 deletions
diff --git a/src/app/page.jsx b/src/app/page.jsx index 6a8e0aa..b6fdd75 100644 --- a/src/app/page.jsx +++ b/src/app/page.jsx @@ -4,48 +4,63 @@ import Image from "next/image"; export default async function Home() { const homePageCards = (title, message, url) => { return ( - <Link href={`/${title}`} className="my-1"> - <Card className="max-w-[400px] border-1 border-gray-500"> - <CardHeader className="flex gap-3"> - <Image - alt="nextui logo" - height={40} - width={40} - src={url} - className="rounded-md" - /> - <div className="flex flex-col"> - <p className="text-md">{title}</p> - <p className="text-small text-default-500"> - dramalama/{title} - </p> - </div> - </CardHeader> - <Divider className="bg-slate-400" /> - <CardBody> - <p>{message}</p> - </CardBody> - </Card> + // <Link href={`/${title}`} className="my-1"> + // <Card className="max-w-[400px] border-1 border-gray-500"> + // <CardHeader className="flex gap-3"> + // <Image + // alt="nextui logo" + // height={40} + // width={40} + // src={url} + // className="rounded-md" + // /> + // <div className="flex flex-col"> + // <p className="text-md">{title}</p> + // <p className="text-small text-default-500"> + // dramalama/{title} + // </p> + // </div> + // </CardHeader> + // <Divider className="bg-slate-400" /> + // <CardBody> + // <p>{message}</p> + // </CardBody> + // </Card> + // </Link> + <Link + href={`/${title}`} + className="flex mb-2 lg:mx-2 text-center transition ease-in delay-50 hover:scale-105 text-inherit bg-gray-200 dark:bg-[#1f1f1f] p-1 rounded-lg" + > + <section> + <Image + src={url} + height={100} + width={100} + alt="section image" + className="rounded-full overflow-visible" + ></Image> + <p className="uppercase font-xl">{title}</p> + </section> </Link> ); }; return ( - <section className="h-screen w-screen flex flex-col items-center justify-center "> + <section className="h-screen w-screen flex flex-col items-center justify-center lg:flex-row "> {homePageCards( "anime", "Gravity of anime constant state of falling into the depths of happiness and joy", - "https://i.ibb.co/bLJzm3T/Whats-App-Image-2024-05-23-at-22-05-59-09933e5f.jpg" + "https://cdn3.iconfinder.com/data/icons/letters-and-numbers-1/32/letter_A_red-256.png" )} {homePageCards( "kdrama", "Infinity loop I'll watch just one k-drama, ok one more, ok wait...", - "https://ih1.redbubble.net/image.2656505524.2951/poster,504x498,f8f8f8-pad,600x600,f8f8f8.jpg" + "https://cdn3.iconfinder.com/data/icons/letters-and-numbers-1/32/letter_K_red-512.png" )} {homePageCards( "movies", "Dive into a world of thrilling adventure and heart-pounding suspense", - "https://images.hdqwalls.com/download/poster-avengers-endgame-ni-1920x1080.jpg" + "https://cdn3.iconfinder.com/data/icons/letters-and-numbers-1/32/letter_M_red-512.png" )} </section> ); |