[Design]: 기부페이지 css 수정

ssh/src/index.css

@@ -33,30 +33,6 @@ body {
   min-height: 100vh;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
@@ -65,9 +41,6 @@ button:focus-visible {
   a:hover {
     color: #747bff;
   }
-  button {
-    background-color: #f9f9f9;
-  }
 }
 
 @layer base {

ssh/src/pages/Donation/DonationPage.tsx

@@ -0,0 +1,16 @@
+import Steps from './sections/Features/Steps';
+import Hero from './sections/Hero/Hero';
+import Meaning from './sections/Features/Meaning';
+import BankServices from './sections/Features/BankServices';
+
+const DonationPage = () => {
+  return (
+    <main className="pt-16">
+      <Hero />
+      <Meaning />
+      <BankServices />
+      <Steps />
+    </main>
+  );
+};
+export default DonationPage;

ssh/src/pages/Donation/sections/Features/BankServices/index.tsx

@@ -0,0 +1,43 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+export default function BankServices() {
+  return (
+    <section id="bank-services" className="w-full bg-primary/30">
+      <div className="mx-auto max-w-screen-xl px-6 py-14">
+        <h3 className="text-xl font-semibold md:text-4xl">은행에서 제공하는 기부 서비스</h3>
+
+        <div className="mt-8 grid grid-cols-1 gap-6 md:grid-cols-2">
+          <Card className="rounded-2xl shadow-md p-8 md:p-12">
+            <CardHeader className="pb-6">
+              <CardTitle className="text-2xl md:text-3xl font-semibold">
+                고향사랑기부 · KB 국민은행
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="text-lg md:text-xl leading-8 text-muted-foreground">
+              <p>
+                고향과 지역사회를 응원하는 나눔. <br />
+                거주지가 아닌 지역에도 기부할 수 있는 제도입니다.
+                <br />
+                세액공제 혜택과 답례품을 통해 기부의 기쁨을 두 배로 느껴보세요.
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card className="rounded-2xl shadow-md p-8 md:p-12">
+            <CardHeader className="pb-6">
+              <CardTitle className="text-2xl md:text-3xl font-semibold">
+                학교사랑기부 · KB 국민은행
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="text-lg md:text-xl leading-8 text-muted-foreground">
+              <p>
+                작은 참여로 이어지는 큰 나눔.
+                <br></br>걸음수·좋아요 미션으로 모은 성과가 학생들을 위한 장학금으로 전달됩니다.
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+}

ssh/src/pages/Donation/components/secondsection/index.tsx → ssh/src/pages/Donation/sections/Features/Meaning/index.tsx

@@ -1,14 +1,15 @@
+import donationImage from '@/assets/donationImage.png';
+
 export default function Meaning() {
   return (
     <section id="meaning" className="w-full">
       <div className="mx-auto grid max-w-screen-xl grid-cols-1 gap-8 px-6 py-14 md:grid-cols-2 md:gap-12">
-        {/* 이미지 교체 예정 */}
-        <div className="aspect-[4/3] w-full rounded-xl bg-muted shadow-sm" aria-hidden />
+        <img src={donationImage} alt="기부 의미 이미지" className="h-full w-full object-cover" />
         <div className="flex flex-col justify-center">
-          <h2 className="text-xl font-semibold md:text-2xl">
+          <h2 className="text-xl font-semibold md:text-4xl">
             당신의 재산, 뜻깊은 나눔으로 이어집니다
           </h2>
-          <div className="mt-4 space-y-4 leading-7 text-muted-foreground">
+          <div className="mt-4 space-y-4 text-base md:text-xl leading-7 md:leading-8 text-muted-foreground">
             <p>
               삶은 언제 끝날지 알 수 없지만, 그 뜻은 사라지지 않아야 합니다. 평생 모은 재산이 내
               의도와 다르게 흘러가는 대신, 사회에 의미 있게 쓰이길 바라는 마음을 지켜드립니다.

ssh/src/pages/Donation/components/fourthsection/index.tsx → ssh/src/pages/Donation/sections/Features/Steps/index.tsx

@@ -3,7 +3,6 @@ import { Button } from '@/components/ui/button';
 import { ShieldCheck, Building2, HandCoins, FileSignature, ReceiptText } from 'lucide-react';
 import { Link } from 'react-router-dom';
 
-// 추후 추가 페이지 생성
 const REGISTER_PATH = '/donation/register';
 const BANK_LINK_PATH = '/donation/banks';
 
@@ -44,28 +43,30 @@ const STEPS: Step[] = [
 export default function Steps() {
   return (
     <section id="steps" aria-labelledby="steps-title" className="w-full">
-      <div className="mx-auto grid max-w-screen-xl grid-cols-1 gap-10 px-6 py-14 lg:grid-cols-2">
+      <div className="mx-auto grid max-w-screen-xl grid-cols-1 gap-12 px-6 py-20 lg:grid-cols-2">
         <div>
-          <h3 id="steps-title" className="text-xl font-semibold md:text-2xl">
+          <h3 id="steps-title" className="text-2xl font-semibold md:text-4xl">
             기부 신청 방법 (단계별 안내)
           </h3>
 
-          <ol role="list" className="mt-8 space-y-8">
+          <ol role="list" className="mt-10 space-y-10">
             {STEPS.map((s, idx) => {
               const Icon = s.icon;
               return (
                 <li key={s.title} className="relative">
-                  <div className="absolute left-3 top-6 bottom-0 w-px bg-border" aria-hidden />
-                  <span className="absolute left-0 top-0 grid h-6 w-6 place-items-center rounded-full bg-primary text-xs font-bold text-primary-foreground">
+                  <div className="absolute left-4 top-8 bottom-0 w-[2px] bg-border" aria-hidden />
+                  <span className="absolute left-0 top-0 grid h-8 w-8 place-items-center rounded-full bg-primary text-center text-lg font-bold text-primary-foreground">
                     {idx + 1}
                   </span>
 
-                  <div className="pl-10">
-                    <div className="flex items-start gap-3">
-                      <Icon className="mt-0.5 h-5 w-5 text-primary" aria-hidden />
+                  <div className="pl-12">
+                    <div className="flex items-start gap-4">
+                      <Icon className="mt-1 h-6 w-6 md:h-7 md:w-7 text-primary" aria-hidden />
                       <div>
-                        <h4 className="text-base font-medium">{s.title}</h4>
-                        <p className="mt-1 text-sm leading-6 text-muted-foreground">{s.desc}</p>
+                        <h4 className="text-lg md:text-3xl font-semibold">{s.title}</h4>
+                        <p className="mt-2 text-base md:text-xl leading-8 text-muted-foreground">
+                          {s.desc}
+                        </p>
                       </div>
                     </div>
                   </div>
@@ -76,11 +77,11 @@ export default function Steps() {
         </div>
 
         <div className="flex">
-          <Card className="my-auto w-full rounded-xl shadow-sm">
-            <CardHeader className="pb-2">
-              <CardTitle className="text-base md:text-lg">신청하기</CardTitle>
+          <Card className="my-auto w-full rounded-2xl shadow-md p-8 md:p-12 min-h-[320px]">
+            <CardHeader className="pb-4">
+              <CardTitle className="text-xl md:text-3xl">신청하기</CardTitle>
             </CardHeader>
-            <CardContent className="space-y-3 text-sm leading-6 text-muted-foreground md:text-base">
+            <CardContent className="space-y-4 text-base leading-8 text-muted-foreground md:text-xl">
               <p>
                 등록 내용은 생전 언제든 <b className="text-foreground">수정·철회</b>할 수 있습니다.
               </p>
@@ -92,11 +93,11 @@ export default function Steps() {
                 처리됩니다.
               </p>
 
-              <div className="pt-2 flex flex-col gap-3 sm:flex-row">
-                <Button asChild className="rounded-full">
+              <div className="pt-3 flex flex-col gap-3 sm:flex-row">
+                <Button asChild className="rounded-full h-11 px-6 text-xl">
                   <Link to={REGISTER_PATH}>기부 의사 등록하기</Link>
                 </Button>
-                <Button asChild variant="ghost" className="rounded-full">
+                <Button asChild variant="ghost" className="rounded-full h-11 px-6 text-xl">
                   <Link to={BANK_LINK_PATH}>은행 연동 안내</Link>
                 </Button>
               </div>

ssh/src/pages/Donation/components/herosection/index.tsx → ssh/src/pages/Donation/sections/Hero/Hero.tsx

@@ -1,11 +1,12 @@
 export default function Hero() {
   return (
-    <section id="hero" className="w-full bg-blue-50">
-      <div className="mx-auto max-w-screen-xl px-6 py-10 md:py-14">
-        <h1 className="text-2xl font-bold tracking-tight md:text-3xl">
+    <section id="hero" className="w-full bg-primary/30">
+      <div className="mx-auto max-w-screen-xl px-6 py-10 md:py-20">
+        <h1 className="text-3xl md:text-5xl font-bold tracking-tight">
           당신의 뜻, 사회에 이어집니다
         </h1>
-        <p className="mt-4 text-base leading-7 text-muted-foreground md:text-lg">
+
+        <p className="mt-4 text-base leading-7 text-muted-foreground md:text-2xl">
           평생 모은 재산을 원하는 곳에 기부하세요.
           <br className="hidden sm:block" />
           복잡한 절차 없이, 사전에 간단히 등록하면 사후에도 안전하게 뜻이 전달됩니다.

ssh/src/routes/routing.tsx

@@ -7,7 +7,7 @@ import AtmMapPage from '@/pages/AtmMap';
 import VoicephishingPage from '@/pages/Voicephishing';
 import ChatbotPage from '@/pages/Chatbot';
 import SettingPage from '@/pages/Setting';
-import DonationPage from '@/pages/Donation';
+import DonationPage from '@/pages/Donation/DonationPage';
 import RootLayout from '@/components/Layout/RootLayout';
 
 export const routers = createBrowserRouter([