Compare commits
6 Commits
33d5d900fc
...
86a9e1e17f
| Author | SHA1 | Date | |
|---|---|---|---|
|
86a9e1e17f | ||
|
|
7639c027e3 | ||
|
|
c524626a00 | ||
|
|
4663dd5ba6 | ||
|
|
ef82f69edc | ||
|
|
bfee0c4717 |
@@ -0,0 +1,38 @@
|
|||||||
|
[✅] 1. **전체 페이지 수직 분할 (기본 구조)**
|
||||||
|
* `<body>` 또는 최상위 wrapper div에 `display: flex`와 `flex-direction: column`을 적용합니다.
|
||||||
|
* 이는 페이지 전체를 **[헤더]**, **[메인 콘텐츠]**, **[푸터]** 3개의 큰 영역으로 수직 정렬하기 위함입니다.
|
||||||
|
* `min-height: 100vh`를 설정하여 콘텐츠가 적어도 화면 전체 높이를 차지하도록 합니다.
|
||||||
|
|
||||||
|
[✅] 2. **헤더 (Navigation Bar) 영역**
|
||||||
|
* `display: flex`, `flex-direction: row`, `justify-content: space-between`을 사용하여 **로고/메뉴 그룹**과 **사용자 메뉴(내 강의실, 프로필) 그룹**을 양쪽 끝으로 배치합니다.
|
||||||
|
* 로고/메뉴 그룹 내부도 `display: flex`, `align-items: center`로 로고와 메뉴 항목들을 정렬합니다.
|
||||||
|
* **[반응형]** 모바일 화면(@media 쿼리 사용)에서는 메뉴 항목들을 숨기고 햄버거 메뉴 아이콘을 표시하도록 처리합니다.
|
||||||
|
|
||||||
|
[] 3. **메인 콘텐츠 상단 (Hero + Sidebar) 영역**
|
||||||
|
* `main` 태그 내부에 `display: flex`, `flex-direction: row`를 가진 컨테이너를 생성합니다.
|
||||||
|
* 이 컨테이너는 **Hero 배너(좌측)**와 **사이드바(우측)** 두 부분으로 가로 분할됩니다.
|
||||||
|
* **[반응형]** 모바일 화면에서는 `flex-direction: column`으로 변경하여 사이드바가 Hero 배너 하단으로 이동하도록 순서를 조정합니다.
|
||||||
|
|
||||||
|
[] 4. **Hero 배너 (메인 좌측)**
|
||||||
|
* Hero 배너 영역에 `flex-grow: 1`을 설정하여, 사이드바의 너비를 제외한 나머지 공간을 모두 차지하도록 합니다.
|
||||||
|
* 배너 컨테이너에 `position: relative`를, "미래 에너지, 안전의 길을 열다" 텍스트 박스에 `position: absolute`를 적용하여 텍스트를 이미지 위에 오버레이합니다.
|
||||||
|
|
||||||
|
[] 5. **우측 사이드바 (나의 수강현황, 최근 수강 과목)**
|
||||||
|
* 사이드바 영역에 `flex-basis` 또는 `width`를 사용해 고정된 너비(예: `300px`)를 지정합니다.
|
||||||
|
* '나의 수강현황'과 '최근 수강 과목' 두 섹션은 `display: flex`, `flex-direction: column`으로 수직 정렬합니다.
|
||||||
|
* '나의 수강현황' 내부의 4개 통계(수강중, 수강완료 등)는 `display: flex`, `justify-content: space-around`로 균등하게 배치합니다.
|
||||||
|
|
||||||
|
[] 6. **전체 과목 리스트 (메인 중단)**
|
||||||
|
* "전체 과목" 타이틀과 "지도보기" 링크를 `display: flex`, `justify-content: space-between`으로 배치합니다.
|
||||||
|
* 과목 카드 리스트는 `display: flex`, `flex-wrap: wrap`을 설정하여 카드들이 자동으로 다음 줄로 넘어가도록 합니다.
|
||||||
|
* 각 과목 카드에는 `flex-basis`를 사용해 너비를 지정합니다. (예: `flex-basis: 24%`, 4개 배치. `gap`으로 간격 조절)
|
||||||
|
* **[반응형]** 화면 크기에 따라 `flex-basis` 값을 변경합니다. (예: 태블릿 `48%`, 모바일 `100%`)
|
||||||
|
|
||||||
|
[] 7. **공지사항 (메인 하단)**
|
||||||
|
* "공지사항" 타이틀과 "더보기" 링크를 `display: flex`, `justify-content: space-between`으로 배치합니다.
|
||||||
|
* 각 공지사항 항목(카테고리, 제목, 날짜) 역시 `display: flex`, `justify-content: space-between`을 사용하여 깔끔하게 정렬합니다.
|
||||||
|
|
||||||
|
[] 8. **푸터 (Footer) 영역**
|
||||||
|
* `display: flex`, `flex-direction: row`, `justify-content: space-between`을 사용하여 **로고/주소/고객센터 정보** 그룹과 **저작권** 텍스트를 배치합니다.
|
||||||
|
* `flex-wrap: wrap`을 추가하여 화면이 좁아질 때 유연하게 대응합니다.
|
||||||
|
* **[반응형]** 모바일에서는 `flex-direction: column`으로 변경하고 `align-items: center` 또는 `flex-start`로 정렬을 변경할 수 있습니다.
|
||||||
@@ -32,7 +32,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
height: 100vh;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ export default function LoginPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 체크박스 */}
|
{/* 체크박스 */}
|
||||||
<div className="flex items-center space-x-4">
|
<div className="flex items-center space-x-4 justify-start">
|
||||||
<label className="flex items-center">
|
<label className="flex items-center">
|
||||||
<input type="checkbox" className="mr-2" />
|
<input type="checkbox" className="mr-2" />
|
||||||
<span className="text-sm">아이디 기억하기</span>
|
<span className="text-sm">아이디 기억하기</span>
|
||||||
|
|||||||
319
app/page.tsx
319
app/page.tsx
@@ -1,166 +1,165 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
export default function Home() {
|
// 이미지 상수
|
||||||
|
const imgLogo = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
|
||||||
|
|
||||||
|
type CheckboxProps = {
|
||||||
|
className?: string;
|
||||||
|
status?: "Inactive" | "Focused" | "Disabled";
|
||||||
|
};
|
||||||
|
|
||||||
|
function Checkbox({ className, status = "Inactive" }: CheckboxProps) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-white">
|
<div className={className}>
|
||||||
{/* 헤더 */}
|
<div className="absolute border border-[#b9b9b9] border-solid left-0 rounded-[4px] size-[18px] top-0" />
|
||||||
<header className="bg-white shadow-sm sticky top-0 z-50">
|
</div>
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
);
|
||||||
<div className="flex justify-between items-center h-16">
|
}
|
||||||
<div className="flex items-center">
|
|
||||||
<h1 className="text-2xl font-bold text-blue-600">XR LMS</h1>
|
export default function LoginPage() {
|
||||||
</div>
|
return (
|
||||||
<nav className="hidden md:flex space-x-8">
|
<div className="bg-white min-h-screen flex flex-col items-center justify-center py-8">
|
||||||
<Link href="#" className="text-gray-700 hover:text-blue-600 transition">강의</Link>
|
{/* 로고 */}
|
||||||
<Link href="#" className="text-gray-700 hover:text-blue-600 transition">커뮤니티</Link>
|
<div className="mb-16 w-[179px] h-[185px] flex items-center justify-center">
|
||||||
<Link href="#" className="text-gray-700 hover:text-blue-600 transition">공지사항</Link>
|
<div className="relative w-full h-full overflow-hidden pointer-events-none">
|
||||||
<Link href="#" className="text-gray-700 hover:text-blue-600 transition">마이페이지</Link>
|
<img
|
||||||
</nav>
|
alt="Logo"
|
||||||
<div className="flex items-center space-x-4">
|
className="absolute h-[291.74%] left-[-100%] max-w-none top-[-95.73%] w-[301.18%]"
|
||||||
<Link
|
src={imgLogo}
|
||||||
href="/registeragreement"
|
/>
|
||||||
className="px-4 py-2 text-gray-700 hover:text-blue-600 transition"
|
</div>
|
||||||
>
|
</div>
|
||||||
회원가입
|
|
||||||
</Link>
|
{/* 콘텐츠 영역 */}
|
||||||
<Link
|
<div className="flex flex-col gap-[54px] items-center w-full max-w-[480px] px-4">
|
||||||
href="/login"
|
{/* 입력 폼 영역 */}
|
||||||
className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition"
|
<div className="flex flex-col gap-[20px] items-start w-full">
|
||||||
>
|
{/* 아이디 입력 필드 */}
|
||||||
로그인
|
<div className="flex flex-col gap-[8px] items-center w-full">
|
||||||
</Link>
|
<div className="flex flex-col gap-[4px] items-center w-full">
|
||||||
</div>
|
<div className="bg-white border border-[#b9b9b9] border-solid relative rounded-[8px] w-full">
|
||||||
</div>
|
<div className="box-border flex gap-[10px] items-center px-[16px] py-[10px] rounded-[inherit] w-full">
|
||||||
</div>
|
<input
|
||||||
</header>
|
type="text"
|
||||||
|
placeholder="아이디(이메일)"
|
||||||
{/* 히어로 섹션 */}
|
className="basis-0 font-['Pretendard_Variable',sans-serif] grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[16px] text-[#b9b9b9] w-full outline-none bg-transparent"
|
||||||
<section className="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
|
style={{ fontVariationSettings: "'wght' 500" }}
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
/>
|
||||||
<h2 className="text-5xl font-bold mb-6">
|
</div>
|
||||||
혁신적인 XR 학습 플랫폼
|
</div>
|
||||||
</h2>
|
</div>
|
||||||
<p className="text-xl mb-8 text-blue-100">
|
</div>
|
||||||
몰입형 경험을 통해 새로운 차원의 학습을 시작하세요
|
|
||||||
</p>
|
{/* 비밀번호 입력 필드 */}
|
||||||
<div className="flex justify-center space-x-4">
|
<div className="flex flex-col gap-[8px] items-center w-full">
|
||||||
<Link
|
<div className="flex flex-col gap-[4px] items-center rounded-[8px] w-full">
|
||||||
href="/login"
|
<div className="bg-white border border-[#b9b9b9] border-solid relative rounded-[8px] w-full">
|
||||||
className="px-8 py-3 bg-white text-blue-600 rounded-lg font-semibold hover:bg-gray-100 transition"
|
<div className="box-border flex gap-[10px] items-center px-[16px] py-[10px] rounded-[inherit] w-full">
|
||||||
>
|
<input
|
||||||
시작하기
|
type="password"
|
||||||
</Link>
|
placeholder="비밀번호"
|
||||||
<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">
|
className="basis-0 font-['Pretendard_Variable',sans-serif] grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[16px] text-[#b9b9b9] w-full outline-none bg-transparent"
|
||||||
알아보기
|
style={{ fontVariationSettings: "'wght' 500" }}
|
||||||
</button>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</div>
|
||||||
{/* 주요 기능 */}
|
|
||||||
<section className="py-20 bg-gray-50">
|
{/* 체크박스 영역 */}
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="flex gap-[46px] items-center justify-start w-full">
|
||||||
<h3 className="text-3xl font-bold text-center mb-12">주요 기능</h3>
|
<div className="flex gap-[10px] items-center">
|
||||||
<div className="grid md:grid-cols-3 gap-8">
|
<Checkbox className="relative shrink-0 size-[18px]" />
|
||||||
<div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
|
<p
|
||||||
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
className="font-['Pretendard_Variable',sans-serif] leading-[1.6] not-italic relative shrink-0 text-[14px] text-[#515151] whitespace-pre"
|
||||||
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
style={{ fontVariationSettings: "'wght' 500" }}
|
||||||
<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>
|
</p>
|
||||||
<h4 className="text-xl font-semibold mb-2">다양한 강의</h4>
|
</div>
|
||||||
<p className="text-gray-600">
|
<div className="flex gap-[10px] items-center">
|
||||||
XR 기술을 활용한 몰입형 학습 경험을 제공합니다
|
<Checkbox className="relative shrink-0 size-[18px]" />
|
||||||
</p>
|
<p
|
||||||
</div>
|
className="font-['Pretendard_Variable',sans-serif] leading-[1.6] not-italic relative shrink-0 text-[14px] text-[#515151] whitespace-pre"
|
||||||
<div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
|
style={{ fontVariationSettings: "'wght' 500" }}
|
||||||
<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" />
|
</p>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h4 className="text-xl font-semibold mb-2">커뮤니티</h4>
|
</div>
|
||||||
<p className="text-gray-600">
|
|
||||||
학습자들과 함께 소통하고 경험을 공유하세요
|
{/* 로그인 버튼 */}
|
||||||
</p>
|
<div className="flex flex-col gap-[16px] items-center w-full">
|
||||||
</div>
|
<button
|
||||||
<div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
|
type="submit"
|
||||||
<div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
|
className="bg-[#2b82e8] box-border flex gap-[10px] items-center justify-center px-[120px] py-[13px] rounded-[8px] w-full hover:bg-[#1e6bc7] transition-colors"
|
||||||
<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" />
|
<p
|
||||||
</svg>
|
className="font-['Pretendard_Variable',sans-serif] leading-[1.6] not-italic relative shrink-0 text-[16px] text-white text-center whitespace-pre"
|
||||||
</div>
|
style={{ fontVariationSettings: "'wght' 700" }}
|
||||||
<h4 className="text-xl font-semibold mb-2">학습 추적</h4>
|
>
|
||||||
<p className="text-gray-600">
|
로그인
|
||||||
진도율과 성취도를 한눈에 확인하고 관리하세요
|
</p>
|
||||||
</p>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
{/* 하단 링크 영역 */}
|
||||||
|
<div className="mt-8 flex gap-[6px] items-center justify-center flex-wrap">
|
||||||
{/* 인기 강의 */}
|
<Link
|
||||||
<section className="py-20">
|
href="/registeragreement"
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
className="box-border flex gap-[10px] h-[46px] items-center justify-center py-[13px] hover:opacity-80 transition-opacity"
|
||||||
<h3 className="text-3xl font-bold text-center mb-12">인기 강의</h3>
|
>
|
||||||
<div className="grid md:grid-cols-4 gap-6">
|
<p
|
||||||
{[1, 2, 3, 4].map((item) => (
|
className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
|
||||||
<div key={item} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition cursor-pointer">
|
style={{ fontVariationSettings: "'wght' 500" }}
|
||||||
<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>
|
||||||
<p className="text-sm text-gray-600 mb-2">강사명 • {item * 10}명 수강</p>
|
</Link>
|
||||||
<div className="flex items-center justify-between">
|
<div className="box-border flex gap-[10px] h-[46px] items-center justify-center px-0 py-[13px] shrink-0">
|
||||||
<span className="text-blue-600 font-semibold">무료</span>
|
<p
|
||||||
<span className="text-yellow-500">⭐ 4.{item + 5}</span>
|
className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
|
||||||
</div>
|
style={{ fontVariationSettings: "'wght' 500" }}
|
||||||
</div>
|
>
|
||||||
</div>
|
|
|
||||||
))}
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<button className="box-border flex gap-[10px] h-[46px] items-center justify-center py-[13px] shrink-0 hover:opacity-80 transition-opacity cursor-pointer">
|
||||||
</section>
|
<p
|
||||||
|
className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
|
||||||
{/* 푸터 */}
|
style={{ fontVariationSettings: "'wght' 500" }}
|
||||||
<footer className="bg-gray-900 text-white py-12">
|
>
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
아이디 찾기
|
||||||
<div className="grid md:grid-cols-4 gap-8">
|
</p>
|
||||||
<div>
|
</button>
|
||||||
<h4 className="text-xl font-bold mb-4">XR LMS</h4>
|
<div className="box-border flex gap-[10px] h-[46px] items-center justify-center px-0 py-[13px] shrink-0">
|
||||||
<p className="text-gray-400 text-sm">
|
<p
|
||||||
혁신적인 학습 경험을 제공하는 플랫폼
|
className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
|
||||||
</p>
|
style={{ fontVariationSettings: "'wght' 500" }}
|
||||||
</div>
|
>
|
||||||
<div>
|
|
|
||||||
<h5 className="font-semibold mb-4">학습</h5>
|
</p>
|
||||||
<ul className="space-y-2 text-sm text-gray-400">
|
</div>
|
||||||
<li><Link href="#" className="hover:text-white transition">강의 목록</Link></li>
|
<button className="box-border flex gap-[10px] h-[46px] items-center justify-center py-[13px] shrink-0 hover:opacity-80 transition-opacity cursor-pointer">
|
||||||
<li><Link href="#" className="hover:text-white transition">카테고리</Link></li>
|
<p
|
||||||
<li><Link href="#" className="hover:text-white transition">신규 강의</Link></li>
|
className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
|
||||||
</ul>
|
style={{ fontVariationSettings: "'wght' 500" }}
|
||||||
</div>
|
>
|
||||||
<div>
|
비밀번호 재설정
|
||||||
<h5 className="font-semibold mb-4">지원</h5>
|
</p>
|
||||||
<ul className="space-y-2 text-sm text-gray-400">
|
</button>
|
||||||
<li><Link href="#" className="hover:text-white transition">공지사항</Link></li>
|
</div>
|
||||||
<li><Link href="#" className="hover:text-white transition">FAQ</Link></li>
|
|
||||||
<li><Link href="#" className="hover:text-white transition">문의하기</Link></li>
|
{/* 카피라이트 */}
|
||||||
</ul>
|
<div className="mt-8 flex flex-col font-['Pretendard','Noto_Sans',sans-serif] justify-center text-[16px] text-[rgba(0,0,0,0.55)] text-center tracking-[-0.08px]">
|
||||||
</div>
|
<p className="leading-[1.45] whitespace-pre" style={{ fontVariationSettings: "'CTGR' 0, 'wdth' 100, 'wght' 500" }}>
|
||||||
<div>
|
Copyright ⓒ 2025 XL LMS. All rights reserved
|
||||||
<h5 className="font-semibold mb-4">회사</h5>
|
</p>
|
||||||
<ul className="space-y-2 text-sm text-gray-400">
|
</div>
|
||||||
<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 className="mt-8 pt-8 border-t border-gray-800 text-center text-sm text-gray-400">
|
|
||||||
© 2024 XR LMS. All rights reserved.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
17
package-lock.json
generated
17
package-lock.json
generated
@@ -14,13 +14,13 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/postcss": "^4",
|
"@tailwindcss/postcss": "^4",
|
||||||
"@types/node": "^20",
|
"@types/node": "20.19.24",
|
||||||
"@types/react": "^19",
|
"@types/react": "19.2.2",
|
||||||
"@types/react-dom": "^19",
|
"@types/react-dom": "^19",
|
||||||
"eslint": "^9",
|
"eslint": "^9",
|
||||||
"eslint-config-next": "16.0.1",
|
"eslint-config-next": "16.0.1",
|
||||||
"tailwindcss": "^4",
|
"tailwindcss": "^4",
|
||||||
"typescript": "^5"
|
"typescript": "5.9.3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@alloc/quick-lru": {
|
"node_modules/@alloc/quick-lru": {
|
||||||
@@ -67,7 +67,6 @@
|
|||||||
"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
|
"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/code-frame": "^7.27.1",
|
"@babel/code-frame": "^7.27.1",
|
||||||
"@babel/generator": "^7.28.5",
|
"@babel/generator": "^7.28.5",
|
||||||
@@ -1524,7 +1523,6 @@
|
|||||||
"integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
|
"integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"csstype": "^3.0.2"
|
"csstype": "^3.0.2"
|
||||||
}
|
}
|
||||||
@@ -1585,7 +1583,6 @@
|
|||||||
"integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
|
"integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@typescript-eslint/scope-manager": "8.46.2",
|
"@typescript-eslint/scope-manager": "8.46.2",
|
||||||
"@typescript-eslint/types": "8.46.2",
|
"@typescript-eslint/types": "8.46.2",
|
||||||
@@ -2116,7 +2113,6 @@
|
|||||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"bin": {
|
"bin": {
|
||||||
"acorn": "bin/acorn"
|
"acorn": "bin/acorn"
|
||||||
},
|
},
|
||||||
@@ -2458,7 +2454,6 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"baseline-browser-mapping": "^2.8.19",
|
"baseline-browser-mapping": "^2.8.19",
|
||||||
"caniuse-lite": "^1.0.30001751",
|
"caniuse-lite": "^1.0.30001751",
|
||||||
@@ -3026,7 +3021,6 @@
|
|||||||
"integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
|
"integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@eslint-community/eslint-utils": "^4.8.0",
|
"@eslint-community/eslint-utils": "^4.8.0",
|
||||||
"@eslint-community/regexpp": "^4.12.1",
|
"@eslint-community/regexpp": "^4.12.1",
|
||||||
@@ -5390,7 +5384,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
|
||||||
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
|
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
@@ -5400,7 +5393,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
|
||||||
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
|
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"scheduler": "^0.27.0"
|
"scheduler": "^0.27.0"
|
||||||
},
|
},
|
||||||
@@ -6087,7 +6079,6 @@
|
|||||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
},
|
},
|
||||||
@@ -6250,7 +6241,6 @@
|
|||||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"peer": true,
|
|
||||||
"bin": {
|
"bin": {
|
||||||
"tsc": "bin/tsc",
|
"tsc": "bin/tsc",
|
||||||
"tsserver": "bin/tsserver"
|
"tsserver": "bin/tsserver"
|
||||||
@@ -6526,7 +6516,6 @@
|
|||||||
"integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
|
"integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"funding": {
|
"funding": {
|
||||||
"url": "https://github.com/sponsors/colinhacks"
|
"url": "https://github.com/sponsors/colinhacks"
|
||||||
}
|
}
|
||||||
|
|||||||
16
package.json
16
package.json
@@ -9,18 +9,18 @@
|
|||||||
"lint": "eslint"
|
"lint": "eslint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"next": "16.0.1",
|
||||||
"react": "19.2.0",
|
"react": "19.2.0",
|
||||||
"react-dom": "19.2.0",
|
"react-dom": "19.2.0"
|
||||||
"next": "16.0.1"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"typescript": "^5",
|
|
||||||
"@types/node": "^20",
|
|
||||||
"@types/react": "^19",
|
|
||||||
"@types/react-dom": "^19",
|
|
||||||
"@tailwindcss/postcss": "^4",
|
"@tailwindcss/postcss": "^4",
|
||||||
"tailwindcss": "^4",
|
"@types/node": "20.19.24",
|
||||||
|
"@types/react": "19.2.2",
|
||||||
|
"@types/react-dom": "^19",
|
||||||
"eslint": "^9",
|
"eslint": "^9",
|
||||||
"eslint-config-next": "16.0.1"
|
"eslint-config-next": "16.0.1",
|
||||||
|
"tailwindcss": "^4",
|
||||||
|
"typescript": "5.9.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
3
public/chevron.svg
Normal file
3
public/chevron.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289Z" fill="#5F5F5F"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 487 B |
BIN
public/hero.png
Normal file
BIN
public/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 713 KiB |
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
@@ -1,7 +1,11 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "ES2017",
|
"target": "ES2017",
|
||||||
"lib": ["dom", "dom.iterable", "esnext"],
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"esnext"
|
||||||
|
],
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"strict": true,
|
"strict": true,
|
||||||
@@ -19,7 +23,9 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["./*"]
|
"@/*": [
|
||||||
|
"./*"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
@@ -30,5 +36,7 @@
|
|||||||
".next/dev/types/**/*.ts",
|
".next/dev/types/**/*.ts",
|
||||||
"**/*.mts"
|
"**/*.mts"
|
||||||
],
|
],
|
||||||
"exclude": ["node_modules"]
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user