메인페이지지
This commit is contained in:
wallace
384
app/page.tsx
384
app/page.tsx
@@ -3,19 +3,41 @@
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
|
// 이미지 상수
|
||||||
const logoImage = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
|
const logoImage = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
|
||||||
const chevronIcon = "http://localhost:3845/assets/6abc26b721560f9d3c51cf552531775f54f2f86a.svg";
|
const chevronIcon = "http://localhost:3845/assets/6abc26b721560f9d3c51cf552531775f54f2f86a.svg";
|
||||||
|
const heroImage = "http://localhost:3845/assets/02d8c5116625dec34c335abdf02727a333ee1e42.png";
|
||||||
|
const chevronIcon1 = "http://localhost:3845/assets/ad74d16bce8358831f1349a912d7e02bb0efaa84.svg";
|
||||||
|
const chevronIcon2 = "http://localhost:3845/assets/f671b394255e49d772f588cdc8bd6e9dfd423281.svg";
|
||||||
|
const lineIcon = "http://localhost:3845/assets/2fbce31172577fb51bb8028f779906af08a2aef0.svg";
|
||||||
|
|
||||||
|
// 과목 이미지들
|
||||||
|
const courseImages = [
|
||||||
|
"http://localhost:3845/assets/dbcdb3a62893cc1bbf618aaa03d3991209730907.png",
|
||||||
|
"http://localhost:3845/assets/926321498bba6094d98b0306e038328654b5e72c.png",
|
||||||
|
"http://localhost:3845/assets/27a46837f82b972822bc9dc0c568d32bf2ff368a.png",
|
||||||
|
"http://localhost:3845/assets/603bee236c3ff989d503608d3ebe12eea354fefb.png",
|
||||||
|
"http://localhost:3845/assets/b7e4617653e0115d927ad34a0c2e4e7be0cbb3df.png",
|
||||||
|
];
|
||||||
|
|
||||||
|
const courses = [
|
||||||
|
{ title: "원자로 운전 및 계통", image: courseImages[0], hasNew: true },
|
||||||
|
{ title: "방사선 안전", image: courseImages[1], hasNew: true },
|
||||||
|
{ title: "핵 연료", image: courseImages[2], hasNew: true },
|
||||||
|
{ title: "방사선 안전", image: courseImages[3], hasNew: false },
|
||||||
|
{ title: "방사성 폐기물", image: courseImages[4], hasNew: false },
|
||||||
|
];
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||||
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
|
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col flex-1 bg-white">
|
<div className="flex flex-col flex-1 bg-white items-center">
|
||||||
{/* 헤더 */}
|
{/* 헤더 */}
|
||||||
<header className="bg-white shadow-sm sticky top-0 z-50">
|
<header className="border-b border-black/10 w-full">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-16">
|
<div className="max-w-full mx-auto px-16">
|
||||||
<div className="flex flex-row justify-between items-center gap-4 py-6">
|
<div className="flex items-center justify-between h-[95px] py-6 gap-4">
|
||||||
{/* 로고/메뉴 그룹 */}
|
{/* 로고/메뉴 그룹 */}
|
||||||
<div className="flex items-center gap-9 flex-1">
|
<div className="flex items-center gap-9 flex-1">
|
||||||
{/* Company 로고 */}
|
{/* Company 로고 */}
|
||||||
@@ -77,10 +99,13 @@ export default function Home() {
|
|||||||
</button>
|
</button>
|
||||||
{/* 사용자 메뉴 드롭다운 */}
|
{/* 사용자 메뉴 드롭다운 */}
|
||||||
{isUserMenuOpen && (
|
{isUserMenuOpen && (
|
||||||
<div className="absolute right-0 mt-2 bg-white border border-gray-200 rounded-md shadow-lg py-2 min-w-[120px]">
|
<div className="absolute right-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-lg py-0 min-w-[160px] overflow-hidden">
|
||||||
<Link href="#" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">프로필</Link>
|
<Link href="#" className="block px-2 py-2.5 text-[#333c47] font-semibold text-base hover:bg-gray-100 transition">
|
||||||
<Link href="#" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">설정</Link>
|
내 정보 수정
|
||||||
<Link href="#" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">로그아웃</Link>
|
</Link>
|
||||||
|
<Link href="#" className="block px-2 py-2.5 text-[#333c47] font-semibold text-base hover:bg-gray-100 transition">
|
||||||
|
로그아웃
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -147,133 +172,272 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{/* 히어로 섹션 */}
|
{/* 메인 콘텐츠 영역 - Hero 배너 + 사이드바 */}
|
||||||
<section className="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
|
<div className="flex gap-8 items-start justify-center pt-8 pb-0 px-16 w-full">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
{/* Hero 배너 */}
|
||||||
<h2 className="text-5xl font-bold mb-6">
|
<div className="flex-1 min-h-0 overflow-hidden relative rounded-xl self-stretch">
|
||||||
혁신적인 XR 학습 플랫폼
|
<div className="absolute inset-0">
|
||||||
</h2>
|
<img
|
||||||
<p className="text-xl mb-8 text-blue-100">
|
alt="Hero Banner"
|
||||||
몰입형 경험을 통해 새로운 차원의 학습을 시작하세요
|
className="absolute inset-0 max-w-none object-cover w-full h-full"
|
||||||
|
src={heroImage}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="absolute bottom-[60px] left-1/2 -translate-x-1/2 flex flex-col gap-2 items-start text-white text-center w-[496px]">
|
||||||
|
<p className="relative text-[32px] font-bold text-nowrap tracking-[-0.32px] whitespace-pre">
|
||||||
|
미래 에너지, 안전의 길을 열다
|
||||||
</p>
|
</p>
|
||||||
<div className="flex justify-center space-x-4">
|
<p className="min-w-full relative text-2xl tracking-[-0.24px] w-min">
|
||||||
<Link
|
지속 가능한 내일을 만들어가는 여정, 지금 시작하세요.
|
||||||
href="/login"
|
</p>
|
||||||
className="px-8 py-3 bg-white text-blue-600 rounded-lg font-semibold hover:bg-gray-100 transition"
|
</div>
|
||||||
>
|
</div>
|
||||||
시작하기
|
|
||||||
</Link>
|
{/* 사이드바 */}
|
||||||
<button className="px-8 py-3 bg-transparent border-2 border-white text-white rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition">
|
<div className="flex flex-col gap-3 items-start shrink-0 w-[460px]">
|
||||||
알아보기
|
{/* 나의 수강현황 */}
|
||||||
|
<div className="bg-white border border-black/10 rounded-xl w-full">
|
||||||
|
<div className="flex flex-col items-start overflow-hidden rounded-inherit w-full">
|
||||||
|
<div className="flex flex-col gap-6 items-start justify-center pb-8 pt-6 px-6 w-full">
|
||||||
|
<div className="flex flex-col gap-5 items-start w-full">
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<p className="font-bold leading-[1.5] text-[#333c47] text-base tracking-[-0.16px] whitespace-pre">
|
||||||
|
나의 수강현황
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3 items-center justify-center w-full">
|
||||||
|
{[
|
||||||
|
{ value: "4", label: "수강중" },
|
||||||
|
{ value: "12", label: "수강 완료" },
|
||||||
|
{ value: "8", label: "학습 제출" },
|
||||||
|
{ value: "4", label: "수료증" },
|
||||||
|
].map((stat, idx) => (
|
||||||
|
<div key={idx} className="flex-1 flex flex-col gap-1 items-center justify-center">
|
||||||
|
<div className="bg-[rgba(222,225,230,0.2)] flex flex-col gap-6 h-20 items-center justify-center px-4 py-2 rounded-xl w-[92px]">
|
||||||
|
<p className="font-extrabold leading-[1.5] text-[#3230e2] text-[28px] text-nowrap">
|
||||||
|
{stat.value}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p className="font-semibold leading-[1.5] text-[#333c47] text-[15px] text-nowrap">
|
||||||
|
{stat.label}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 최근 수강 과목 */}
|
||||||
|
<div className="bg-white border border-black/10 rounded-xl w-full">
|
||||||
|
<div className="flex flex-col items-start overflow-hidden rounded-inherit w-full">
|
||||||
|
<div className="flex flex-col gap-6 items-start justify-center pb-8 pt-6 px-6 w-full">
|
||||||
|
<div className="flex flex-col gap-5 items-start w-full">
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<p className="font-bold leading-[1.5] text-[#333c47] text-base tracking-[-0.16px] whitespace-pre">
|
||||||
|
최근 수강 과목
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-3 items-start w-full">
|
||||||
|
<div className="bg-[#f8f9fa] flex items-start justify-between p-3 rounded-lg w-full">
|
||||||
|
<div className="flex-1 flex gap-1 items-center">
|
||||||
|
<div className="flex flex-col gap-1 items-start justify-center text-black text-[15px]">
|
||||||
|
<h5 className="block font-semibold leading-[1.2] text-nowrap whitespace-pre">
|
||||||
|
원자로 운전 및 계통
|
||||||
|
</h5>
|
||||||
|
<h5 className="block font-normal leading-[1.2] text-nowrap whitespace-pre">
|
||||||
|
2. 원자로 냉각재 계통 (RCS) 및 열수력
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-center shrink-0">
|
||||||
|
<div className="rotate-180">
|
||||||
|
<img src={chevronIcon1} alt="chevron" className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between w-full">
|
||||||
|
<div className="flex gap-10 items-start">
|
||||||
|
<p className="font-medium leading-[18px] text-[15px]">
|
||||||
|
<span className="text-black/50">진도율: </span>40%
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button className="bg-[#3230e2] flex gap-2 h-10 items-center justify-center px-4 py-3 rounded-lg">
|
||||||
|
<div className="flex gap-1 items-center justify-center">
|
||||||
|
<p className="font-medium leading-[1.5] text-base text-white tracking-[-0.16px] whitespace-pre">
|
||||||
|
이어서 수강하기
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* 주요 기능 */}
|
{/* 전체 과목 리스트 */}
|
||||||
<section className="py-20 bg-gray-50">
|
<div className="flex flex-col items-start px-0 py-16 w-full max-w-[1792px]">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="flex h-[60px] items-center justify-between w-full">
|
||||||
<h3 className="text-3xl font-bold text-center mb-12">주요 기능</h3>
|
<div className="flex flex-col h-[44px] items-center">
|
||||||
<div className="grid md:grid-cols-3 gap-8">
|
<div className="flex gap-2.5 h-[42px] items-center justify-center px-0.5 py-0 text-center text-nowrap w-full whitespace-pre">
|
||||||
<div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
|
<p className="font-bold leading-[1.7] text-[20px] text-[#1f1f1f] tracking-[-0.2px]">
|
||||||
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
전체 과목
|
||||||
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h4 className="text-xl font-semibold mb-2">다양한 강의</h4>
|
|
||||||
<p className="text-gray-600">
|
|
||||||
XR 기술을 활용한 몰입형 학습 경험을 제공합니다
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<p className="font-normal leading-[1.5] text-[#030774] text-[19px] tracking-[-0.19px]">
|
||||||
<div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
|
4
|
||||||
<div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
|
|
||||||
<svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h4 className="text-xl font-semibold mb-2">커뮤니티</h4>
|
|
||||||
<p className="text-gray-600">
|
|
||||||
학습자들과 함께 소통하고 경험을 공유하세요
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
|
|
||||||
<div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
|
|
||||||
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h4 className="text-xl font-semibold mb-2">학습 추적</h4>
|
|
||||||
<p className="text-gray-600">
|
|
||||||
진도율과 성취도를 한눈에 확인하고 관리하세요
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex gap-0.5 items-center">
|
||||||
|
<p className="font-semibold leading-[1.6] text-[14px] text-[#6e6e6e] text-nowrap tracking-[-0.14px]">
|
||||||
|
더보기
|
||||||
|
</p>
|
||||||
|
<div className="overflow-hidden shrink-0 w-4 h-4">
|
||||||
|
<img src={chevronIcon2} alt="chevron" className="block max-w-none w-full h-full" />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* 인기 강의 */}
|
|
||||||
<section className="py-20">
|
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
||||||
<h3 className="text-3xl font-bold text-center mb-12">인기 강의</h3>
|
|
||||||
<div className="grid md:grid-cols-4 gap-6">
|
|
||||||
{[1, 2, 3, 4].map((item) => (
|
|
||||||
<div key={item} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition cursor-pointer">
|
|
||||||
<div className="h-48 bg-gradient-to-br from-blue-400 to-purple-500"></div>
|
|
||||||
<div className="p-4">
|
|
||||||
<h4 className="font-semibold mb-2">XR 기초 강의 {item}</h4>
|
|
||||||
<p className="text-sm text-gray-600 mb-2">강사명 • {item * 10}명 수강</p>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-blue-600 font-semibold">무료</span>
|
|
||||||
<span className="text-yellow-500">⭐ 4.{item + 5}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex gap-8 items-center justify-center w-full">
|
||||||
|
{courses.map((course, idx) => (
|
||||||
|
<div key={idx} className="flex-1 flex flex-col gap-4 items-start rounded-lg">
|
||||||
|
<div className="h-[230px] overflow-hidden relative rounded-xl w-full">
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
<img
|
||||||
|
alt={course.title}
|
||||||
|
className="absolute inset-0 max-w-none object-cover w-full h-full"
|
||||||
|
src={course.image}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{course.hasNew && (
|
||||||
|
<div className="absolute bg-[#fd0a0a] flex flex-col gap-2.5 items-center justify-center p-2.5 right-[-166.2px] rounded-full w-8 h-8 top-2.5">
|
||||||
|
<p className="font-extrabold leading-[1.45] text-base text-white w-full">
|
||||||
|
N
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1 items-start text-black w-full">
|
||||||
|
<h5 className="block font-semibold text-[17px] w-full leading-[1.2]">
|
||||||
|
{course.title}
|
||||||
|
</h5>
|
||||||
|
<p className="font-medium text-[#7a7c85] text-sm tracking-[-0.07px] w-full leading-[1.45]">
|
||||||
|
영상 44개 · 총 12시간 56분
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* 푸터 */}
|
{/* 공지사항 */}
|
||||||
<footer className="bg-gray-900 text-white py-12">
|
<div className="flex flex-col items-start w-full">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="bg-[#f2f3f7] flex items-center justify-center px-16 py-12 rounded-xl w-full">
|
||||||
<div className="grid md:grid-cols-4 gap-8">
|
<div className="flex-1 flex gap-8 items-start">
|
||||||
<div>
|
<div className="flex flex-col items-start shrink-0">
|
||||||
<h4 className="text-xl font-bold mb-4">XR LMS</h4>
|
<div className="flex flex-col h-[44px] justify-center text-[#333c47] text-[19px] text-center tracking-[-0.19px] w-[66px]">
|
||||||
<p className="text-gray-400 text-sm">
|
<p className="font-bold leading-[1.5]">공지사항</p>
|
||||||
혁신적인 학습 경험을 제공하는 플랫폼
|
</div>
|
||||||
|
<div className="flex gap-0.5 items-center">
|
||||||
|
<p className="font-semibold leading-[1.6] text-[14px] text-[#6e6e6e] text-nowrap tracking-[-0.14px]">
|
||||||
|
목록보기
|
||||||
|
</p>
|
||||||
|
<div className="overflow-hidden shrink-0 w-4 h-4">
|
||||||
|
<img src={chevronIcon2} alt="chevron" className="block max-w-none w-full h-full" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 flex flex-col items-start">
|
||||||
|
{[
|
||||||
|
{ category: "점검", title: "방사선 폐기 VR 실습 서버 정기점검 안내", date: "2025. 12. 12. (화)" },
|
||||||
|
{ category: "점검", title: "방사선 폐기 VR 실습 서버 정기점검 안내", date: "2025. 12. 12. (화)" },
|
||||||
|
{ category: "점검", title: "방사선 폐기 VR 실습 서버 정기점검 안내", date: "2025. 12. 12. (화)" },
|
||||||
|
].map((notice, idx) => (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
className={`flex gap-2 h-11 items-center px-2 py-3 w-full ${idx < 2 ? 'border-b border-black/10' : ''}`}
|
||||||
|
>
|
||||||
|
<div className="bg-[#030774] flex gap-2.5 items-center justify-center px-2 py-1 rounded-lg shrink-0">
|
||||||
|
<p className="font-semibold leading-normal text-[13px] text-white text-nowrap whitespace-pre">
|
||||||
|
{notice.category}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<p className="flex-1 font-medium leading-normal min-w-0 text-[#515151] text-base">
|
||||||
<h5 className="font-semibold mb-4">학습</h5>
|
{notice.title}
|
||||||
<ul className="space-y-2 text-sm text-gray-400">
|
</p>
|
||||||
<li><Link href="#" className="hover:text-white transition">강의 목록</Link></li>
|
<p className="font-medium leading-normal text-[#515151] text-base text-nowrap text-right whitespace-pre">
|
||||||
<li><Link href="#" className="hover:text-white transition">카테고리</Link></li>
|
{notice.date}
|
||||||
<li><Link href="#" className="hover:text-white transition">신규 강의</Link></li>
|
</p>
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
))}
|
||||||
<h5 className="font-semibold mb-4">지원</h5>
|
|
||||||
<ul className="space-y-2 text-sm text-gray-400">
|
|
||||||
<li><Link href="#" className="hover:text-white transition">공지사항</Link></li>
|
|
||||||
<li><Link href="#" className="hover:text-white transition">FAQ</Link></li>
|
|
||||||
<li><Link href="#" className="hover:text-white transition">문의하기</Link></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h5 className="font-semibold mb-4">회사</h5>
|
|
||||||
<ul className="space-y-2 text-sm text-gray-400">
|
|
||||||
<li><Link href="#" className="hover:text-white transition">소개</Link></li>
|
|
||||||
<li><Link href="#" className="hover:text-white transition">이용약관</Link></li>
|
|
||||||
<li><Link href="#" className="hover:text-white transition">개인정보처리방침</Link></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-8 pt-8 border-t border-gray-800 text-center text-sm text-gray-400">
|
</div>
|
||||||
© 2024 XR LMS. All rights reserved.
|
|
||||||
|
{/* 푸터 */}
|
||||||
|
<footer className="bg-[#030774] border-t border-black/10 w-full">
|
||||||
|
<div className="flex gap-24 items-center justify-center overflow-hidden px-16 py-0 rounded-inherit w-full">
|
||||||
|
<div className="flex-1 flex gap-8 items-start px-0 py-20">
|
||||||
|
<nav className="flex-1 flex gap-8 items-start">
|
||||||
|
<div className="flex flex-col gap-2 items-center shrink-0">
|
||||||
|
<div className="h-[54px] relative shrink-0 w-[72px]">
|
||||||
|
<img alt="Logo" className="absolute inset-0 max-w-none w-full h-full" src={logoImage} />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col font-extrabold justify-center text-base text-white text-nowrap tracking-[-0.08px]">
|
||||||
|
<p className="leading-[1.45] whitespace-pre">XL LMS</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 flex flex-col gap-6 items-start justify-end">
|
||||||
|
<div className="flex gap-6 items-center">
|
||||||
|
<p className="font-semibold leading-[1.45] text-base text-white text-nowrap tracking-[-0.08px]">
|
||||||
|
이용 약관
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center justify-center w-[18px] h-0">
|
||||||
|
<div className="rotate-90">
|
||||||
|
<div className="h-0 relative w-[18px]">
|
||||||
|
<img alt="line" className="block max-w-none w-full h-full" src={lineIcon} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="font-semibold leading-[1.45] text-base text-white text-nowrap tracking-[-0.08px]">
|
||||||
|
개인정보처리방침
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center justify-center w-[18px] h-0">
|
||||||
|
<div className="rotate-90">
|
||||||
|
<div className="h-0 relative w-[18px]">
|
||||||
|
<img alt="line" className="block max-w-none w-full h-full" src={lineIcon} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="font-semibold leading-[1.45] text-base text-white text-nowrap tracking-[-0.08px]">
|
||||||
|
고객센터
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-6 items-end justify-end text-base text-white/80 text-nowrap tracking-[-0.08px] w-full">
|
||||||
|
<div className="flex-1 flex flex-col gap-2 items-start">
|
||||||
|
<p className="leading-[1.45] text-nowrap whitespace-pre font-medium">
|
||||||
|
(12345) 서울특별시 광진구 구의동 123-12(구의타워1)
|
||||||
|
</p>
|
||||||
|
<p className="leading-[1.45] text-nowrap whitespace-pre font-medium">
|
||||||
|
문의: 1234-1234 (평일 09:00 ~ 18:00)
|
||||||
|
</p>
|
||||||
|
<p className="leading-[1.45] text-nowrap whitespace-pre font-medium">
|
||||||
|
이메일: qwer1234@go.or.kr
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p className="font-medium leading-[1.45] text-nowrap whitespace-pre">
|
||||||
|
Copyright ⓒ 2025 XL LMS. All rights reserved
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user