Merge pull request #15 from New-Syatte/edu-css

Edu css

package.json

@@ -47,6 +47,7 @@
     "@types/react-dom": "^18.2.18",
     "@types/react-slick": "^0.23.13",
     "autoprefixer": "^10.4.16",
+    "daisyui": "^4.6.0",
     "encoding": "^0.1.13",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.5"

src/app/(education)/education/EduProcessing.tsx

@@ -0,0 +1,19 @@
+import EduProcessingCard from "@/app/(education)/education/EduProcessingCard";
+
+export default function EduProcessing() {
+  return (
+    <section className={ "mx-auto w-[70vw] " }>
+      <p className={ "text-[60px] font-bold text-center" }>진행중인 교육</p>
+      <div className={ "divider mt-[116px]" } />
+      <div className={ "mt-[48px]" } />
+      <div className={ "flex flex-wrap w-[1200px] gap-[34px]" }>
+        {/*// sanity data map*/ }
+        <EduProcessingCard />
+        <EduProcessingCard />
+        <EduProcessingCard />
+        <EduProcessingCard />
+        <EduProcessingCard />
+      </div>
+    </section>
+  );
+}

src/app/(education)/education/EduProcessingCard.tsx

@@ -0,0 +1,17 @@
+import Image from "next/image";
+import Edu01 from "@/assets/education/edu-0.jpg";
+
+export default function EduProcessingCard() {
+  return (
+    <section className={ "w-[255px] mb-[60px]" }>
+      <div className={ "w-[255px] h-[220px] relative" }>
+        <Image src={ Edu01 } alt={ "교육과정-01" } fill={ true } />
+      </div>
+      <div className={'flex items-center justify-start'}>
+        <span className={ "bg-amber-200 rounded-lg px-2 py-1 flex justify-center items-center mt-4 text-xs text-yellow-600" }>모집중</span>
+      </div>
+      <p className={ "mt-[13px] w-[255px] text-black text-lg font-normal font-['Helvetica'] uppercase leading-[27px]" }>샤뜨 페인팅 세미나를 진행합니다. 메탈릭 페인트 워크샵 등 ...</p>
+      <p className={ "mt-[13px] text-lg text-gray-400" }>2023.3.1 ~ 2023.6.28</p>
+    </section>
+  );
+}

src/app/(education)/education/EduSection.tsx

