diff --git a/src/components/landing/LandingFeatureGrid.tsx b/src/components/landing/LandingFeatureGrid.tsx index b5a5a07..3167041 100644 --- a/src/components/landing/LandingFeatureGrid.tsx +++ b/src/components/landing/LandingFeatureGrid.tsx @@ -15,7 +15,7 @@ export function LandingFeatureGrid({ className }: LandingFeatureGridProps) { {FEATURES.map((feature) => ( } + icon={} title={feature.title} description={feature.description} onMouseEnter={() => setActiveFeature(feature)} diff --git a/src/components/landing/LandingHeroCtas.tsx b/src/components/landing/LandingHeroCtas.tsx index 7754e8b..28c23ea 100644 --- a/src/components/landing/LandingHeroCtas.tsx +++ b/src/components/landing/LandingHeroCtas.tsx @@ -5,27 +5,31 @@ import Link from "next/link"; export function LandingHeroCtas() { return ( -
+
- - - diff --git a/src/components/landing/LandingSpecialFeaturesSection.tsx b/src/components/landing/LandingSpecialFeaturesSection.tsx index bd45d05..2268e9e 100644 --- a/src/components/landing/LandingSpecialFeaturesSection.tsx +++ b/src/components/landing/LandingSpecialFeaturesSection.tsx @@ -18,17 +18,17 @@ export function LandingSpecialFeaturesSection({ className }: LandingSpecialFeatu {/* 섹션 인트로: 제목 + 부제 (아래 → 위 슬라이드) */}

PlanMate의 특별한 기능들

-

+

당신의 생산성을 높이는 스마트한 도구들

diff --git a/src/lib/variants/button.feature.ts b/src/lib/variants/button.feature.ts index dc9f0af..bc4196a 100644 --- a/src/lib/variants/button.feature.ts +++ b/src/lib/variants/button.feature.ts @@ -3,8 +3,9 @@ import { cva } from "class-variance-authority"; export const featureButtonVariants = cva( [ // Layout - "inline-flex items-center justify-start w-full gap-3", + "inline-flex items-center justify-start gap-3", "h-[4.4rem] px-[1.8rem]", + "rounded-[var(--radius-2xl)]", // Hover & Interaction (soft bg only) "transition-[background-color,transform] duration-310", @@ -12,19 +13,14 @@ export const featureButtonVariants = cva( ].join(" "), { variants: { - // Radius (globals.css 토큰과 1:1 매핑) - radius: { - sm: "rounded-[var(--radius-sm)]", - md: "rounded-[var(--radius-md)]", - lg: "rounded-[var(--radius-lg)]", - xl: "rounded-[var(--radius-xl)]", - "2xl": "rounded-[var(--radius-2xl)]", + size: { + sm: "h-[3.4rem] px-[1rem] w-[20.8rem]", + md: "h-[6.4rem] px-[2rem] w-[29.6rem]", }, }, - // Defaults defaultVariants: { - radius: "2xl", + size: "sm", }, }, ); diff --git a/src/lib/variants/button.hero.ts b/src/lib/variants/button.hero.ts index 950b4fb..c9a0718 100644 --- a/src/lib/variants/button.hero.ts +++ b/src/lib/variants/button.hero.ts @@ -4,10 +4,7 @@ export const heroButtonVariants = cva( [ // Layout "inline-flex items-center justify-center", - "h-[5.4rem] px-[3rem] cursor-pointer", - - // Typography (from globals.css) - "t-18-m", + "cursor-pointer rounded-full", // Transitions & a11y "transition-[color,background-color,border-color,transform] duration-200", @@ -21,14 +18,10 @@ export const heroButtonVariants = cva( ].join(" "), { variants: { - intent: { primary: "" }, - glow: { true: "shadow-[0_6px_16px_0_rgba(0,0,0,0.08)]", false: "" }, - pill: { true: "rounded-full", false: "" }, + size: { md: "t-18-m px-[3rem] h-[5.4rem]", sm: "t-12-m px-[1.2rem] h-[3.7rem]" }, }, defaultVariants: { - intent: "primary", - glow: false, - pill: true, + size: "md", }, }, ); diff --git a/src/lib/variants/button.presets.ts b/src/lib/variants/button.presets.ts index 9da6cdd..321ff82 100644 --- a/src/lib/variants/button.presets.ts +++ b/src/lib/variants/button.presets.ts @@ -16,8 +16,8 @@ type SignupVariantProps = VariantProps; type CtaVariantProps = VariantProps; type BackVariantProps = VariantProps; -type HeroOpts = Partial>; -type FeatureOpts = Partial>; +type HeroOpts = Partial>; +type FeatureOpts = Partial>; type AuthOpts = Partial>; type SignupOpts = Partial>; type CtaOpts = Partial>; @@ -38,12 +38,12 @@ export function getButtonClasses( ): string { switch (preset) { case "hero": { - const { intent, glow, pill } = opts as HeroOpts; - return heroButtonVariants({ intent, glow, pill }); + const { size } = opts as HeroOpts; + return heroButtonVariants({ size }); } case "feature": { - const { radius } = opts as FeatureOpts; - return featureButtonVariants({ radius }); + const { size } = opts as FeatureOpts; + return featureButtonVariants({ size }); } case "auth": { const { color } = opts as AuthOpts; diff --git a/src/lib/variants/card.specialFeatureCard.ts b/src/lib/variants/card.specialFeatureCard.ts index b288650..41d7394 100644 --- a/src/lib/variants/card.specialFeatureCard.ts +++ b/src/lib/variants/card.specialFeatureCard.ts @@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority"; export const specialFeatureCardVariants = cva( [ // === 레이아웃 스타일 === - "inline flex flex-col justify-center gap-5 p-7 text-center", + "inline flex flex-col justify-center text-center", // === 시각적 효과 === "group relative isolate rounded-xl", @@ -18,14 +18,14 @@ export const specialFeatureCardVariants = cva( variants: { // === 크기 variants === size: { - sm: "w-[30rem] h-[20rem] p-5 gap-4", + sm: "max-w-[26rem] h-[16rem] p-4 gap-2", md: "w-[35rem] h-[22rem] p-6 gap-4", lg: "max-w-[40rem] h-[25rem] p-7 gap-5", xl: "w-[45rem] h-[28rem] p-8 gap-6", }, }, defaultVariants: { - size: "lg", + size: "sm", }, }, ); diff --git a/src/shared/FeatureButton.tsx b/src/shared/FeatureButton.tsx index 44a6c12..d3814a4 100644 --- a/src/shared/FeatureButton.tsx +++ b/src/shared/FeatureButton.tsx @@ -20,7 +20,7 @@ export const FeatureButton = React.forwardRef @@ -50,7 +50,8 @@ export const FeatureButton = React.forwardRef