{children}
; +}; + +export default SubTitle; diff --git a/src/app/_components/Title.tsx b/src/app/_components/Title.tsx new file mode 100644 index 0000000..585c708 --- /dev/null +++ b/src/app/_components/Title.tsx @@ -0,0 +1,9 @@ +import { HTMLAttributes } from "react"; + +type TitleProps = HTMLAttributes{children}
; +}; + +export default Title; diff --git a/src/app/_components/button.tsx b/src/app/_components/button.tsx new file mode 100644 index 0000000..88cb74a --- /dev/null +++ b/src/app/_components/button.tsx @@ -0,0 +1,13 @@ +import { ButtonHTMLAttributes } from "react"; + +export type ButtonProps = ButtonHTMLAttributes
+ 
+
+ );
+};
+
+export default SigninBox;
diff --git a/src/app/accounts/signin/_components/molecules/InputBox.tsx b/src/app/accounts/signin/_components/molecules/InputBox.tsx
new file mode 100644
index 0000000..4fd3882
--- /dev/null
+++ b/src/app/accounts/signin/_components/molecules/InputBox.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+interface InputBoxProps {
+ icon: string;
+ type: string;
+ placeholder: string;
+}
+
+const InputBox = ({ icon, type, placeholder }: InputBoxProps) => {
+ return ;
+};
+
+export default InputBox;
diff --git a/src/app/accounts/signin/_components/molecules/LargeBtn.tsx b/src/app/accounts/signin/_components/molecules/LargeBtn.tsx
new file mode 100644
index 0000000..41c4d5f
--- /dev/null
+++ b/src/app/accounts/signin/_components/molecules/LargeBtn.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+interface LoginBtnProps {
+ bgColor: string;
+ textColor: string;
+ logo?: string;
+ children: React.ReactNode;
+ disabled?: boolean;
+}
+
+const LoginBtn = ({
+ bgColor,
+ textColor,
+ logo,
+ children,
+ disabled,
+}: LoginBtnProps) => {
+ return (
+
+ );
+};
+
+export default LoginBtn;
diff --git a/src/app/accounts/signin/layout.tsx b/src/app/accounts/signin/layout.tsx
new file mode 100644
index 0000000..f3a1a73
--- /dev/null
+++ b/src/app/accounts/signin/layout.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+export default function layout({ children }: { children: ReactNode }) {
+ return (
+ <>
+
+
+ {" "}
+ {/* 너비 고정 */}
+
+
+ {" "}
+ {/* 너비 고정 */}
+
+
+ 비밀번호를 잊어버리셨나요?
+
+
+
+ 로그인
+
+
+ 카카오로 로그인
+
+
+ 구글로 로그인
+
+
+ 더보기
+
+ 아직 계정이 없으신가요?
+
+
+ 회원가입
+
+
+
+ {children}
+
+ );
+}
diff --git a/src/app/accounts/signin/page.tsx b/src/app/accounts/signin/page.tsx
new file mode 100644
index 0000000..12d8671
--- /dev/null
+++ b/src/app/accounts/signin/page.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import SigninBox from "./_components/SigninBox";
+
+function page() {
+ return (
+
+
+ );
+}
+
+export default page;
diff --git a/src/app/accounts/signup/_components/AgreeBox.tsx b/src/app/accounts/signup/_components/AgreeBox.tsx
new file mode 100644
index 0000000..79d298a
--- /dev/null
+++ b/src/app/accounts/signup/_components/AgreeBox.tsx
@@ -0,0 +1,78 @@
+"use client";
+import React, { useState } from "react";
+import LargeBtn from "./../../signin/_components/molecules/LargeBtn";
+
+const AgreeBox = () => {
+ const [isTermsAgreed, setIsTermsAgreed] = useState(false);
+ const [isPrivacyAgreed, setIsPrivacyAgreed] = useState(false);
+
+ const handleTermsChange = (event: any) => {
+ setIsTermsAgreed(event.target.checked);
+ };
+
+ const handlePrivacyChange = (event: any) => {
+ setIsPrivacyAgreed(event.target.checked);
+ };
+
+ const isButtonDisabled = !isTermsAgreed || !isPrivacyAgreed;
+
+ return (
+
+
+ );
+};
+
+export default AgreeBox;
diff --git a/src/app/accounts/signup/_components/LeftPage.tsx b/src/app/accounts/signup/_components/LeftPage.tsx
new file mode 100644
index 0000000..7300fb9
--- /dev/null
+++ b/src/app/accounts/signup/_components/LeftPage.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const LeftPage = () => {
+ return (
+ 약관에 동의해 주세요
+
+
+
+
+
+
+
+
+
+
+
+ 동의하기
+
+
+
+
+ );
+};
+
+export default LeftPage;
diff --git a/src/app/accounts/signup/layout.tsx b/src/app/accounts/signup/layout.tsx
new file mode 100644
index 0000000..c2e2c69
--- /dev/null
+++ b/src/app/accounts/signup/layout.tsx
@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+import LeftPage from "./_components/LeftPage";
+
+interface LayoutProps {
+ children: ReactNode;
+}
+
+const Layout = ({ children }: LayoutProps) => {
+ return (
+
+ 
+
+ {"/*elice*/"}
+
+ 엘리스에서 Run it, Learn it
+
+
+
+
+ );
+};
+
+export default Layout;
diff --git a/src/app/accounts/signup/page.tsx b/src/app/accounts/signup/page.tsx
new file mode 100644
index 0000000..e008463
--- /dev/null
+++ b/src/app/accounts/signup/page.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import AgreeBox from "./_components/AgreeBox";
+
+function page() {
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+export default page;
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/src/app/favicon.ico and /dev/null differ
diff --git a/src/app/ko/_components/BrandBox.tsx b/src/app/ko/_components/BrandBox.tsx
new file mode 100644
index 0000000..36ece55
--- /dev/null
+++ b/src/app/ko/_components/BrandBox.tsx
@@ -0,0 +1,16 @@
+import BrandAnimation from "./molecules/BrandAnimation";
+import BrandReverseAnimation from "./molecules/BrandReverseAnimation";
+
+const BrandBox = () => {
+ return (
+
+
+ );
+};
+
+export default BrandBox;
diff --git a/src/app/ko/_components/Consulting.tsx b/src/app/ko/_components/Consulting.tsx
new file mode 100644
index 0000000..3dd493e
--- /dev/null
+++ b/src/app/ko/_components/Consulting.tsx
@@ -0,0 +1,35 @@
+import Link from "next/link";
+import Button from "@/app/_components/Button";
+
+export default function Consulting() {
+ return (
+
+ 엘리스와 함께한 고객
+
+
+
+
+ );
+}
diff --git a/src/app/ko/_components/InfoBox.tsx b/src/app/ko/_components/InfoBox.tsx
new file mode 100644
index 0000000..e109423
--- /dev/null
+++ b/src/app/ko/_components/InfoBox.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import ArrowSVG from "@/../public/svg/rightarrow.svg";
+import Title from "@/app/_components/Title";
+import SubTitle from "@/app/_components/SubTitle";
+import ColorBox from "@/app/ko/_components/molecules/ColorBox";
+
+interface InfoBoxProps {
+ labelText: string;
+ bgColor: string;
+ textColor: string;
+ title: React.ReactNode;
+ subTitle: React.ReactNode;
+ imgUrl: string;
+ extraImgUrl: string;
+ extraImgText: string;
+ layoutIndex: number;
+}
+
+const InfoBox = ({
+ labelText,
+ bgColor,
+ textColor,
+ title,
+ subTitle,
+ imgUrl,
+ extraImgUrl,
+ extraImgText,
+ layoutIndex,
+}: InfoBoxProps) => {
+ const layoutDirection = layoutIndex === 1 ? "flex-row-reverse" : "flex-row";
+ return (
+
+
+ 디지털 전환을 위한
+
+
+ 올인원 솔루션
+
+
+
+ 엘리스에서는 교육, 평가, 데이터까지 DX에 필요한 모든 솔루션을
+ 제공합니다.
+
+
+
+
+
+
+ );
+};
+
+export default InfoBox;
diff --git a/src/app/ko/_components/InfoOrg.tsx b/src/app/ko/_components/InfoOrg.tsx
new file mode 100644
index 0000000..dfd83f2
--- /dev/null
+++ b/src/app/ko/_components/InfoOrg.tsx
@@ -0,0 +1,106 @@
+import React from "react";
+import InfoBox from "./InfoBox";
+
+const InfoOrg = () => {
+ return (
+
+ 
+
+ {/* 가운데 공간을 두기 위한 빈 div */}
+
+
+
+ {labelText}
+
+ {title}
+ {subTitle}
+
+
+
+
+ 
+
+
+ {extraImgText}
+
+
+ 학습의 몰입도를 높이는
+
+ 올인원 교육 플랫폼 + + } + subTitle={ + + 실습 위주의 학습 환경부터 효율적인 학생 관리 시스템까지, +
+ 학습자와 관리자 모두가 만족하는 차별화 된 학습 플랫폼을 만나 보세요. + + } + imgUrl="https://elice.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsuggestion_1_desktop.11d03eb8.png&w=1200&q=75" + extraImgUrl="https://elice.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flxp_icon.d1d8ac60.png&w=128&q=75" + extraImgText="엘리스LXP" + layoutIndex={0} + /> +
+ 1,000개 이상의 교육 콘텐츠로 구성하는
+
+ 우리 회사 맞춤 DX 과정 + + } + subTitle={ + + 직무별 맞춤 교육부터 산업별 프로젝트 기반 교육, 데이터 분석 및 AI/ML + 모델링까지. +
+ 데이터 기반으로 끊임없이 진화하는 콘텐츠를 지금 바로 도입해 보세요. + + } + imgUrl="https://elice.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsuggestion_2_desktop.fd729d25.png&w=1920&q=75" + extraImgUrl="https://elice.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fedu_icon.451de98a.png&w=128&q=75" + extraImgText="엘리스라이브러리" + layoutIndex={1} + /> +
+ 개발자 채용부터 DX 역량 평가까지
+
+ 모두 하나의 플랫폼에서 + + } + subTitle={ + + 국내 유수 기업의 DX 역량 평가를 진행하며 쌓아온 데이터를 기반으로 +
+ 개발자 채용 평가, 재직자 역량 평가, 경진대회 등 다양한 테스트를 + 진행해 보세요. + + } + imgUrl="https://elice.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsuggestion_3_desktop.e1b0b33d.png&w=1920&q=75" + extraImgUrl="https://elice.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest_icon.0dfd2fca.png&w=128&q=75" + extraImgText="엘리스테스트" + layoutIndex={0} + /> +
+ 학습에 최적화된
+
+ 가장 간편한 GPU 클라우드 + + } + subTitle={ + + 원하는 만큼의 GPU 자원을 실시간으로 유연하게 할당받으세요. +
+ AI 학습과 연구부터 수천 명 규모의 머신러닝 경진대회까지 안정적으로 + 지원합니다. + + } + imgUrl="https://elice.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsuggestion_4_desktop.17b0a00c.png&w=1920&q=75" + extraImgUrl="https://elice.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcloud_icon.94151152.png&w=128&q=75" + extraImgText="엘리스클라우드" + layoutIndex={1} + /> +
+ );
+};
+
+export default InfoOrg;
diff --git a/src/app/ko/_components/VideoBox.tsx b/src/app/ko/_components/VideoBox.tsx
new file mode 100644
index 0000000..629876a
--- /dev/null
+++ b/src/app/ko/_components/VideoBox.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import PlaySVG from "@/../public/svg/playbtn.svg";
+
+const VideoBox = () => {
+ return (
+ + 올인원 교육 플랫폼 + + } + subTitle={ + + 실습 위주의 학습 환경부터 효율적인 학생 관리 시스템까지, +
+ 학습자와 관리자 모두가 만족하는 차별화 된 학습 플랫폼을 만나 보세요. + + } + imgUrl="https://elice.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsuggestion_1_desktop.11d03eb8.png&w=1200&q=75" + extraImgUrl="https://elice.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flxp_icon.d1d8ac60.png&w=128&q=75" + extraImgText="엘리스LXP" + layoutIndex={0} + /> +
+ 우리 회사 맞춤 DX 과정 + + } + subTitle={ + + 직무별 맞춤 교육부터 산업별 프로젝트 기반 교육, 데이터 분석 및 AI/ML + 모델링까지. +
+ 데이터 기반으로 끊임없이 진화하는 콘텐츠를 지금 바로 도입해 보세요. + + } + imgUrl="https://elice.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsuggestion_2_desktop.fd729d25.png&w=1920&q=75" + extraImgUrl="https://elice.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fedu_icon.451de98a.png&w=128&q=75" + extraImgText="엘리스라이브러리" + layoutIndex={1} + /> +
+ 모두 하나의 플랫폼에서 + + } + subTitle={ + + 국내 유수 기업의 DX 역량 평가를 진행하며 쌓아온 데이터를 기반으로 +
+ 개발자 채용 평가, 재직자 역량 평가, 경진대회 등 다양한 테스트를 + 진행해 보세요. + + } + imgUrl="https://elice.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsuggestion_3_desktop.e1b0b33d.png&w=1920&q=75" + extraImgUrl="https://elice.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest_icon.0dfd2fca.png&w=128&q=75" + extraImgText="엘리스테스트" + layoutIndex={0} + /> +
+ 가장 간편한 GPU 클라우드 + + } + subTitle={ + + 원하는 만큼의 GPU 자원을 실시간으로 유연하게 할당받으세요. +
+ AI 학습과 연구부터 수천 명 규모의 머신러닝 경진대회까지 안정적으로 + 지원합니다. + + } + imgUrl="https://elice.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsuggestion_4_desktop.17b0a00c.png&w=1920&q=75" + extraImgUrl="https://elice.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcloud_icon.94151152.png&w=128&q=75" + extraImgText="엘리스클라우드" + layoutIndex={1} + /> +
+
+
+ );
+};
+
+export default VideoBox;
diff --git a/src/app/ko/_components/molecules/BrandAnimation.tsx b/src/app/ko/_components/molecules/BrandAnimation.tsx
new file mode 100644
index 0000000..3fd9056
--- /dev/null
+++ b/src/app/ko/_components/molecules/BrandAnimation.tsx
@@ -0,0 +1,49 @@
+"use client";
+import React from "react";
+
+export default function BrandAnimation() {
+ const images = Array.from({ length: 8 }, (_, i) => `/brand/${i + 1}.png`);
+ const totalImages = images.length;
+ const duplicateImages = [...images, ...images]; // 이미지 배열을 복제합니다.
+
+ return (
+
+
+
+ 엘리스를 경험한 고객의 이야기
+
+
+
+ Play video
+
+
+ );
+}
diff --git a/src/app/ko/_components/molecules/BrandReverseAnimation.tsx b/src/app/ko/_components/molecules/BrandReverseAnimation.tsx
new file mode 100644
index 0000000..b6ad7f9
--- /dev/null
+++ b/src/app/ko/_components/molecules/BrandReverseAnimation.tsx
@@ -0,0 +1,49 @@
+"use client";
+import React from "react";
+
+export default function BrandAnimation() {
+ const images = Array.from({ length: 8 }, (_, i) => `/brand/${i + 1}.png`);
+ const totalImages = images.length;
+ const duplicateImages = [...images, ...images]; // 이미지 배열을 복제합니다.
+
+ return (
+
+ {duplicateImages.map((src, index) => (
+
+
+
+
+ 
+
+ ))}
+
+
+ );
+}
diff --git a/src/app/ko/_components/molecules/ColorBox.tsx b/src/app/ko/_components/molecules/ColorBox.tsx
new file mode 100644
index 0000000..4fde497
--- /dev/null
+++ b/src/app/ko/_components/molecules/ColorBox.tsx
@@ -0,0 +1,21 @@
+import React, { HTMLAttributes } from "react";
+
+// 확장된 props 정의
+type TitleProps = HTMLAttributes
+ {duplicateImages.map((src, index) => (
+
+
+
+
+
+
+ ))}
+
+ {children}
+
+ );
+};
+
+export default ColorBox;
diff --git a/src/app/ko/contact/_components/DataBox.tsx b/src/app/ko/contact/_components/DataBox.tsx
new file mode 100644
index 0000000..f13f2f8
--- /dev/null
+++ b/src/app/ko/contact/_components/DataBox.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import SubBox from "../_components/molecules/SubBox";
+
+const DataBox = () => {
+ return (
+
+
+ );
+};
+
+export default DataBox;
diff --git a/src/app/ko/contact/_components/InputBox.tsx b/src/app/ko/contact/_components/InputBox.tsx
new file mode 100644
index 0000000..b1c419c
--- /dev/null
+++ b/src/app/ko/contact/_components/InputBox.tsx
@@ -0,0 +1,104 @@
+import React from "react";
+
+interface ContentProps {
+ className?: string;
+ children: React.ReactNode;
+}
+
+const Content = ({ className, children }: ContentProps) => {
+ return (
+
+
+
+ 영업팀 문의
+
+
+ 몇 가지 정보를 입력해 주시면 엘리스 담당자가 연락을 드리겠습니다.
+
+
+ {children}
+
+ );
+};
+
+function InputBox() {
+ return (
+
+
+ 회사 메일
+ *
+
+
+ 휴대폰 번호
+
+ 비즈니스 분야
+
+ 직군/직무
+
+ 예상 사용 인원
+
+ 기타 문의 내용
+
+
+ );
+}
+
+export default InputBox;
diff --git a/src/app/ko/contact/_components/molecules/SubBox.tsx b/src/app/ko/contact/_components/molecules/SubBox.tsx
new file mode 100644
index 0000000..f8bf406
--- /dev/null
+++ b/src/app/ko/contact/_components/molecules/SubBox.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+interface SubBoxProps {
+ imgUrl: string;
+ imgAlt: string;
+ title: string;
+ description: string;
+ className?: string;
+}
+
+const SubBox = ({
+ imgUrl,
+ imgAlt,
+ title,
+ description,
+ className,
+}: SubBoxProps) => {
+ return (
+ 0/300
+
+
+
+
+ 개인정보 수집 및 이용 동의
+ *
+
+
+ 제출 버튼을 클릭하면 엘리스 그룹이 연락 목적으로 위 정보를 저장하고
+ 처리하는데 동의하는 것입니다. 당사의{" "}
+ 개인정보 처리방침을
+ 읽어 보십시오.
+
+
+
+
+
+ );
+};
+
+export default SubBox;
diff --git a/src/app/ko/contact/layout.tsx b/src/app/ko/contact/layout.tsx
new file mode 100644
index 0000000..5c48e8b
--- /dev/null
+++ b/src/app/ko/contact/layout.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import Navbar from "@/app/_components/Navbar";
+
+export default function layout({ children }: { children: ReactNode }) {
+ return (
+
+
+
+ {title}
+ {description}
+
+
+ );
+}
diff --git a/src/app/ko/contact/page.tsx b/src/app/ko/contact/page.tsx
new file mode 100644
index 0000000..aa28388
--- /dev/null
+++ b/src/app/ko/contact/page.tsx
@@ -0,0 +1,17 @@
+import InputBox from "./_components/InputBox";
+import DataBox from "./_components/DataBox";
+
+export default function Page() {
+ return (
+ {children}
+
+
+ );
+}
diff --git a/src/app/ko/layout.tsx b/src/app/ko/layout.tsx
new file mode 100644
index 0000000..5c64937
--- /dev/null
+++ b/src/app/ko/layout.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import Navbar from "@/app/_components/Navbar";
+
+export default function layout({ children }: { children: ReactNode }) {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/ko/page.tsx b/src/app/ko/page.tsx
new file mode 100644
index 0000000..b32cd5e
--- /dev/null
+++ b/src/app/ko/page.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import Consulting from "./_components/Consulting";
+import BrandBox from "./_components/BrandBox";
+import InfoOrg from "./_components/InfoOrg";
+import VideoBox from "./_components/VideoBox";
+
+export default function Page() {
+ return (
+ {children}
+
+
+ );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
deleted file mode 100644
index a56e4d0..0000000
--- a/src/app/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function Home() {
- return (
-