Spaces:

duck-ho
/

greenwave-example

Running

역할 당신은 숙련된 웹 프론트엔드 개발자이며, HTML, CSS, JavaScript만으로 현대적이고 반응형인 정적 회사 소개 웹페이지를 제작하는 임무를 수행합니다. 별도의 npm 패키지 설치나 React 같은 라이브러리는 사용하지 않습니다. 아래 제공된 회사 개요와 요구사항을 바탕으로, 깔끔하고 모던한 느낌의 웹페이지를 작성해주세요. ⸻ 회사 개요 • 회사명: GreenWave Tech • 산업 분야: 친환경 에너지 솔루션 • 회사 미션: 혁신적인 친환경 기술을 통해 지속 가능한 미래를 만든다. • 주요 제품: • SolarOne: 고효율 태양광 패널 시스템 • EcoCharge: 전기차 급속 충전기 • WindFlow: 소형 풍력 발전 터빈 • 회사 핵심 가치: • 지속 가능성 (Sustainability) • 혁신성 (Innovation) • 신뢰성 (Reliability) ⸻ 웹페이지 요구사항 웹페이지는 다음과 같은 4가지 섹션으로 구성되어야 합니다. 1. 메인(Hero) 섹션 • 회사명과 캐치프레이즈: “GreenWave Tech - 기술로 만드는 지속 가능한 미래” • 친환경 느낌의 배경 이미지 또는 색상 사용 • “자세히 알아보기” 버튼 클릭 시 회사 소개 섹션으로 부드럽게 스크롤 이동 2. 회사 소개 섹션 (About Us) • 회사 미션 및 핵심 가치 소개 • 3가지 핵심 가치(지속 가능성, 혁신성, 신뢰성)를 아이콘과 함께 나란히 표시 3. 제품 소개 섹션 (Our Products) • 주요 제품(SolarOne, EcoCharge, WindFlow)을 카드 형식으로 소개 • 각 카드에는 제품 이름, 이미지(placeholder), 제품 설명 포함 • 버튼 “더 알아보기” (단순 버튼으로, 별도 페이지 연결 없음) 4. 문의 섹션 (Contact Us) • 회사 주소, 전화번호, 이메일 표기 • 간단한 문의 폼 (이름, 이메일, 메시지, 제출 버튼) • "제출하기" 버튼 클릭 시 폼 동작 없이 경고창(alert)으로 “문의가 접수되었습니다.” 메시지 표시만 구현 ⸻ 스타일 및 기술 요구사항 • 사용 가능 기술: HTML5, CSS3, 순수 JavaScript • 컬러 팔레트: • 주요색: 친환경 초록색 계열 (#34D399, #059669 등) • 보조색: 화이트, 그레이, 밝은 하늘색 • 폰트: • Google Fonts에서 무료로 제공되는 깔끔한 sans-serif 계열 폰트(예: Inter, Poppins)를 CDN 링크로 연결 사용 • UI/UX: • 반응형 레이아웃 (데스크탑, 태블릿, 모바일 최적화) • 부드러운 스크롤 효과 구현 (순수 JavaScript로 처리) • 깨끗하고 간결한 디자인 유지 • Accessibility (접근성): 충분한 글자 크기와 명확한 컬러 대비 ⸻ 결과물 형태 아래와 같은 파일 구조로 작성하여 주세요. GreenWaveTech/ ├── index.html ├── styles.css └── script.js • 모든 HTML 코드는 index.html에 작성하고, 각 섹션은 태그로 구분 • 모든 CSS 스타일링은 styles.css 파일에 작성하고, 클래스 기반으로 스타일링 • 모든 JavaScript 기능(부드러운 스크롤, 버튼 클릭 이벤트)은 script.js에 작성 • 폰트 및 아이콘은 CDN 링크만 사용하고 추가 패키지는 설치하지 않음 ⸻ 코드 스타일 예시 아래는 Hero 섹션의 간단한 예시 코드입니다. HTML (index.html 일부 예시) <title>GreenWave Tech</title> GreenWave Tech 기술로 만드는 지속 가능한 미래 자세히 알아보기 <script src="script.js"></script> CSS (styles.css 일부 예시) body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; } .hero { background-color: #34D399; color: white; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } button { background-color: white; color: #059669; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } JavaScript (script.js 일부 예시) document.getElementById("learn-more-btn").addEventListener("click", function() { document.querySelector("#about").scrollIntoView({ behavior: "smooth" }); }); // 문의 폼 제출 버튼 이벤트 예시 document.querySelector("#contact-form").addEventListener("submit", function(e) { e.preventDefault(); alert("문의가 접수되었습니다."); }); 위 조건과 구조를 참고하여 HTML, CSS, 순수 JavaScript만으로 GreenWave Tech의 회사 소개 웹페이지를 작성해 주세요. - Initial Deployment

6a07a9e verified 9 months ago

raw

history blame contribute delete

24.6 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GreenWave Tech - 지속 가능한 미래를 위한 기술</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	:root {
	--primary-green: #059669;
	--light-green: #34D399;
	--sky-blue: #7DD3FC;
	--dark-gray: #374151;
	--light-gray: #F3F4F6;
	}

	body {
	font-family: 'Inter', sans-serif;
	color: var(--dark-gray);
	scroll-behavior: smooth;
	}

	h1, h2, h3, h4 {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	}

	.hero-bg {
	background: linear-gradient(120deg, rgba(5, 150, 105, 0.9) 0%, rgba(52, 211, 153, 0.8) 100%),
	url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23059669"/><path d="M0 50 L100 50" stroke="%2334D399" stroke-width="1" stroke-opacity="0.2"/><path d="M50 0 L50 100" stroke="%2334D399" stroke-width="1" stroke-opacity="0.2"/></svg>');
	background-size: cover;
	background-position: center;
	}

	.value-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.value-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}

	.product-card {
	transition: all 0.3s ease;
	border-bottom: 4px solid transparent;
	}

	.product-card:hover {
	transform: translateY(-5px);
	border-bottom-color: var(--light-green);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	}

	.contact-form input,
	.contact-form textarea {
	transition: all 0.3s ease;
	border: 2px solid #E5E7EB;
	}

	.contact-form input:focus,
	.contact-form textarea:focus {
	border-color: var(--light-green);
	box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.3);
	}

	.btn-primary {
	background-color: var(--primary-green);
	transition: all 0.3s ease;
	}

	.btn-primary:hover {
	background-color: #047857;
	transform: translateY(-2px);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	}

	.btn-outline {
	border: 2px solid var(--primary-green);
	transition: all 0.3s ease;
	}

	.btn-outline:hover {
	background-color: var(--primary-green);
	color: white;
	}

	.leaf-pattern {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M10,1 C5.5,1 2,4.5 2,9 C2,13.5 5.5,17 10,17 C14.5,17 18,13.5 18,9 C18,4.5 14.5,1 10,1 Z M10,15 C6.7,15 4,12.3 4,9 C4,5.7 6.7,3 10,3 C13.3,3 16,5.7 16,9 C16,12.3 13.3,15 10,15 Z" fill="%2334D399" opacity="0.1"/></svg>');
	}
	</style>
	</head>
	<body class="bg-gray-50">
	<!-- 헤더/네비게이션 -->
	<header class="sticky top-0 z-50 bg-white shadow-md">
	<div class="container mx-auto px-4 py-4 flex justify-between items-center">
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center mr-3">
	<i class="fas fa-leaf text-white text-xl"></i>
	</div>
	<h1 class="text-2xl font-bold text-green-700">GreenWave<span class="font-normal"> Tech</span></h1>
	</div>

	<nav class="hidden md:block">
	<ul class="flex space-x-8">
	<li><a href="#hero" class="text-gray-600 hover:text-green-600 font-medium">홈</a></li>
	<li><a href="#about" class="text-gray-600 hover:text-green-600 font-medium">회사소개</a></li>
	<li><a href="#products" class="text-gray-600 hover:text-green-600 font-medium">제품소개</a></li>
	<li><a href="#contact" class="text-gray-600 hover:text-green-600 font-medium">문의하기</a></li>
	</ul>
	</nav>

	<button class="md:hidden text-gray-600">
	<i class="fas fa-bars text-2xl"></i>
	</button>
	</div>
	</header>

	<!-- Hero 섹션 -->
	<section id="hero" class="hero-bg min-h-screen flex items-center">
	<div class="container mx-auto px-4 py-20 text-center">
	<div class="max-w-3xl mx-auto">
	<div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-full py-2 px-6 inline-block mb-6">
	<p class="text-white text-sm font-medium">혁신적인 친환경 기술 솔루션</p>
	</div>
	<h1 class="text-4xl md:text-6xl font-bold text-white mb-6">기술로 만드는 지속 가능한 미래</h1>
	<p class="text-xl text-white text-opacity-90 mb-10 max-w-2xl mx-auto">GreenWave Tech는 혁신적인 친환경 기술을 통해 지속 가능한 미래를 만들어갑니다. 우리의 솔루션은 지구를 보호하고 미래 세대를 위한 깨끗한 환경을 만듭니다.</p>
	<button id="learn-more-btn" class="btn-primary text-white font-bold py-3 px-8 rounded-full text-lg shadow-lg">
	자세히 알아보기
	</button>
	</div>
	</div>

	<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
	<i class="fas fa-chevron-down text-white text-2xl"></i>
	</div>
	</section>

	<!-- 회사 소개 섹션 -->
	<section id="about" class="py-20 bg-white leaf-pattern">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">GreenWave Tech 소개</h2>
	<div class="w-20 h-1 bg-green-500 mx-auto mb-6"></div>
	<p class="text-xl text-gray-600 max-w-3xl mx-auto">우리는 지속 가능한 미래를 위한 혁신적인 솔루션을 개발하는 선도적인 친환경 에너지 기업입니다.</p>
	</div>

	<div class="max-w-4xl mx-auto mb-16">
	<div class="bg-green-50 rounded-2xl p-8 shadow-sm">
	<h3 class="text-2xl font-bold text-green-700 mb-4">회사 미션</h3>
	<p class="text-lg text-gray-700 leading-relaxed">"GreenWave Tech는 혁신적인 친환경 기술을 통해 지속 가능한 미래를 만듭니다. 우리의 목표는 깨끗한 에너지 솔루션을 통해 지구 환경을 보호하고, 모든 사람이 지속 가능한 삶을 살 수 있도록 하는 것입니다."</p>
	</div>
	</div>

	<h3 class="text-2xl font-bold text-center text-gray-800 mb-12">핵심 가치</h3>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<!-- 지속 가능성 -->
	<div class="value-card bg-white rounded-xl p-8 shadow-md border border-gray-100">
	<div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-6">
	<i class="fas fa-recycle text-green-600 text-2xl"></i>
	</div>
	<h4 class="text-xl font-bold text-gray-800 mb-3">지속 가능성</h4>
	<p class="text-gray-600">모든 제품과 솔루션은 장기적인 환경 보호와 자원 보존을 고려하여 설계됩니다. 우리는 미래 세대를 위한 지속 가능한 환경을 만드는 데 기여합니다.</p>
	</div>

	<!-- 혁신성 -->
	<div class="value-card bg-white rounded-xl p-8 shadow-md border border-gray-100">
	<div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-6">
	<i class="fas fa-lightbulb text-blue-600 text-2xl"></i>
	</div>
	<h4 class="text-xl font-bold text-gray-800 mb-3">혁신성</h4>
	<p class="text-gray-600">끊임없는 연구 개발을 통해 혁신적인 기술을 창출합니다. 우리는 기존의 한계를 뛰어넘는 새로운 솔루션을 개발하여 에너지 분야의 미래를 선도합니다.</p>
	</div>

	<!-- 신뢰성 -->
	<div class="value-card bg-white rounded-xl p-8 shadow-md border border-gray-100">
	<div class="w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center mb-6">
	<i class="fas fa-shield-alt text-amber-600 text-2xl"></i>
	</div>
	<h4 class="text-xl font-bold text-gray-800 mb-3">신뢰성</h4>
	<p class="text-gray-600">최고 품질의 제품과 서비스를 제공하여 고객의 신뢰를 얻습니다. 우리의 솔루션은 안정적이고 오래 지속되는 성능을 보장합니다.</p>
	</div>
	</div>
	</div>
	</section>

	<!-- 제품 소개 섹션 -->
	<section id="products" class="py-20 bg-gray-50">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">우리의 제품</h2>
	<div class="w-20 h-1 bg-green-500 mx-auto mb-6"></div>
	<p class="text-xl text-gray-600 max-w-3xl mx-auto">GreenWave Tech의 혁신적인 제품들은 지속 가능한 에너지 솔루션을 제공합니다</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<!-- SolarOne -->
	<div class="product-card bg-white rounded-xl overflow-hidden shadow-md">
	<div class="h-48 bg-gradient-to-r from-green-400 to-emerald-500 flex items-center justify-center">
	<i class="fas fa-solar-panel text-white text-6xl"></i>
	</div>
	<div class="p-8">
	<h3 class="text-2xl font-bold text-gray-800 mb-3">SolarOne</h3>
	<p class="text-gray-600 mb-6">고효율 태양광 패널 시스템으로, 기존 제품 대비 25% 높은 에너지 변환 효율을 자랑합니다. 가정과 기업 모두에 적합한 다양한 크기의 솔루션을 제공합니다.</p>
	<button class="btn-outline text-green-600 font-medium py-2 px-6 rounded-full">
	더 알아보기
	</button>
	</div>
	</div>

	<!-- EcoCharge -->
	<div class="product-card bg-white rounded-xl overflow-hidden shadow-md">
	<div class="h-48 bg-gradient-to-r from-blue-400 to-cyan-500 flex items-center justify-center">
	<i class="fas fa-charging-station text-white text-6xl"></i>
	</div>
	<div class="p-8">
	<h3 class="text-2xl font-bold text-gray-800 mb-3">EcoCharge</h3>
	<p class="text-gray-600 mb-6">초고속 전기차 충전기로, 30분 만에 80% 충전이 가능합니다. 사용자 친화적인 인터페이스와 원격 모니터링 시스템으로 편리한 사용이 가능합니다.</p>
	<button class="btn-outline text-green-600 font-medium py-2 px-6 rounded-full">
	더 알아보기
	</button>
	</div>
	</div>

	<!-- WindFlow -->
	<div class="product-card bg-white rounded-xl overflow-hidden shadow-md">
	<div class="h-48 bg-gradient-to-r from-indigo-400 to-purple-500 flex items-center justify-center">
	<i class="fas fa-wind text-white text-6xl"></i>
	</div>
	<div class="p-8">
	<h3 class="text-2xl font-bold text-gray-800 mb-3">WindFlow</h3>
	<p class="text-gray-600 mb-6">소형 풍력 발전 터빈으로, 저풍속 환경에서도 높은 효율을 보입니다. 도시 환경과 소규모 시설에 적합한 디자인으로 다양한 장소에 설치 가능합니다.</p>
	<button class="btn-outline text-green-600 font-medium py-2 px-6 rounded-full">
	더 알아보기
	</button>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- 문의 섹션 -->
	<section id="contact" class="py-20 bg-gradient-to-br from-green-50 to-cyan-50">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">문의하기</h2>
	<div class="w-20 h-1 bg-green-500 mx-auto mb-6"></div>
	<p class="text-xl text-gray-600 max-w-3xl mx-auto">GreenWave Tech에 대해 궁금한 점이 있으신가요? 언제든지 문의해 주세요.</p>
	</div>

	<div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12">
	<div>
	<h3 class="text-2xl font-bold text-gray-800 mb-6">연락처 정보</h3>

	<div class="space-y-6">
	<div class="flex items-start">
	<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
	<i class="fas fa-map-marker-alt text-green-600"></i>
	</div>
	<div>
	<h4 class="font-bold text-lg text-gray-800">주소</h4>
	<p class="text-gray-600">서울특별시 강남구 테헤란로 123, GreenWave 빌딩 15층</p>
	</div>
	</div>

	<div class="flex items-start">
	<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
	<i class="fas fa-phone-alt text-blue-600"></i>
	</div>
	<div>
	<h4 class="font-bold text-lg text-gray-800">전화번호</h4>
	<p class="text-gray-600">02-1234-5678</p>
	</div>
	</div>

	<div class="flex items-start">
	<div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center mr-4">
	<i class="fas fa-envelope text-amber-600"></i>
	</div>
	<div>
	<h4 class="font-bold text-lg text-gray-800">이메일</h4>
	<p class="text-gray-600">contact@greenwavetech.co.kr</p>
	</div>
	</div>

	<div class="flex items-start">
	<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
	<i class="fas fa-clock text-purple-600"></i>
	</div>
	<div>
	<h4 class="font-bold text-lg text-gray-800">영업 시간</h4>
	<p class="text-gray-600">월-금: 9:00 AM - 6:00 PM</p>
	</div>
	</div>
	</div>

	<div class="mt-10">
	<h3 class="text-2xl font-bold text-gray-800 mb-6">소셜 미디어</h3>
	<div class="flex space-x-4">
	<a href="#" class="w-12 h-12 rounded-full bg-green-600 flex items-center justify-center text-white hover:bg-green-700 transition">
	<i class="fab fa-facebook-f"></i>
	</a>
	<a href="#" class="w-12 h-12 rounded-full bg-green-600 flex items-center justify-center text-white hover:bg-green-700 transition">
	<i class="fab fa-instagram"></i>
	</a>
	<a href="#" class="w-12 h-12 rounded-full bg-green-600 flex items-center justify-center text-white hover:bg-green-700 transition">
	<i class="fab fa-linkedin-in"></i>
	</a>
	<a href="#" class="w-12 h-12 rounded-full bg-green-600 flex items-center justify-center text-white hover:bg-green-700 transition">
	<i class="fab fa-youtube"></i>
	</a>
	</div>
	</div>
	</div>

	<div>
	<h3 class="text-2xl font-bold text-gray-800 mb-6">문의하기</h3>
	<form id="contact-form" class="contact-form">
	<div class="mb-6">
	<label for="name" class="block text-gray-700 font-medium mb-2">이름</label>
	<input type="text" id="name" class="w-full px-4 py-3 rounded-lg bg-white focus:outline-none" required>
	</div>

	<div class="mb-6">
	<label for="email" class="block text-gray-700 font-medium mb-2">이메일</label>
	<input type="email" id="email" class="w-full px-4 py-3 rounded-lg bg-white focus:outline-none" required>
	</div>

	<div class="mb-6">
	<label for="message" class="block text-gray-700 font-medium mb-2">메시지</label>
	<textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg bg-white focus:outline-none" required></textarea>
	</div>

	<button type="submit" class="btn-primary w-full text-white font-bold py-4 rounded-lg text-lg">
	문의 보내기
	</button>
	</form>
	</div>
	</div>
	</div>
	</section>

	<!-- 푸터 -->
	<footer class="bg-gray-800 text-white py-12">
	<div class="container mx-auto px-4">
	<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
	<div>
	<div class="flex items-center mb-6">
	<div class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center mr-3">
	<i class="fas fa-leaf text-white text-xl"></i>
	</div>
	<h2 class="text-2xl font-bold">GreenWave<span class="font-normal"> Tech</span></h2>
	</div>
	<p class="text-gray-400 mb-4">혁신적인 친환경 기술을 통해 지속 가능한 미래를 만듭니다.</p>
	<p class="text-gray-400">© 2023 GreenWave Tech. All rights reserved.</p>
	</div>

	<div>
	<h3 class="text-lg font-bold mb-6">제품</h3>
	<ul class="space-y-3">
	<li><a href="#" class="text-gray-400 hover:text-green-400">SolarOne</a></li>
	<li><a href="#" class="text-gray-400 hover:text-green-400">EcoCharge</a></li>
	<li><a href="#" class="text-gray-400 hover:text-green-400">WindFlow</a></li>
	<li><a href="#" class="text-gray-400 hover:text-green-400">기업 솔루션</a></li>
	<li><a href="#" class="text-gray-400 hover:text-green-400">가정용 솔루션</a></li>
	</ul>
	</div>

	<div>
	<h3 class="text-lg font-bold mb-6">회사</h3>
	<ul class="space-y-3">
	<li><a href="#" class="text-gray-400 hover:text-green-400">회사 소개</a></li>
	<li><a href="#" class="text-gray-400 hover:text-green-400">미션과 비전</a></li>
	<li><a href="#" class="text-gray-400 hover:text-green-400">채용 정보</a></li>
	<li><a href="#" class="text-gray-400 hover:text-green-400">뉴스룸</a></li>
	<li><a href="#" class="text-gray-400 hover:text-green-400">지속 가능성 보고서</a></li>
	</ul>
	</div>

	<div>
	<h3 class="text-lg font-bold mb-6">고객 지원</h3>
	<ul class="space-y-3">
	<li><a href="#" class="text-gray-400 hover:text-green-400">문의하기</a></li>
	<li><a href="#" class="text-gray-400 hover:text-green-400">FAQ</a></li>
	<li><a href="#" class="text-gray-400 hover:text-green-400">설치 가이드</a></li>
	<li><a href="#" class="text-gray-400 hover:text-green-400">다운로드</a></li>
	<li><a href="#" class="text-gray-400 hover:text-green-400">서비스 센터</a></li>
	</ul>
	</div>
	</div>
	</div>
	</footer>

	<script>
	// 부드러운 스크롤 기능
	document.getElementById('learn-more-btn').addEventListener('click', function() {
	document.querySelector('#about').scrollIntoView({
	behavior: 'smooth'
	});
	});

	// 네비게이션 링크 스크롤
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function(e) {
	e.preventDefault();
	document.querySelector(this.getAttribute('href')).scrollIntoView({
	behavior: 'smooth'
	});
	});
	});

	// 문의 폼 처리
	document.getElementById('contact-form').addEventListener('submit', function(e) {
	e.preventDefault();
	alert('문의가 접수되었습니다.');
	this.reset();
	});

	// 제품 더 알아보기 버튼 애니메이션
	document.querySelectorAll('.btn-outline').forEach(button => {
	button.addEventListener('click', function() {
	this.classList.add('bg-green-600', 'text-white');
	setTimeout(() => {
	this.classList.remove('bg-green-600', 'text-white');
	}, 300);
	});
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=duck-ho/greenwave-example" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>