@@ -0,0 +1,54 @@
+import Image from "next/image";
+import edubackground from "@/assets/education/eduback.jpg";
+import aplicatior from "@/assets/education/aplicator.jpg";
+import master from "@/assets/education/master.jpg";
+import oneday from "@/assets/education/oneday.jpg";
+
+export default function EduSection() {
+  return (
+    <>
+      <section className={ "w-[100vw] h-[830px] relative" }>
+        <Image src={ edubackground } fill={ true } alt="edubackground" className={ "z-0" } />
+        <div className={ 'relative top-52 left-32 flex' }>
+          <div className={ "flex space-x-9" }>
+            <div className={ "flex flex-col w-[276px] shadow-2xl rounded-3xl" }>
+              <div className={ "h-[320px] relative rounded-t-3xl border" }>
+                <Image src={ aplicatior } fill={ true } alt={ "aplicatior" } className={ "rounded-t-3xl" } />
+              </div>
+              <div className={ "bg-black-500 bg-black flex flex-col items-center rounded-b-3xl z-10" }>
+                <span className={ "mt-6 text-[33px] font-bold text-white" }>Aplicatior</span><br />
+                <span className={ "mb-6 text-center text-sm font-normal text-white w-[228px]" }>실무에서 즉시 활용 가능한 역량을 강화 할 수 있습니다.</span>
+              </div>
+            </div>
+            <div className={ "flex flex-col w-[276px] shadow-2xl rounded-3xl" }>
+              <div className={ "h-[320px] relative rounded-t-3xl border-neutral-50" }>
+                <Image src={ master } fill={ true } alt={ "master" } className={ "rounded-t-3xl" } />
+              </div>
+              <div className={ "bg-black-500 bg-black flex flex-col items-center rounded-b-3xl z-10" }>
+                <span className={ "mt-6 text-[33px] font-bold text-white" }>Master</span><br />
+                <span className={ "mb-6 text-center text-sm font-normal text-white w-[210px]" }>분야의 선두 주자로 발전 가능한 리더쉽 강화합니다.</span>
+              </div>
+            </div>
+            <div className={ "flex flex-col w-[276px] shadow-2xl rounded-3xl" }>
+              <div className={ "h-[320px] relative rounded-t-3xl border" }>
+                <Image src={ oneday } fill={ true } alt={ "oneday" } className={ "rounded-t-3xl" } />
+              </div>
+              <div className={ "bg-black-500 bg-black flex flex-col items-center rounded-b-3xl z-10" }>
+                <span className={ "mt-6 text-[33px] font-bold text-white" }>One Day</span><br />
+                <span className={ "mb-6 text-center text-sm font-normal text-white w-[210px]" }>빠르게 필요한 스킬 습득, 업무에 즉시 적용 가능합니다.</span>
+              </div>
+            </div>
+          </div>
+          <div className={ 'flex flex-col ml-24' }>
+            <span className={ 'text-2xl font-normal font-["EB Garamond"] tracking-widest' }>Class Education</span>
+            <span className={ 'mt-4 text-black text-6xl font-bold font-[\'Helvetica\']' }>클래스 교육</span>
+            <span
+              className={ 'mt-7 w-[320px] p-2 bg-black rounded-full text-white text-center text-[33px]' }>3개 클래스 운영</span>
+            <span className={ 'w-4/6 mt-8 text-lg text-black font-light font-["Helvetica"] leading-[30px]' }>샤뜨는 다양한 교육과정을 제공하여 학습자들이 전문 기술을 습득하고 성장할 수 있도록 지원하고 있습니다.
+              그 중에서도 주목받는 교육과정으로는 Aplicatior, Master, One Day 프로그램이 있습니다.</span>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}

src/app/(education)/education/EducationCard.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import Image from "next/image";
+import topbanner1 from "@/assets/education/topbanner-01.jpg";
+
+export default function EducationCard() {
+
+  const handleClick = () => {
+    alert("신청하기 버튼 클릭");
+  };
+
+  return (
+    <div className={ "w-4/6 border-2 mx-auto shadow-xl rounded-2xl mb-[82px]" }>
+      <div className={ "flex items-center pt-7 px-14 space-x-44 bg-black rounded-t-2xl pb-10" }>
+        <div className={ "flex flex-col items-start justify-center" }>
+          <span
+            className={ "text-white text-[40px] font-bold font-['Helvetica'] leading-[68px]" }>Aplicatior 교육패키지</span>
+          <span className={ "w-[676px] text-white text-lg font-normal font-['Helvetica'] mt-1 leading-normal" }>실무 중심의 강력한 역량 강화를 위한 프로그램으로, 업계 수요를 반영한 커리큘럼과 현장 경험 중심의 실습을 통해 실질적인
+          스킬을 효과적으로 습득할 수 있습니다.</span>
+        </div>
+        <button
+          onClick={ handleClick }
+          className={ "px-6 py-3 bg-blue-500 border-white border-2 text-center text-white text-2xl font-bold font-['Helvetica'] rounded-md" }>
+          코스 신청하기
+        </button>
+      </div>
+      <div className={ "flex justify-center items-center mt-7 space-x-10 mb-[97px]" }>
+        <div className={ "flex flex-col justify-center items-start" }>
+          <div className={ "w-60 h-56 relative" }>
+            <Image src={ topbanner1 } alt={ "topbanner-01" } fill={ true } className={ "rounded-md" } />
+          </div>
+          <div>
+          <span className={ "text-black text-md font-normal font-['Helvetica'] uppercase leading-[27px]" }>
+            1.샤뜨 페인팅 세미나를 진행합니다.<br />메탈릭페인트 워크샵 등..</span>
+          </div>
+        </div>
+        <div className={ "flex flex-col justify-center items-start" }>
+          <div className={ "w-60 h-56 relative" }>
+            <Image src={ topbanner1 } alt={ "topbanner-01" } fill={ true } className={ "rounded-md" } />
+          </div>
+          <div>
+          <span className={ "text-black text-md font-normal font-['Helvetica'] uppercase leading-[27px]" }>
+            샤뜨 페인팅 세미나를 진행합니다.<br />메탈릭페인트 워크샵 등..</span>
+          </div>
+        </div>
+        <div className={ "flex flex-col justify-center items-start" }>
+          <div className={ "w-60 h-56 relative" }>
+            <Image src={ topbanner1 } alt={ "topbanner-01" } fill={ true } className={ "rounded-md" } />
+          </div>
+          <div>
+          <span className={ "text-black text-md font-normal font-['Helvetica'] uppercase leading-[27px]" }>
+            샤뜨 페인팅 세미나를 진행합니다.<br />메탈릭페인트 워크샵 등..</span>
+          </div>
+        </div>
+        <div className={ "flex flex-col justify-center items-start" }>
+          <div className={ "w-60 h-56 relative" }>
+            <Image src={ topbanner1 } alt={ "topbanner-01" } fill={ true } className={ "rounded-md" } />
+          </div>
+          <div>
+          <span className={ "text-black text-md font-normal font-['Helvetica'] uppercase leading-[27px]" }>
+            샤뜨 페인팅 세미나를 진행합니다.<br />메탈릭페인트 워크샵 등..</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+    ;
+}

src/app/(education)/education/TopBanner.tsx

@@ -0,0 +1,29 @@
+import Image from "next/image";
+import Banner from "@/assets/education/edubanner.jpg";
+// import TopBannerImage02 from "@/assets/education/topbanner-02.jpg";
+// import TopBannerImage01 from "@/assets/education/topbanner-01.jpg";
+
+export default function TopBanner() {
+  return (
+    <section>
+      <div className=" flex  justify-between w-[1920px] h-[420px] bg-gray-200 border-b border-neutral-200">
+        <div className={ "ml-[141px] mt-[93px]" }>
+          <div>
+            <p className={ "text-xl font-['EB\nGaramond']\n tracking-widest text-black" }>ACADEMY INFO</p>
+            <p className={ "mt-[14px] text-6xl font-bold text-black" }>교육 소개</p>
+          </div>
+          <div className="w-[529px] mt-[30px] text-black text-lg font-light font-['Helvetica'] leading-[30px]">
+            <p>창의적이고 특수한 기술을
+              활용하여 미술 작품이나 프로젝트를 창조하고자 하는 이들을 위한 훌륭한 기회를 제공합니다.
+              다양한 기법과 재료를 활용하여 특수한 효과와 아름다움을 창출하는 데 필요한 기술을 습득하고, 창의적인
+              작업을 펼칠 수 있습니다.</p>
+          </div>
+        </div>
+        <div>
+          <Image src={ Banner } alt={ "교육배너" } width={ 878 } height={ 420 } />
+        </div>
+      </div>
+    </section>
+  )
+    ;
+}

src/app/(education)/education/application/page.tsx

@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <>
+      교육 상세보기
+    </>
+  );
+}

