CHORE(merge): merge from develop
- Initial setup and all features from develop branch - Includes: auth, deploy, docker, style fixes - K3S deployment configuration
This commit is contained in:
117
nextjs/components/landing/ServiceTimes.tsx
Normal file
117
nextjs/components/landing/ServiceTimes.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ServiceTimes() {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
|
||||
const programs = [
|
||||
{
|
||||
number: "01",
|
||||
fraction: "/ 06",
|
||||
title: "정신건강검진 프로그램",
|
||||
description: "편하게 방문하시면 전문의와 상담을 통해 필요한 검사 프로그램을 안내해드립니다.",
|
||||
icon: (
|
||||
<svg className="w-24 h-24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
),
|
||||
bgColor: "bg-linear-to-br from-[#7ba5d6] to-[#6b95c6]"
|
||||
},
|
||||
{
|
||||
number: "02",
|
||||
fraction: "/ 06",
|
||||
title: "성인/청소년 종합심리검사",
|
||||
description: "현재 겪고 있는 다양한 심리적 어려움과 그 원인을 다각하고 전문적인 도구를 사용하여 파악하고 이를 객관할 수 있는 검사입니다.",
|
||||
icon: (
|
||||
<svg className="w-24 h-24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
),
|
||||
bgColor: "bg-linear-to-br from-[#a8c5e0] to-[#98b5d0]"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="exam" className="py-16 smalltablet:py-20 pc:py-24 bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto px-4 smalltablet:px-6 pc:px-8">
|
||||
<div className="grid pc:grid-cols-2 gap-8 smalltablet:gap-12 pc:gap-16 items-center">
|
||||
{/* 왼쪽 텍스트 */}
|
||||
<div>
|
||||
<h2 className="text-3xl smalltablet:text-4xl pc:text-5xl font-black text-gray-800 mb-6 smalltablet:mb-8 tracking-tight">
|
||||
검사 프로그램.
|
||||
</h2>
|
||||
<p className="text-gray-600 text-base smalltablet:text-lg leading-relaxed mb-8 smalltablet:mb-12">
|
||||
마음우산에서는 체계화된 시스템으로 정서상태, 성격, 스트레스,<br className="hidden pc:block" />
|
||||
인지능력, 집중력, 뇌기능상태를 종합적으로 평가하여 제공하는<br className="hidden pc:block" />
|
||||
프로그램을 운영합니다.
|
||||
</p>
|
||||
<button className="bg-linear-to-r from-[#7ba5d6] to-[#6b95c6] hover:from-[#6b95c6] hover:to-[#5b85b6] text-white px-6 py-2.5 smalltablet:px-8 smalltablet:py-3 text-sm smalltablet:text-base flex items-center gap-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#6b95c6] active:scale-[0.98] rounded-lg">
|
||||
VIEW MORE
|
||||
<svg className="w-4 h-4 smalltablet:w-5 smalltablet:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 오른쪽 슬라이더 */}
|
||||
<div className="relative">
|
||||
<div className="flex gap-6 overflow-hidden">
|
||||
{programs.map((program, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`shrink-0 w-full ${program.bgColor} rounded-2xl smalltablet:rounded-3xl p-8 smalltablet:p-10 pc:p-12 relative transition-all ${
|
||||
currentSlide === index ? 'opacity-100' : 'opacity-0 absolute inset-0'
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="text-white opacity-70 mb-4 smalltablet:mb-6">
|
||||
<svg className="w-16 h-16 smalltablet:w-20 smalltablet:h-20 pc:w-24 pc:h-24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
{program.icon.props.children}
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-2xl smalltablet:text-3xl font-bold text-white mb-4 smalltablet:mb-6">
|
||||
{program.title}
|
||||
</h3>
|
||||
<p className="text-white/90 text-sm smalltablet:text-base leading-relaxed mb-6 smalltablet:mb-8 grow">
|
||||
{program.description}
|
||||
</p>
|
||||
<div className="flex items-end justify-between">
|
||||
<div className="text-white/40 text-6xl smalltablet:text-7xl pc:text-8xl font-bold">
|
||||
{program.number}
|
||||
</div>
|
||||
<div className="text-white text-base smalltablet:text-lg">
|
||||
{program.fraction}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 슬라이더 컨트롤 */}
|
||||
<div className="flex gap-3 smalltablet:gap-4 mt-6 smalltablet:mt-8">
|
||||
<button
|
||||
onClick={() => setCurrentSlide(Math.max(0, currentSlide - 1))}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#6b95c6] active:scale-[0.98] rounded"
|
||||
>
|
||||
<svg className="w-8 h-8 smalltablet:w-10 smalltablet:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentSlide(Math.min(programs.length - 1, currentSlide + 1))}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#6b95c6] active:scale-[0.98] rounded"
|
||||
>
|
||||
<svg className="w-8 h-8 smalltablet:w-10 smalltablet:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user