373 lines
23 KiB
HTML
373 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="ko"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>참가 문의 - KINTEX AI System</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist:wght@500;600&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
</style>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"surface": "#faf8ff",
|
|
"on-tertiary-fixed-variant": "#005236",
|
|
"surface-container-low": "#f1f3ff",
|
|
"on-surface-variant": "#424750",
|
|
"surface-container-highest": "#dbe2fa",
|
|
"on-error-container": "#93000a",
|
|
"tertiary-fixed-dim": "#72daa9",
|
|
"primary-fixed": "#d3e4ff",
|
|
"on-tertiary-container": "#68d1a0",
|
|
"on-primary-fixed": "#001c38",
|
|
"on-secondary-fixed-variant": "#4500d8",
|
|
"on-background": "#141b2c",
|
|
"on-primary-container": "#91c0ff",
|
|
"outline": "#727781",
|
|
"surface-tint": "#24609e",
|
|
"tertiary": "#003e28",
|
|
"on-tertiary": "#ffffff",
|
|
"on-tertiary-fixed": "#002113",
|
|
"surface-dim": "#d3d9f1",
|
|
"primary": "#0066B3", /* Adjusted to #0066B3 per prompt */
|
|
"on-surface": "#141b2c",
|
|
"surface-bright": "#f9f9ff",
|
|
"surface-container-high": "#e1e7ff",
|
|
"on-secondary-container": "#f3edff",
|
|
"surface-variant": "#dbe2fa",
|
|
"inverse-on-surface": "#eef0ff",
|
|
"background": "#faf8ff",
|
|
"on-error": "#ffffff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"secondary-fixed-dim": "#c9bfff",
|
|
"inverse-primary": "#a2c9ff",
|
|
"on-secondary-fixed": "#1b0063",
|
|
"secondary-container": "#6d4aff",
|
|
"surface-container": "#eaedff",
|
|
"error-container": "#ffdad6",
|
|
"secondary-fixed": "#e5deff",
|
|
"error-red": "#ba1a1a",
|
|
"primary-fixed-dim": "#a2c9ff",
|
|
"primary-container": "#004e8b",
|
|
"error": "#ba1a1a",
|
|
"on-primary-fixed-variant": "#004881",
|
|
"tertiary-container": "#00583b",
|
|
"outline-variant": "#c1c7d3",
|
|
"tertiary-fixed": "#8ef7c4",
|
|
"inverse-surface": "#293042",
|
|
"secondary": "#5427e6",
|
|
"on-secondary": "#ffffff",
|
|
"on-primary": "#ffffff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"section-padding": "96px",
|
|
"stack-md": "16px",
|
|
"stack-sm": "8px",
|
|
"stack-lg": "24px",
|
|
"gutter": "16px",
|
|
"container-padding": "24px",
|
|
"base": "4px"
|
|
},
|
|
"fontFamily": {
|
|
"body-sm": ["Inter"],
|
|
"display-lg-mobile": ["Inter"],
|
|
"title-sm": ["Inter"],
|
|
"label-xs": ["Geist"],
|
|
"label-md": ["Geist"],
|
|
"body-base": ["Inter"],
|
|
"display-lg": ["Inter"],
|
|
"headline-md": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}],
|
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-surface text-on-surface font-body-base">
|
|
<!-- TopNavBar -->
|
|
<header class="bg-surface-container-lowest sticky top-0 z-50 border-b border-outline-variant shadow-sm h-16">
|
|
<div class="max-w-[1280px] mx-auto px-gutter h-full flex items-center justify-between">
|
|
<div class="flex items-center gap-stack-lg">
|
|
<img alt="KINTEX AI System Logo" class="h-8 object-contain cursor-pointer active:scale-95 transition-all" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCWbBcPlkS-8oJMJSsdUseZODxf0oXCo4YyLHUTmZg9zQFCCFzIYKM-4M2qAmulgLlEhvkjAY9lDkOWmV8yc9riUVhEPGmHEEK2fkhIaE-9l_dCDoQTc9C51XcwG6RPq36gNVyCK_6PSVZETjTd7CbxQe9ORYJi4Omrf-SI8_-bE_47-zy1jXfl4efTc93CgEaUbQAV_m7doXWy9tc_OAvtzQ9pmS-EgtGRCDzJxplrQIUVuXXJrcIjR3KITUL8y0DvSvup0oenl0w"/>
|
|
</div>
|
|
<nav class="hidden md:flex items-center gap-stack-lg">
|
|
<a class="font-title-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">전시 안내</a>
|
|
<a class="font-title-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">시설 안내</a>
|
|
<a class="font-title-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">고객 지원</a>
|
|
<a class="font-title-sm text-primary border-b-2 border-primary pb-1" href="#">참가 문의</a>
|
|
</nav>
|
|
<div class="flex items-center gap-stack-md">
|
|
<div class="relative hidden lg:block">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant" style="font-size: 20px;">search</span>
|
|
<input class="pl-10 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-full text-body-sm focus:outline-none focus:ring-2 focus:ring-primary/20 w-64" placeholder="검색" type="text"/>
|
|
</div>
|
|
<button class="bg-primary text-on-primary font-title-sm px-6 py-2 rounded-lg hover:bg-primary-container transition-all active:scale-95 cursor-pointer">Sign In</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Hero Section -->
|
|
<section class="relative h-[400px] flex items-center overflow-hidden">
|
|
<div class="absolute inset-0 z-0">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-primary/90 to-transparent z-10"></div>
|
|
<div class="w-full h-full bg-cover bg-center" data-alt="A sprawling, futuristic exhibition hall viewed from a high angle, showcasing complex architectural structures with glass ceilings. Thousands of professional attendees move through the brightly lit, modern KINTEX venue. The atmosphere is energetic, clean, and dominated by soft blues and metallic greys, reflecting a global connectivity hub for high-end corporate events." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDrnpnqtByYthQSmcBQHloma2K4jnwYG64OhLHqVrTXkz8yL748tMwsn92726B1qlTb4BgaEOJgysdyrtDi5Orov7jx1JCT_WizEe7eagcVKqBmDfWE5WmPG3POVZiakqf2RRI4AWsNFZyAIyWsYKxtRDva8z4sFwARvh4Ra5v6lwaT6eaPjYwIwrN7CzB5kpoOkRRgrIuueq5maOXOakHbWpE1RdHFyhGkkYIj5AcBfT0oEoUFOIyN8ax3G6S7i84GFy5KXho2Fwo')"></div>
|
|
</div>
|
|
<div class="relative z-20 max-w-[1280px] mx-auto px-gutter w-full">
|
|
<div class="max-w-2xl">
|
|
<h1 class="font-display-lg text-display-lg text-white mb-stack-sm">참가 문의</h1>
|
|
<p class="font-title-sm text-white/90">KINTEX AI System과 함께 귀사의 비즈니스를 글로벌 시장으로 확장하세요.<br/>전문 컨설턴트가 최적의 전시 공간을 제안해 드립니다.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Exhibition Guide Section -->
|
|
<section class="py-section-padding bg-surface">
|
|
<div class="max-w-[1280px] mx-auto px-gutter">
|
|
<div class="mb-stack-lg flex flex-col items-center text-center">
|
|
<h2 class="font-headline-md text-headline-md mb-2">참가 안내</h2>
|
|
<div class="h-1 w-12 bg-primary rounded-full"></div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-stack-lg">
|
|
<!-- Card 1: Shell Scheme -->
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden hover:shadow-md transition-all group border-l-4 border-l-primary">
|
|
<div class="h-48 overflow-hidden">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A clean and professional shell scheme exhibition booth interior, featuring white walls, standard spotlights, and grey carpeting. A small reception desk and two chairs are arranged neatly. The lighting is bright and even, highlighting the efficiency and accessibility of this standard corporate exhibition setup." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAZl7-XW2rx4BJmPG9U_Ln-FTm-atdZx91991hIoULVy1amvPJtsB9OVOP6U2CpBxz5zZsRVvAuJ0nqcCn7PfbQXwtgkv5FeWzqveUJJ18mPCDTv4-apwx9pLij4q-99NQ1NRXDAwbLJPUbRe4qImqnlu3XWnRUW77SP2YLohhk4TcuE8yZmEg04WgjcPXTnYPK8tSUPUkOdbnUxVd8ftZNkJ7BdoCk6EA5ZVAVaqpQ6qYUcKEgn-rubItfwqi-n3Vte7pMkyF5F-0"/>
|
|
</div>
|
|
<div class="p-container-padding">
|
|
<span class="inline-block bg-primary-fixed text-on-primary-fixed text-label-md px-2 py-1 rounded mb-stack-sm">Entry Tier</span>
|
|
<h3 class="font-title-sm text-title-sm mb-2">조립부스 (Shell Scheme)</h3>
|
|
<p class="text-on-surface-variant font-body-sm mb-4">기본 벽체 및 바닥이 제공되는 가장 경제적인 선택입니다. 소규모 기업과 효율적인 운영을 선호하는 참가사에 추천합니다.</p>
|
|
<div class="flex items-center justify-between mt-auto pt-4 border-t border-outline-variant/30">
|
|
<span class="text-primary font-bold">₩ 2,500,000 / unit</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2: Raw Space -->
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden hover:shadow-md transition-all group border-l-4 border-l-secondary">
|
|
<div class="h-48 overflow-hidden">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A wide-angle shot of a large, empty raw space exhibition area within a high-tech convention center. The concrete floor reflects the bright overhead LED lighting. Subtle architectural lines and structural columns frame the space, suggesting limitless creative potential for custom-designed brand pavilions and large-scale installations." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDBPMYmsTBjg9hJy0eZhZ_mk1wCrnFZa4qqrUO8v_zabow-EOcIxTsqoS3-Tr_4PwrwWhf5FHarIejv5tS1K3Qw9Xv_7ZuCZ0MyKO_lxQ1mJCZPBDzBWUogNXNfmK2FhcU2IoWnoJUCrfFl2Hy0qWkRtz1Do49BxCIETxP15mcDxy2CwztqNl_nqOxPczQglfzq2ynt0koiAUEf6OU72C3upXNVcAP8ej3tmuofCkHjVN5u7upeefWuy-Pco2iS4t45FzeR9_i0lws"/>
|
|
</div>
|
|
<div class="p-container-padding">
|
|
<span class="inline-block bg-secondary-fixed text-on-secondary-fixed text-label-md px-2 py-1 rounded mb-stack-sm">Design Freedom</span>
|
|
<h3 class="font-title-sm text-title-sm mb-2">독립부스 (Raw Space)</h3>
|
|
<p class="text-on-surface-variant font-body-sm mb-4">공간만 제공되어 브랜드 아이덴티티에 맞는 자유로운 디자인 설계가 가능합니다. 독창적인 홍보 효과를 극대화할 수 있습니다.</p>
|
|
<div class="flex items-center justify-between mt-auto pt-4 border-t border-outline-variant/30">
|
|
<span class="text-secondary font-bold">₩ 2,000,000 / unit</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 3: Premium AI -->
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden hover:shadow-md transition-all group border-l-4 border-l-tertiary">
|
|
<div class="h-48 overflow-hidden">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="An ultra-modern premium exhibition booth with integrated digital displays, glass surfaces, and warm accent lighting. The design features curved architectural elements and interactive kiosks. Professional branding and AI-optimized pathways for visitor flow are visible, creating an atmosphere of cutting-edge innovation and high-end luxury." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAMf6tGaJOI1Cl4-tGXLPCsLG8R7RmaPKFzFJm7kfcX80YOfV5uhnohK4ClgEmtz_bV7RLP02sI0wnM-hEPt5KVOapVxNyIRnpqrgiGcRZjlBnNYa8aLM04FfiQ3cwufd7JubwI-hCdIP85bJy9yVsyTsaa-noT2kxFzqGI4lNAUYst-Wt5iYaIFdB3IjsoocGdtZqxZKozHGnVWv3hy9vpv1JhFnfy3ZHKHT-rlijamNIxfd9SbEAXWZ4tnJCEgQPk0GEsK1Ppo6I"/>
|
|
</div>
|
|
<div class="p-container-padding">
|
|
<span class="inline-block bg-tertiary-fixed text-on-tertiary-fixed text-label-md px-2 py-1 rounded mb-stack-sm">Full Solution</span>
|
|
<h3 class="font-title-sm text-title-sm mb-2">프리미엄 (Premium)</h3>
|
|
<p class="text-on-surface-variant font-body-sm mb-4">AI 최적화 동선 설계 및 맞춤형 브랜딩 패키지가 포함된 올인원 솔루션입니다. 최고의 비즈니스 성과를 보장합니다.</p>
|
|
<div class="flex items-center justify-between mt-auto pt-4 border-t border-outline-variant/30">
|
|
<span class="text-tertiary-fixed-dim font-bold">별도 문의</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Inquiry Form Section -->
|
|
<section class="py-section-padding bg-surface-container-low">
|
|
<div class="max-w-[1280px] mx-auto px-gutter grid grid-cols-1 lg:grid-cols-12 gap-section-padding">
|
|
<!-- Left Info Column -->
|
|
<div class="lg:col-span-5 space-y-stack-lg">
|
|
<div>
|
|
<h2 class="font-headline-md text-headline-md mb-stack-sm">문의하기</h2>
|
|
<p class="text-on-surface-variant">참가 신청 및 전시와 관련된 모든 궁금한 점을 남겨주세요. 담당자가 영업일 기준 24시간 이내에 답변해 드립니다.</p>
|
|
</div>
|
|
<div class="space-y-stack-md bg-surface-container-lowest p-container-padding rounded-xl border border-outline-variant/50">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined">call</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-label-md text-on-surface-variant">전화 문의</p>
|
|
<p class="font-title-sm">+82-31-123-4567</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined">mail</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-label-md text-on-surface-variant">이메일 문의</p>
|
|
<p class="font-title-sm">exhibit@kintex-ai.com</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined">location_on</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-label-md text-on-surface-variant">위치 안내</p>
|
|
<p class="font-title-sm">경기도 고양시 일산서구 킨텍스로 217-60</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-container-padding bg-primary/5 rounded-xl border border-primary/20">
|
|
<p class="font-body-sm text-primary mb-2">이미 계정이 있으신가요?</p>
|
|
<a class="font-title-sm text-primary hover:underline flex items-center gap-1" href="#">
|
|
로그인하여 빠른 문의하기
|
|
<span class="material-symbols-outlined text-sm">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Right Form Column -->
|
|
<div class="lg:col-span-7">
|
|
<form class="bg-surface-container-lowest p-8 md:p-12 rounded-2xl border border-outline-variant shadow-lg space-y-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-lg">
|
|
<div class="space-y-1">
|
|
<label class="font-label-md text-on-surface-variant">회사명</label>
|
|
<input class="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-bright focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all" placeholder="회사명을 입력하세요" type="text"/>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<label class="font-label-md text-on-surface-variant">담당자</label>
|
|
<input class="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-bright focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all" placeholder="성함을 입력하세요" type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<label class="font-label-md text-on-surface-variant">연락처 (이메일 또는 전화번호)</label>
|
|
<input class="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-bright focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all" placeholder="연락 가능한 정보를 입력하세요" type="text"/>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-lg">
|
|
<div class="space-y-1">
|
|
<label class="font-label-md text-on-surface-variant">예상 규모</label>
|
|
<select class="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-bright focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all appearance-none cursor-pointer">
|
|
<option value="">선택하세요</option>
|
|
<option value="1">1개 부스 (9sqm)</option>
|
|
<option value="2-4">2-4개 부스 (18-36sqm)</option>
|
|
<option value="5-9">5-9개 부스 (45-81sqm)</option>
|
|
<option value="10+">10개 이상</option>
|
|
</select>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<label class="font-label-md text-on-surface-variant">희망 홀</label>
|
|
<select class="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-bright focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all appearance-none cursor-pointer">
|
|
<option value="">홀 선택</option>
|
|
<option value="1">Hall 1</option>
|
|
<option value="2">Hall 2</option>
|
|
<option value="3">Hall 3</option>
|
|
<option value="4">Hall 4</option>
|
|
<option value="5">Hall 5</option>
|
|
<option value="6">Hall 6</option>
|
|
<option value="7">Hall 7</option>
|
|
<option value="8">Hall 8</option>
|
|
<option value="9">Hall 9</option>
|
|
<option value="10">Hall 10</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<label class="font-label-md text-on-surface-variant">문의 내용</label>
|
|
<textarea class="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-bright focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all resize-none" placeholder="참가 목적이나 특별 요청사항이 있다면 남겨주세요." rows="5"></textarea>
|
|
</div>
|
|
<div class="flex items-center gap-2 pt-2">
|
|
<input class="w-4 h-4 text-primary rounded border-outline-variant" id="privacy" type="checkbox"/>
|
|
<label class="text-body-sm text-on-surface-variant" for="privacy">개인정보 수집 및 이용에 동의합니다.</label>
|
|
</div>
|
|
<button class="w-full bg-primary text-on-primary font-title-sm py-4 rounded-lg hover:brightness-110 active:scale-[0.98] transition-all flex items-center justify-center gap-2" type="button">
|
|
문의 보내기
|
|
<span class="material-symbols-outlined">send</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Footer -->
|
|
<footer class="bg-surface-container py-section-padding border-t border-outline-variant/30">
|
|
<div class="max-w-[1280px] mx-auto px-gutter grid grid-cols-1 md:grid-cols-2 gap-stack-lg">
|
|
<div>
|
|
<div class="font-title-sm text-title-sm font-bold text-primary mb-stack-sm">KINTEX AI System</div>
|
|
<p class="text-on-surface-variant font-body-sm max-w-sm mb-stack-lg">전 세계 기업과 방문객을 연결하는 혁신적인 AI 기반 전시 솔루션을 제공합니다.</p>
|
|
<div class="text-on-surface-variant font-body-sm">
|
|
© 2024 KINTEX AI System. All Rights Reserved.
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-stack-lg">
|
|
<div class="space-y-stack-sm">
|
|
<p class="font-label-md text-on-surface">회사 정보</p>
|
|
<ul class="space-y-2">
|
|
<li><a class="font-body-sm text-on-surface-variant hover:text-primary underline" href="#">회사소개</a></li>
|
|
<li><a class="font-body-sm text-on-surface-variant hover:text-primary underline" href="#">개인정보처리방침</a></li>
|
|
<li><a class="font-body-sm text-on-surface-variant hover:text-primary underline" href="#">이용약관</a></li>
|
|
<li><a class="font-body-sm text-on-surface-variant hover:text-primary underline" href="#">사이트맵</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="space-y-stack-sm">
|
|
<p class="font-label-md text-on-surface">소셜 미디어</p>
|
|
<div class="flex gap-4">
|
|
<a class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center hover:bg-primary-container transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">language</span>
|
|
</a>
|
|
<a class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center hover:bg-primary-container transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">share</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script>
|
|
// Micro-interactions
|
|
document.querySelectorAll('button').forEach(btn => {
|
|
btn.addEventListener('click', function(e) {
|
|
const ripple = document.createElement('span');
|
|
ripple.classList.add('ripple');
|
|
this.appendChild(ripple);
|
|
setTimeout(() => ripple.remove(), 1000);
|
|
});
|
|
});
|
|
|
|
// Form submission simple feedback
|
|
const submitBtn = document.querySelector('button[type="button"]');
|
|
if(submitBtn) {
|
|
submitBtn.addEventListener('click', () => {
|
|
const originalContent = submitBtn.innerHTML;
|
|
submitBtn.innerHTML = '<span class="material-symbols-outlined animate-spin">sync</span> 보내는 중...';
|
|
setTimeout(() => {
|
|
submitBtn.innerHTML = '<span class="material-symbols-outlined">check_circle</span> 전송 완료';
|
|
submitBtn.classList.replace('bg-primary', 'bg-on-tertiary-fixed-variant');
|
|
setTimeout(() => {
|
|
submitBtn.innerHTML = originalContent;
|
|
submitBtn.classList.replace('bg-on-tertiary-fixed-variant', 'bg-primary');
|
|
}, 3000);
|
|
}, 1500);
|
|
});
|
|
}
|
|
</script>
|
|
</body></html> |