Skip to content

Commit f8da220

Browse files
syhgpdryoppippisunrabbit123samchon
authored
feat(website): landing page update (#318)
Signed-off-by: sunrabbit123 <qudwls185@naver.com> Co-authored-by: ryoppippi <1560508+ryoppippi@users.noreply.github.com> Co-authored-by: 오병진 <64676070+sunrabbit123@users.noreply.github.com> Co-authored-by: Jeongho Nam <samchon.github@gmail.com> Co-authored-by: sunrabbit123 <qudwls185@naver.com>
1 parent 928ad53 commit f8da220

20 files changed

+238
-244
lines changed

‎pnpm-lock.yaml

Lines changed: 27 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/app/_components/common/button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const buttonVariants = cva(
1111
variant: {
1212
primary: "bg-primary text-primary-foreground hover:bg-primary/90",
1313
secondary:
14-
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
14+
"bg-[#27272A] text-secondary-foreground hover:bg-secondary/80",
1515
},
1616
disabled: {
1717
true: "opacity-50 cursor-not-allowed",

‎website/app/_components/common/link.tsx

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎website/app/_components/common/preview-card.tsx

Lines changed: 46 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,59 @@
11
"use client";
22

3-
/* eslint-disable @next/next/no-img-element */
4-
import { cn } from "@/app/_lib/utils";
5-
import Link from "next/link";
6-
7-
import { useHover } from "react-use";
8-
import { Hoverable } from "./hover";
9-
103
import { ArrowRightIcon } from "../icons/ArrowRight";
4+
import Image from "next/image";
5+
import { cva, VariantProps } from "class-variance-authority";
6+
import clsx from "clsx";
7+
import { useRouter } from "next/navigation";
118

129
interface PreviewCardProps {
10+
subtitle: string;
1311
title: string;
1412
image: string;
15-
href: string;
13+
href?: string;
14+
onClick?: () => void;
15+
direction: "left" | "right";
1616
}
1717

18-
export function PreviewCard({ title, image, href }: PreviewCardProps) {
19-
const [previewCardContent, isHovered] = useHover(
20-
<div>
21-
<Hoverable>
22-
{(isInnerHovered) => (
23-
<div className="flex w-full cursor-pointer flex-col gap-3 p-5 pr-10 transition-colors duration-300 hover:bg-zinc-900 md:p-5 md:pr-0 md:hover:bg-transparent">
24-
<div className="flex items-center justify-between">
25-
<div className="flex flex-1 flex-col gap-1">
26-
<p className="text-lg font-[450] text-zinc-400">Next</p>
27-
<p className="text-2xl font-medium text-zinc-50">{title}</p>
28-
</div>
29-
{/** Right Arrow Button */}
30-
<Link href={href}>
31-
<ArrowRightIcon
32-
width={48}
33-
height={48}
34-
className={cn("text-zinc-600")}
35-
/>
36-
</Link>
37-
</div>
38-
<div className="hidden overflow-hidden rounded-[8px] md:block">
39-
<img
40-
src={image}
41-
alt={`${title}_thumbnail`}
42-
className={cn(
43-
"aspect-video w-full bg-[#27272A] object-cover transition-all duration-300",
44-
{
45-
"scale-110": isInnerHovered,
46-
},
47-
)}
48-
/>
49-
</div>
50-
</div>
51-
)}
52-
</Hoverable>
53-
</div>,
54-
);
18+
const cardVariants = cva(
19+
"group relative z-10 w-full md:w-[420px] md:h-[300px] overflow-hidden bg-[#101010]/80 transition-all duration-300",
20+
{
21+
variants: {
22+
direction: {
23+
left: "md:rounded-r-xl md:pl-20",
24+
right: "md:rounded-s-xl md:pr-20",
25+
},
26+
},
27+
},
28+
);
29+
30+
export function PreviewCard({ subtitle, title, image, href, direction, onClick }: PreviewCardProps & VariantProps<typeof cardVariants>) {
31+
const isLeft = direction === "left";
32+
const router = useRouter();
33+
34+
const handleClick = () => {
35+
if(href) router.push(href)
36+
if(onClick) onClick()
37+
}
5538

5639
return (
57-
<div
58-
className={cn(
59-
"relative z-10 w-full bg-transparent md:w-[420px] md:pr-20",
60-
)}
61-
>
62-
{previewCardContent}
63-
{/* Gradient */}
64-
<div
65-
className={cn(
66-
"absolute top-0 right-0 -z-10 hidden h-full w-full bg-[linear-gradient(270deg,_#27272A_0%,_transparent_32%)] opacity-0 transition-opacity duration-300 md:block",
67-
{
68-
"opacity-100": isHovered,
69-
},
70-
)}
71-
/>
72-
</div>
40+
<div className={cardVariants({ direction })} onClick={handleClick}>
41+
<div className="flex w-full cursor-pointer flex-col gap-3 p-5 pr-10 transition-colors duration-300 md:hover:bg-transparent">
42+
<div className={clsx("w-full flex items-center justify-between", isLeft && "flex-row-reverse")}>
43+
<div className="flex flex-col gap-1">
44+
<p className="text-lg font-[450] text-zinc-400">{subtitle}</p>
45+
<p className="text-2xl font-medium text-zinc-50">{title}</p>
46+
</div>
47+
<ArrowRightIcon
48+
width={48}
49+
height={48}
50+
className={clsx("text-zinc-600 group-hover:text-zinc-100 transition-all duration-300", isLeft && "rotate-180")}
51+
/>
52+
</div>
53+
<div className={clsx("relative hidden h-[380px] w-[296px] overflow-hidden rounded-[17px] transition-all duration-300 md:block border border-transparent group-hover:border-[#86FFD9] group-hover:drop-shadow-[0_100px_100px_#86FFD966]")}>
54+
<Image src={image} alt={`${title}_thumbnail`} objectFit="cover" fill />
55+
</div>
56+
</div>
57+
</div>
7358
);
7459
}

‎website/app/_components/common/toast.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { motion } from "framer-motion";
2+
3+
interface ToastProps {
4+
message: string
5+
}
6+
7+
export const Toast = ({ message }: ToastProps) => {
8+
return (
9+
<motion.div
10+
className="max-w-md mx-auto w-full text-base text-gray-800 font-bold text-center bg-gray-200 rounded-xl py-3"
11+
>
12+
{message}
13+
</motion.div>
14+
)
15+
}

0 commit comments

Comments
 (0)