Spaces:

krevas
/

aimember

Running

App Files Files Community

aimember / index.html

krevas

Add 2 files

177620d verified 5 months ago

raw

history blame contribute delete

55.8 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>아이멤버(Aimember) - 롯데이노베이트의 기업용 AI 플랫폼</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

	body {
	font-family: 'Noto Sans KR', sans-serif;
	scroll-behavior: smooth;
	}

	.gradient-bg {
	background: linear-gradient(135deg, rgba(218, 41, 28, 0.9) 0%, rgba(183, 28, 28, 0.9) 100%), url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
	}

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

	.ai-voice-demo {
	background: linear-gradient(135deg, rgba(254, 242, 242, 0.9) 0%, rgba(254, 226, 226, 0.9) 100%), url('https://images.unsplash.com/photo-1607705703571-c5a8695f18f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
	}

	.security-badge {
	animation: pulse 2s infinite;
	}

	@keyframes pulse {
	0% {
	transform: scale(1);
	opacity: 1;
	}
	50% {
	transform: scale(1.05);
	opacity: 0.8;
	}
	100% {
	transform: scale(1);
	opacity: 1;
	}
	}

	.floating {
	animation: floating 6s ease-in-out infinite;
	}

	@keyframes floating {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-15px); }
	100% { transform: translateY(0px); }
	}

	/* Custom color classes */
	.text-primary {
	color: rgb(218, 41, 28);
	}

	.bg-primary {
	background-color: rgb(218, 41, 28);
	}

	.hover\:bg-primary:hover {
	background-color: rgb(183, 28, 28);
	}

	.border-primary {
	border-color: rgb(218, 41, 28);
	}

	.bg-primary-light {
	background-color: rgba(218, 41, 28, 0.1);
	}

	.security-image {
	background: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
	min-height: 400px;
	border-radius: 12px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}

	.industries-bg {
	background: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
	}

	.testimonials-bg {
	background: linear-gradient(135deg, rgba(249, 250, 251, 0.9) 0%, rgba(243, 244, 246, 0.9) 100%), url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
	}
	</style>
	</head>
	<body class="bg-white">
	<!-- Navigation -->
	<nav class="bg-white shadow-lg sticky top-0 z-50">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex justify-between h-16">
	<div class="flex items-center">
	<div class="flex-shrink-0 flex items-center">
	<img class="h-8 w-auto" src="https://lotteinnovate.com/favicon.ico" alt="Aimember Logo">
	<span class="ml-2 text-xl font-bold text-primary">Aimember</span>
	</div>
	</div>
	<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
	<a href="#features" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">주요 기능</a>
	<a href="#technology" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">AI 기술</a>
	<a href="#security" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">보안</a>
	<a href="#industries" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">활용 분야</a>
	<a href="#contact" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">문의하기</a>
	</div>
	<div class="-mr-2 flex items-center md:hidden">
	<button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
	<span class="sr-only">메뉴 열기</span>
	<i class="fas fa-bars"></i>
	</button>
	</div>
	</div>
	</div>

	<!-- Mobile menu -->
	<div id="mobile-menu" class="hidden md:hidden bg-white border-t">
	<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
	<a href="#features" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">주요 기능</a>
	<a href="#technology" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">AI 기술</a>
	<a href="#security" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">보안</a>
	<a href="#industries" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">활용 분야</a>
	<a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">문의하기</a>
	</div>
	</div>
	</nav>

	<!-- Hero Section -->
	<div class="gradient-bg text-white">
	<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
	<div class="flex flex-col md:flex-row items-center">
	<div class="md:w-1/2 mb-10 md:mb-0">
	<h1 class="text-4xl md:text-5xl font-extrabold tracking-tight mb-6">
	기업을 위한 <span class="text-red-200">차세대 AI 플랫폼</span>
	</h1>
	<p class="text-xl mb-8">
	롯데이노베이트의 아이멤버는 기업의 업무 효율성과 보안을 혁신적으로 개선하는 생성형 AI 서비스입니다.
	</p>
	<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
	<a href="#contact" class="bg-white text-primary hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-semibold text-center">
	무료 상담 신청
	</a>
	<a href="#features" class="bg-red-700 hover:bg-red-800 px-6 py-3 rounded-md text-lg font-semibold text-center">
	기능 살펴보기
	</a>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Stats Section -->
	<div class="bg-white py-12">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
	<div>
	<div class="text-4xl font-bold text-primary">50+</div>
	<div class="text-gray-600 mt-2">롯데 계열사</div>
	</div>
	<div>
	<div class="text-4xl font-bold text-primary">2X</div>
	<div class="text-gray-600 mt-2">빠른 회의록 생성</div>
	</div>
	<div>
	<div class="text-4xl font-bold text-primary">100%</div>
	<div class="text-gray-600 mt-2">내부망 보안</div>
	</div>
	<div>
	<div class="text-4xl font-bold text-primary">5+</div>
	<div class="text-gray-600 mt-2">지원 언어</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Features Section -->
	<div id="features" class="py-16 bg-gray-50">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center mb-16">
	<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
	업무 혁신을 위한 아이멤버의 주요 기능
	</h2>
	<p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
	아이멤버는 다양한 업무 시나리오에 최적화된 기능으로 기업의 생산성을 극대화합니다.
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
	<!-- Feature 1 -->
	<div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
	<div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-6">
	<i class="fas fa-file-alt text-primary text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-3">AI 보고서 생성</h3>
	<p class="text-gray-600">
	주제 입력만으로 자동 정보 탐색, 문서 초안 작성, 목차 및 표지 이미지 생성까지 지원하여 문서 작성 시간을 획기적으로 단축합니다.
	</p>
	</div>

	<!-- Feature 2 -->
	<div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
	<div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-6">
	<i class="fas fa-users text-primary text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-3">회의록 자동 생성</h3>
	<p class="text-gray-600">
	회의 내용 요약과 후속 과제 제시, 화자 인식 기능으로 다수 참석자 구분이 가능하며 처리 속도가 기존 대비 2배 빨라졌습니다.
	</p>
	</div>

	<!-- Feature 3 -->
	<div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
	<div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-6">
	<i class="fas fa-robot text-primary text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-3">나만의 음성 AI</h3>
	<p class="text-gray-600">
	사용자 목소리 학습을 통해 맞춤형 음성 생성이 가능하며, 한국어, 영어, 일본어 등 다국어 음성 합성을 지원합니다.
	</p>
	</div>

	<!-- Feature 4 -->
	<div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
	<div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-6">
	<i class="fas fa-search text-primary text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-3">DART 정보 검색</h3>
	<p class="text-gray-600">
	DART 전자공시시스템 정보를 자동으로 검색하여 금융 분석과 기업 정보 조회를 간편하게 처리합니다.
	</p>
	</div>

	<!-- Feature 5 -->
	<div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
	<div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-6">
	<i class="fas fa-file-powerpoint text-primary text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-3">PPT 메이커</h3>
	<p class="text-gray-600">
	보고서 내용을 기반으로 전문적인 프레젠테이션을 자동 생성하여 업무 효율을 극대화합니다.
	</p>
	</div>

	<!-- Feature 6 -->
	<div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
	<div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-6">
	<i class="fas fa-code text-primary text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-3">코드 생성</h3>
	<p class="text-gray-600">
	개발 업무를 지원하는 코드 생성 기능으로 소프트웨어 개발 생산성을 높입니다.
	</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Technology Section -->
	<div id="technology" class="py-16 bg-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="lg:grid lg:grid-cols-12 lg:gap-8">
	<div class="lg:col-span-5">
	<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
	아이멤버의 혁신적인 AI 기술
	</h2>
	<p class="mt-3 text-lg text-gray-600">
	롯데이노베이트가 자체 개발한 최첨단 AI 기술로 기업의 업무 방식을 혁신합니다.
	</p>

	<div class="mt-8 space-y-6">
	<div class="flex">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
	<i class="fas fa-brain"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium text-gray-900">'두뇌풀가동' 추론 기능</h3>
	<p class="mt-2 text-gray-600">
	단계별 문제 해결 과정을 독백 형식으로 제시하여 더 정확하고 신뢰성 있는 답변을 제공합니다. 환각(hallucination) 현상을 줄이고 논리적 문제 해결에 탁월합니다.
	</p>
	</div>
	</div>

	<div class="flex">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
	<i class="fas fa-eye"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium text-gray-900">멀티모달 지원</h3>
	<p class="mt-2 text-gray-600">
	웹 검색, 파일 및 URL 기반 답변, DART 검색, OCR, 음성 인식, 이미지 생성 등 다양한 데이터 입력을 처리할 수 있는 다중 모달리티 기술을 적용했습니다.
	</p>
	</div>
	</div>

	<div class="flex">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
	<i class="fas fa-microphone"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium text-gray-900">고급 음성 처리</h3>
	<p class="mt-2 text-gray-600">
	화자 인식과 다국어 음성 합성 기술로 자연스러운 음성 인터페이스를 구현하여 업무 효율을 높입니다.
	</p>
	</div>
	</div>
	</div>
	</div>

	<div class="mt-12 lg:mt-0 lg:col-span-7">
	<div class="bg-gray-100 rounded-xl p-6">
	<div class="bg-white rounded-lg shadow-md p-4 mb-4">
	<div class="flex items-center mb-3">
	<div class="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-white font-bold">U</div>
	<span class="ml-2 font-medium">사용자</span>
	</div>
	<p class="text-gray-800">올해 2분기 우리 회사 매출 현황과 경쟁사 비교 분석 보고서를 작성해줘</p>
	</div>

	<div class="bg-primary-light rounded-lg shadow-md p-4">
	<div class="flex items-center mb-3">
	<div class="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-white">
	<i class="fas fa-robot"></i>
	</div>
	<span class="ml-2 font-medium">아이멤버</span>
	</div>
	<div class="text-gray-800">
	<p class="mb-2">[두뇌풀가동 모드 활성화] 보고서 작성을 시작하겠습니다. 단계별로 생각 과정을 공유드립니다:</p>
	<ol class="list-decimal pl-5 space-y-2">
	<li>DART 시스템에서 우리 회사 2분기 공시 자료 검색 중...</li>
	<li>경쟁사 3곳(삼성, LG, SK)의 최근 실적 자료 수집 완료</li>
	<li>시장 점유율 비교를 위한 통계 데이터 분석 진행</li>
	<li>보고서 초안 작성 시작 (목차: 개요, 매출 분석, 경쟁사 비교, 시사점)</li>
	<li>시각화 자료(차트) 3개 생성 완료</li>
	</ol>
	<p class="mt-3 font-medium">보고서 초안이 완성되었습니다. 추가로 필요한 내용이 있으신가요?</p>
	</div>
	</div>

	<div class="mt-6 flex justify-center">
	<button class="flex items-center text-primary">
	<i class="fas fa-volume-up mr-2"></i>
	음성으로 듣기
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- AI Voice Demo -->
	<div class="ai-voice-demo py-16">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
	나만의 음성 AI 체험하기
	</h2>
	<p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
	5분만에 여러분의 목소리로 AI를 학습시켜 보세요.
	</p>
	</div>

	<div class="bg-white rounded-xl shadow-lg overflow-hidden">
	<div class="md:flex">
	<div class="md:w-1/2 p-8">
	<h3 class="text-2xl font-bold text-gray-900 mb-4">음성 학습 프로세스</h3>
	<ol class="list-decimal pl-5 space-y-3 text-gray-700">
	<li>5분 분량의 음성 녹음 (일반 대화 또는 문서 읽기)</li>
	<li>AI 모델이 음성 특징 분석 (약 30분 소요)</li>
	<li>학습 완료 후 즉시 사용 가능</li>
	<li>언제든지 추가 학습으로 품질 향상 가능</li>
	</ol>

	<div class="mt-8">
	<button id="recordButton" class="bg-primary hover:bg-red-800 text-white px-6 py-3 rounded-full font-medium flex items-center">
	<i class="fas fa-microphone mr-2"></i>
	음성 녹음 시작
	</button>
	<div id="recordingStatus" class="mt-2 text-sm text-gray-500 hidden">
	<i class="fas fa-circle text-primary animate-pulse mr-1"></i>
	녹음 중... 00:05 / 05:00
	</div>
	</div>
	</div>

	<div class="md:w-1/2 bg-gray-50 p-8 flex flex-col items-center justify-center">
	<div class="w-full max-w-md">
	<div class="bg-white p-6 rounded-lg shadow-md mb-6">
	<div class="flex items-center mb-4">
	<div class="h-10 w-10 rounded-full bg-primary flex items-center justify-center text-white">
	<i class="fas fa-robot"></i>
	</div>
	<div class="ml-3">
	<div class="font-medium">AI 음성 결과</div>
	<div class="text-xs text-gray-500">사용자 음성 기반</div>
	</div>
	</div>
	<div id="voiceOutput" class="text-gray-700">
	녹음된 음성을 분석하여 이곳에 결과가 표시됩니다. 녹음 버튼을 눌러 5분 분량의 음성을 녹음해주세요.
	</div>
	</div>

	<div class="flex justify-center space-x-4">
	<button class="bg-primary hover:bg-red-800 text-white px-4 py-2 rounded-full">
	<i class="fas fa-play mr-1"></i> 재생
	</button>
	<button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-full">
	<i class="fas fa-download mr-1"></i> 저장
	</button>
	<button class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-full">
	<i class="fas fa-share-alt mr-1"></i> 공유
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Security Section -->
	<div id="security" class="py-16 bg-gray-900 text-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="lg:grid lg:grid-cols-12 lg:gap-8">
	<div class="lg:col-span-7">
	<div class="security-image relative">
	<div class="security-badge absolute -top-5 -left-5 bg-primary text-white px-4 py-2 rounded-full font-bold shadow-lg">
	<i class="fas fa-shield-alt mr-1"></i> 보안 인증
	</div>
	</div>
	</div>

	<div class="mt-12 lg:mt-0 lg:col-span-5">
	<h2 class="text-3xl font-extrabold sm:text-4xl">
	기업 데이터를 위한 철통 보안
	</h2>
	<p class="mt-3 text-lg text-gray-300">
	아이멤버는 기업의 민감한 데이터를 안전하게 보호하기 위해 다양한 보안 기술을 적용했습니다.
	</p>

	<div class="mt-8 space-y-6">
	<div class="flex">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-gray-800 text-red-400">
	<i class="fas fa-lock"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium">프라이빗 AI 서비스</h3>
	<p class="mt-2 text-gray-300">
	기업 내부망에 AI를 구축하고 자체 보안 알고리즘을 적용해 민감한 데이터의 외부 유출을 원천 차단합니다.
	</p>
	</div>
	</div>

	<div class="flex">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-gray-800 text-red-400">
	<i class="fas fa-eraser"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium">자동 데이터 삭제</h3>
	<p class="mt-2 text-gray-300">
	음성 데이터를 자동 삭제하는 알고리즘으로 정보 유출 위험을 최소화합니다.
	</p>
	</div>
	</div>

	<div class="flex">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-gray-800 text-red-400">
	<i class="fas fa-user-shield"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium">접근 제어 시스템</h3>
	<p class="mt-2 text-gray-300">
	역할 기반 접근 제어(RBAC)로 사용자별 권한을 세분화하여 관리합니다.
	</p>
	</div>
	</div>

	<div class="flex">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-gray-800 text-red-400">
	<i class="fas fa-fingerprint"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium">엔드투엔드 암호화</h3>
	<p class="mt-2 text-gray-300">
	모든 데이터 전송 과정에서 강력한 암호화 기술을 적용하여 보안을 강화합니다.
	</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Industries Section -->
	<div id="industries" class="py-16 bg-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center mb-16">
	<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
	아이멤버의 활용 분야
	</h2>
	<p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
	다양한 산업 분야에서 아이멤버가 비즈니스 혁신을 주도하고 있습니다.
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
	<!-- Industry 1 -->
	<div class="bg-primary-light rounded-xl overflow-hidden shadow-md">
	<div class="h-40 bg-primary flex items-center justify-center">
	<i class="fas fa-store text-white text-5xl"></i>
	</div>
	<div class="p-6">
	<h3 class="text-xl font-bold text-gray-900 mb-3">유통/소매</h3>
	<ul class="text-gray-600 space-y-2">
	<li class="flex items-start">
	<i class="fas fa-check text-primary mt-1 mr-2"></i>
	<span>고객 문의 자동 응대</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-primary mt-1 mr-2"></i>
	<span>판매 데이터 분석</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-primary mt-1 mr-2"></i>
	<span>재고 관리 최적화</span>
	</li>
	</ul>
	</div>
	</div>

	<!-- Industry 2 -->
	<div class="bg-green-50 rounded-xl overflow-hidden shadow-md">
	<div class="h-40 bg-green-600 flex items-center justify-center">
	<i class="fas fa-university text-white text-5xl"></i>
	</div>
	<div class="p-6">
	<h3 class="text-xl font-bold text-gray-900 mb-3">금융/보험</h3>
	<ul class="text-gray-600 space-y-2">
	<li class="flex items-start">
	<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
	<span>금융 상품 분석</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
	<span>리스크 관리</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
	<span>규정 준수 검토</span>
	</li>
	</ul>
	</div>
	</div>

	<!-- Industry 3 -->
	<div class="bg-yellow-50 rounded-xl overflow-hidden shadow-md">
	<div class="h-40 bg-yellow-500 flex items-center justify-center">
	<i class="fas fa-utensils text-white text-5xl"></i>
	</div>
	<div class="p-6">
	<h3 class="text-xl font-bold text-gray-900 mb-3">식품/호텔</h3>
	<ul class="text-gray-600 space-y-2">
	<li class="flex items-start">
	<i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
	<span>메뉴 개발 지원</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
	<span>고객 피드백 분석</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
	<span>이벤트 기획 지원</span>
	</li>
	</ul>
	</div>
	</div>

	<!-- Industry 4 -->
	<div class="bg-purple-50 rounded-xl overflow-hidden shadow-md">
	<div class="h-40 bg-purple-600 flex items-center justify-center">
	<i class="fas fa-industry text-white text-5xl"></i>
	</div>
	<div class="p-6">
	<h3 class="text-xl font-bold text-gray-900 mb-3">제조/화학</h3>
	<ul class="text-gray-600 space-y-2">
	<li class="flex items-start">
	<i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
	<span>공정 최적화 분석</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
	<span>품질 관리 보고서</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
	<span>안전 규정 준수</span>
	</li>
	</ul>
	</div>
	</div>
	</div>

	<div class="mt-16 text-center">
	<p class="text-lg text-gray-600">
	아이멤버는 SaaS(클라우드 기반 서비스형 소프트웨어) 형태로도 제공되어 모든 산업 분야에서 활용 가능합니다.
	</p>
	<div class="mt-6">
	<a href="#contact" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-red-800">
	맞춤형 솔루션 문의
	<i class="fas fa-arrow-right ml-2"></i>
	</a>
	</div>
	</div>
	</div>
	</div>

	<!-- Testimonials -->
	<div class="testimonials-bg py-16">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
	아이멤버를 사용하는 기업들의 이야기
	</h2>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<!-- Testimonial 1 -->
	<div class="bg-white p-8 rounded-xl shadow-md">
	<div class="flex items-center mb-4">
	<div class="h-12 w-12 rounded-full bg-primary-light flex items-center justify-center text-primary font-bold">L</div>
	<div class="ml-4">
	<div class="font-medium">롯데백화점</div>
	<div class="text-sm text-gray-500">고객서비스팀</div>
	</div>
	</div>
	<p class="text-gray-600 italic">
	"아이멤버의 AI 챗봇을 도입한 후 고객 문의 처리 시간이 60% 단축되었습니다. 특히 음성 인식 정확도가 뛰어나 콜센터 업무 효율이 크게 개선되었습니다."
	</p>
	<div class="mt-4 flex text-yellow-400">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	</div>

	<!-- Testimonial 2 -->
	<div class="bg-white p-8 rounded-xl shadow-md">
	<div class="flex items-center mb-4">
	<div class="h-12 w-12 rounded-full bg-primary-light flex items-center justify-center text-primary font-bold">C</div>
	<div class="ml-4">
	<div class="font-medium">롯데케미칼</div>
	<div class="text-sm text-gray-500">연구개발본부</div>
	</div>
	</div>
	<p class="text-gray-600 italic">
	"연구 보고서 작성을 위해 아이멤버를 활용하고 있습니다. 복잡한 화학 데이터 분석과 보고서 초안 작성이 자동화되어 연구원들의 생산성이 크게 향상되었습니다."
	</p>
	<div class="mt-4 flex text-yellow-400">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star-half-alt"></i>
	</div>
	</div>

	<!-- Testimonial 3 -->
	<div class="bg-white p-8 rounded-xl shadow-md">
	<div class="flex items-center mb-4">
	<div class="h-12 w-12 rounded-full bg-primary-light flex items-center justify-center text-primary font-bold">H</div>
	<div class="ml-4">
	<div class="font-medium">롯데호텔</div>
	<div class="text-sm text-gray-500">마케팅팀</div>
	</div>
	</div>
	<p class="text-gray-600 italic">
	"아이멤버의 다국어 음성 합성 기능으로 다양한 언어의 홍보 콘텐츠를 빠르게 제작할 수 있게 되었습니다. 특히 맞춤형 음성 AI가 고객 반응이 매우 좋습니다."
	</p>
	<div class="mt-4 flex text-yellow-400">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- CTA Section -->
	<div class="gradient-bg py-16">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
	<h2 class="text-3xl font-extrabold text-white sm:text-4xl">
	지금 바로 아이멤버를 경험해보세요
	</h2>
	<p class="mt-4 max-w-2xl text-xl text-red-200 mx-auto">
	기업의 업무 방식을 혁신할 아이멤버의 강력한 기능을 확인하실 수 있습니다.
	</p>
	<div class="mt-8 flex justify-center space-x-4">
	<a href="#contact" class="bg-white text-primary hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-semibold">
	데모 신청하기
	</a>
	<a href="#" class="bg-red-700 hover:bg-red-800 text-white px-6 py-3 rounded-md text-lg font-semibold">
	<i class="fas fa-play-circle mr-2"></i> 소개 영상 보기
	</a>
	</div>
	</div>
	</div>

	<!-- Contact Section -->
	<div id="contact" class="py-16 bg-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="lg:grid lg:grid-cols-2 lg:gap-8">
	<div class="mb-12 lg:mb-0">
	<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
	아이멤버에 대해 궁금하신가요?
	</h2>
	<p class="mt-4 text-lg text-gray-600">
	전문 컨설턴트가 귀사의 비즈니스에 최적화된 AI 솔루션을 제안해 드립니다.
	</p>

	<div class="mt-8">
	<div class="flex items-start mb-6">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary-light text-primary">
	<i class="fas fa-phone-alt"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium text-gray-900">전화 문의</h3>
	<p class="mt-2 text-gray-600">
	02-2626-4000(평일 09:00~18:00)
	</p>
	</div>
	</div>

	<div class="flex items-start mb-6">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary-light text-primary">
	<i class="fas fa-envelope"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium text-gray-900">이메일 문의</h3>
	<p class="mt-2 text-gray-600">
	aimember@lotte.net
	</p>
	</div>
	</div>

	<div class="flex items-start">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary-light text-primary">
	<i class="fas fa-map-marker-alt"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium text-gray-900">오시는 길</h3>
	<p class="mt-2 text-gray-600">
	서울특별시 금천구 가산디지털2로 179
	</p>
	</div>
	</div>
	</div>
	</div>

	<div>
	<div class="bg-white shadow-lg rounded-lg p-8">
	<h3 class="text-2xl font-bold text-gray-900 mb-6">무료 상담 신청</h3>
	<form id="contactForm">
	<div class="mb-4">
	<label for="name" class="block text-sm font-medium text-gray-700 mb-1">이름</label>
	<input type="text" id="name" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
	</div>
	<div class="mb-4">
	<label for="company" class="block text-sm font-medium text-gray-700 mb-1">회사명</label>
	<input type="text" id="company" name="company" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
	</div>
	<div class="mb-4">
	<label for="email" class="block text-sm font-medium text-gray-700 mb-1">이메일</label>
	<input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
	</div>
	<div class="mb-4">
	<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">전화번호</label>
	<input type="tel" id="phone" name="phone" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
	</div>
	<div class="mb-6">
	<label for="message" class="block text-sm font-medium text-gray-700 mb-1">문의 내용</label>
	<textarea id="message" name="message" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"></textarea>
	</div>
	<button type="submit" class="w-full bg-primary hover:bg-red-800 text-white py-3 px-4 rounded-md font-medium">
	상담 신청하기
	</button>
	</form>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Footer -->
	<footer class="bg-gray-900 text-white pt-12 pb-8">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
	<div>
	<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">아이멤버</h3>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-300 hover:text-white">소개</a></li>
	<li><a href="#" class="text-gray-300 hover:text-white">기능</a></li>
	<li><a href="#" class="text-gray-300 hover:text-white">가격</a></li>
	<li><a href="#" class="text-gray-300 hover:text-white">고객사례</a></li>
	</ul>
	</div>

	<div>
	<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">리소스</h3>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-300 hover:text-white">블로그</a></li>
	<li><a href="#" class="text-gray-300 hover:text-white">도움말</a></li>
	<li><a href="#" class="text-gray-300 hover:text-white">API 문서</a></li>
	<li><a href="#" class="text-gray-300 hover:text-white">다운로드</a></li>
	</ul>
	</div>

	<div>
	<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">회사</h3>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-300 hover:text-white">롯데이노베이트</a></li>
	<li><a href="#" class="text-gray-300 hover:text-white">채용</a></li>
	<li><a href="#" class="text-gray-300 hover:text-white">파트너</a></li>
	<li><a href="#" class="text-gray-300 hover:text-white">연락처</a></li>
	</ul>
	</div>

	<div>
	<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">소셜 미디어</h3>
	<div class="flex space-x-4">
	<a href="#" class="text-gray-300 hover:text-white">
	<i class="fab fa-facebook-f"></i>
	</a>
	<a href="#" class="text-gray-300 hover:text-white">
	<i class="fab fa-twitter"></i>
	</a>
	<a href="#" class="text-gray-300 hover:text-white">
	<i class="fab fa-linkedin-in"></i>
	</a>
	<a href="#" class="text-gray-300 hover:text-white">
	<i class="fab fa-youtube"></i>
	</a>
	</div>

	<div class="mt-6">
	<h4 class="text-sm font-medium text-gray-400 mb-2">뉴스레터 구독</h4>
	<div class="flex">
	<input type="email" placeholder="이메일 주소" class="px-3 py-2 bg-gray-800 text-white rounded-l-md focus:outline-none w-full">
	<button class="bg-primary hover:bg-red-800 px-4 py-2 rounded-r-md">
	<i class="fas fa-paper-plane"></i>
	</button>
	</div>
	</div>
	</div>
	</div>

	<div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
	<div class="mt-4 md:mt-0 text-sm text-gray-400">
	Copyright© LOTTE INNOVATE COMPANY. All rights Reserved.
	</div>
	</div>
	</div>
	</footer>

	<script>
	// Mobile menu toggle
	document.getElementById('mobile-menu-button').addEventListener('click', function() {
	const menu = document.getElementById('mobile-menu');
	menu.classList.toggle('hidden');
	});

	// Smooth scrolling for anchor links
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function (e) {
	e.preventDefault();

	const targetId = this.getAttribute('href');
	const targetElement = document.querySelector(targetId);

	if (targetElement) {
	targetElement.scrollIntoView({
	behavior: 'smooth'
	});

	// Close mobile menu if open
	const mobileMenu = document.getElementById('mobile-menu');
	if (!mobileMenu.classList.contains('hidden')) {
	mobileMenu.classList.add('hidden');
	}
	}
	});
	});

	// Voice recording demo
	document.getElementById('recordButton').addEventListener('click', function() {
	const recordingStatus = document.getElementById('recordingStatus');
	const voiceOutput = document.getElementById('voiceOutput');

	this.classList.remove('bg-primary', 'hover:bg-red-800');
	this.classList.add('bg-gray-500', 'hover:bg-gray-600');
	this.innerHTML = '<i class="fas fa-stop mr-2"></i> 녹음 중지';

	recordingStatus.classList.remove('hidden');

	// Simulate recording
	let seconds = 0;
	const timer = setInterval(() => {
	seconds++;
	const minutes = Math.floor(seconds / 60);
	const secs = seconds % 60;
	recordingStatus.innerHTML = `<i class="fas fa-circle text-primary animate-pulse mr-1"></i> 녹음 중... ${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')} / 05:00`;

	if (seconds >= 5) {
	clearInterval(timer);
	this.classList.remove('bg-gray-500', 'hover:bg-gray-600');
	this.classList.add('bg-primary', 'hover:bg-red-800');
	this.innerHTML = '<i class="fas fa-microphone mr-2"></i> 음성 녹음 시작';
	recordingStatus.classList.add('hidden');

	// Show result
	voiceOutput.innerHTML = "안녕하세요. 아이멤버 음성 AI입니다. 이 음성은 사용자님의 목소리 패턴을 기반으로 생성되었습니다. 아이멤버는 기업의 업무 효율성을 높이기 위해 다양한 기능을 제공하고 있습니다. 문의 사항이 있으시면 언제든지 연락주세요.";
	}
	}, 1000);

	// Change back to record button when clicked again
	const originalText = this.innerHTML;
	this.addEventListener('click', function handler(e) {
	if (seconds < 5) {
	e.preventDefault();
	clearInterval(timer);
	this.classList.remove('bg-gray-500', 'hover:bg-gray-600');
	this.classList.add('bg-primary', 'hover:bg-red-800');
	this.innerHTML = '<i class="fas fa-microphone mr-2"></i> 음성 녹음 시작';
	recordingStatus.classList.add('hidden');
	this.removeEventListener('click', handler);
	}
	}, {once: true});
	});

	// Form submission
	document.getElementById('contactForm').addEventListener('submit', function(e) {
	e.preventDefault();
	alert('상담 신청이 완료되었습니다. 전문 상담사가 빠른 시일 내에 연락드리겠습니다.');
	this.reset();
	});
	</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=krevas/aimember" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>