src/app/(education)/education/page.tsx

@@ -0,0 +1,45 @@
+import TopBanner from "@/app/(education)/education/TopBanner";
+import RouteComplete from "@/utils/RouteComplete";
+import EducationCard from "@/app/(education)/education/EducationCard";
+import EduSection from "@/app/(education)/education/EduSection";
+import EduProcessingCard from "@/app/(education)/education/EduProcessingCard";
+
+export default async function Page() {
+  // const edu: Edu[] = await getEdu();
+  return (
+    <RouteComplete>
+      <TopBanner />
+      <EduSection />
+      <div className={ "flex flex-col justify-center items-center pt-24 pb-14" }>
+        <span className={ " text-center text-black text-2xl font-normal font-['EB Garamond'] tracking-widest" }>PACKAGE PROGRAM</span>
+        <span className={ "mt-4 text-center text-black text-6xl font-bold font-['Helvetica']" }>패키지 교육 과정</span>
+        <span
+          className={ "mt-7 w-[851px] text-center text-black text-lg font-normal font-['Helvetica'] leading-[30px]" }>다양한 과정은 패키지로 교육 받으실 수 있습니다. Aplicatior, Master, 그리고<br /> One Day 등 다양한 프로그램이 운영되고 있습니다.</span>
+      </div>
+      <div className={ "pt-12 bg-neutral-50 border border-neutral-50" }>
+        <EducationCard />
+      </div>
+      <div>
+        <div className={ "mt-44 flex flex-col items-center pb-12" }>
+          <span className={ "text-center text-black text-2xl font-normal font-['EB Garamond'] tracking-widest mb-5" }>SHORT COURSE</span>
+          <span className={ "text-center text-black text-6xl font-bold font-['Helvetica']" }>단과 교육</span>
+          <span
+            className={ "w-[851px] mt-7 text-center text-black text-lg font-normal font-['Helvetica'] leading-[30px]" }>
+            단과 교육은 짧은 기간 동안에도 효과적인 학습을 제공하는 프로그램으로, 명확한 <br />목표를 가지고 집중적으로 학습하고자 하는 분들에게 적합합니다</span>
+        </div>
+        <div className={'border-2 pt-12 border-neutral-50'}>
+          <div className={ 'w-4/6 mx-auto flex items-center justify-center space-x-5 flex-wrap' }>
+            <EduProcessingCard />
+            <EduProcessingCard />
+            <EduProcessingCard />
+            <EduProcessingCard />
+            <EduProcessingCard />
+            <EduProcessingCard />
+            <EduProcessingCard />
+            <EduProcessingCard />
+          </div>
+        </div>
+      </div>
+    </RouteComplete>
+  );
+}

src/app/(product)/store/layout.tsx

@@ -17,5 +17,4 @@ const layout = ({ children }: { children: React.ReactNode }) => {
     </section>
   );
 };
-
 export default layout;