321 lines
22 KiB
HTML
321 lines
22 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 Exhibitor Microsite</title>
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<!-- Google Fonts: Inter & Geist for modern typography -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Geist:wght@400;500;600&display=swap" rel="stylesheet"/>
|
|
<!-- Material Symbols -->
|
|
<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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-secondary-container": "#f3edff",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary": "#ffffff",
|
|
"surface-bright": "#f9f9ff",
|
|
"on-error": "#ffffff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-primary-fixed": "#001c38",
|
|
"tertiary-fixed-dim": "#72daa9",
|
|
"secondary": "#5427e6",
|
|
"on-tertiary": "#ffffff",
|
|
"on-secondary-fixed": "#1b0063",
|
|
"on-background": "#141b2c",
|
|
"primary-fixed": "#d3e4ff",
|
|
"error": "#ba1a1a",
|
|
"surface-container-high": "#e1e7ff",
|
|
"on-primary-container": "#91c0ff",
|
|
"outline": "#727781",
|
|
"on-tertiary-fixed": "#002113",
|
|
"on-tertiary-container": "#68d1a0",
|
|
"primary": "#003765",
|
|
"inverse-primary": "#a2c9ff",
|
|
"surface-container-low": "#f1f3ff",
|
|
"on-error-container": "#93000a",
|
|
"outline-variant": "#c1c7d3",
|
|
"on-tertiary-fixed-variant": "#005236",
|
|
"inverse-surface": "#293042",
|
|
"error-red": "#ba1a1a",
|
|
"primary-container": "#004e8b",
|
|
"on-surface-variant": "#424750",
|
|
"on-primary-fixed-variant": "#004881",
|
|
"tertiary": "#003e28",
|
|
"on-primary": "#ffffff",
|
|
"surface-container": "#eaedff",
|
|
"surface-tint": "#24609e",
|
|
"tertiary-container": "#00583b",
|
|
"surface-container-highest": "#dbe2fa",
|
|
"on-secondary-fixed-variant": "#4500d8",
|
|
"surface": "#faf8ff",
|
|
"secondary-fixed-dim": "#c9bfff",
|
|
"surface-dim": "#d3d9f1",
|
|
"primary-fixed-dim": "#a2c9ff",
|
|
"on-surface": "#141b2c",
|
|
"inverse-on-surface": "#eef0ff",
|
|
"surface-variant": "#dbe2fa",
|
|
"background": "#faf8ff",
|
|
"secondary-container": "#6d4aff",
|
|
"tertiary-fixed": "#8ef7c4",
|
|
"secondary-fixed": "#e5deff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"section-padding": "96px",
|
|
"container-padding": "24px",
|
|
"base": "4px",
|
|
"stack-lg": "24px",
|
|
"stack-sm": "8px",
|
|
"gutter": "16px",
|
|
"stack-md": "16px"
|
|
},
|
|
"fontFamily": {
|
|
"title-sm": ["Inter", "sans-serif"],
|
|
"display-lg-mobile": ["Inter", "sans-serif"],
|
|
"body-sm": ["Inter", "sans-serif"],
|
|
"headline-md": ["Inter", "sans-serif"],
|
|
"body-base": ["Inter", "sans-serif"],
|
|
"label-xs": ["Geist", "sans-serif"],
|
|
"label-md": ["Geist", "sans-serif"],
|
|
"display-lg": ["Inter", "sans-serif"]
|
|
},
|
|
"fontSize": {
|
|
"title-sm": ["18px", { "lineHeight": "28px", "fontWeight": "600" }],
|
|
"display-lg-mobile": ["28px", { "lineHeight": "36px", "fontWeight": "700" }],
|
|
"body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
|
|
"headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
|
|
"body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
|
|
"label-xs": ["11px", { "lineHeight": "14px", "fontWeight": "500" }],
|
|
"label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600" }],
|
|
"display-lg": ["36px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<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);
|
|
}
|
|
.ai-watermark {
|
|
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface-bright text-on-background selection:bg-primary-fixed selection:text-on-primary-fixed">
|
|
<!-- TopAppBar -->
|
|
<header class="docked full-width top-0 sticky z-50 bg-surface/80 backdrop-blur-md border-b border-outline-variant/30 shadow-sm h-20 flex items-center">
|
|
<nav class="max-w-[1280px] mx-auto w-full px-container-padding flex justify-between items-center">
|
|
<div class="font-display-lg text-display-lg text-primary font-bold tracking-tight">
|
|
(주)한빛로보틱스
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-stack-lg">
|
|
<a class="font-title-sm text-title-sm text-primary border-b-2 border-primary pb-1 transition-colors duration-200" href="#">전시안내</a>
|
|
<a class="font-title-sm text-title-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">제품소개</a>
|
|
<a class="font-title-sm text-title-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">미팅예약</a>
|
|
<button class="bg-primary text-on-primary px-6 py-2.5 rounded-lg font-label-md text-label-md active:scale-95 transition-transform duration-150 ml-gutter">
|
|
문의하기
|
|
</button>
|
|
</div>
|
|
<button class="md:hidden text-primary">
|
|
<span class="material-symbols-outlined">menu</span>
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="relative min-h-[700px] flex items-center overflow-hidden">
|
|
<div class="absolute inset-0 z-0">
|
|
<img class="w-full h-full object-cover" data-alt="A massive, high-tech industrial robot arm in a pristine white laboratory environment, featuring glowing blue LED accents and precision joints. The setting is bright and clinical, with large windows and a clean concrete floor, reflecting a modern light-mode corporate aesthetic. The mood is advanced, reliable, and cutting-edge, utilizing a professional palette of whites and corporate blues." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCC5jPdMP0oQYI0lpM-2tFCmRgVmuZ68QFJYbBt2_gtlGPU7ybqLuMKalQumaq3xNdr8HUio-8VxpDvj99CteaeJhk3P4Z_NCt7NCCr_ScugHzGJVCYBt_g1_N1B7GQQfZhLrAhB8qQw0Wh69jK-rjWTxSE4PKwGsPTSaH2uI1iIF_QFwH-0HIkMQCSF56PdH1V4Z-K-nMtSklHZRp8emLVTfmuqG7iRZJxYk8M0deX3F2VkmDrtu7D933PgNjJl2i5FBBvst3HfbI"/>
|
|
<div class="absolute inset-0 bg-gradient-to-r from-background via-background/40 to-transparent"></div>
|
|
</div>
|
|
<div class="relative z-10 max-w-[1280px] mx-auto w-full px-container-padding">
|
|
<div class="max-w-2xl">
|
|
<span class="inline-block bg-primary-fixed text-on-primary-fixed px-3 py-1 rounded-full font-label-md text-label-md mb-stack-md">
|
|
Global Robotics Leader
|
|
</span>
|
|
<h1 class="font-display-lg text-display-lg text-on-background mb-stack-sm leading-tight">
|
|
(주)한빛로보틱스
|
|
</h1>
|
|
<p class="font-headline-md text-headline-md text-on-surface-variant mb-12">
|
|
미래를 움직이는 지능형 로보틱스 솔루션
|
|
</p>
|
|
<div class="flex flex-wrap gap-stack-md">
|
|
<button class="bg-primary text-on-primary px-8 py-4 rounded-xl font-title-sm text-title-sm hover:bg-primary-container transition-all shadow-md">
|
|
미팅 예약
|
|
</button>
|
|
<button class="bg-white/10 backdrop-blur-md border border-white/30 text-on-background px-8 py-4 rounded-xl font-title-sm text-title-sm hover:bg-white/20 transition-all">
|
|
기업 소개서
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Booth Info Card (Floating Overlay Style) -->
|
|
<section class="max-w-[1280px] mx-auto px-container-padding -mt-20 relative z-20">
|
|
<div class="bg-surface-container-lowest border border-outline-variant shadow-md p-stack-lg rounded-xl flex flex-col md:flex-row items-center justify-between gap-gutter">
|
|
<div class="flex items-center gap-stack-lg">
|
|
<div class="bg-primary-container/10 p-4 rounded-full">
|
|
<span class="material-symbols-outlined text-primary text-4xl">location_on</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-title-sm text-title-sm text-on-surface">KINTEX 전시장 부스 위치</h3>
|
|
<p class="font-body-base text-body-base text-primary font-bold">부스 위치 · A-102 홀7</p>
|
|
</div>
|
|
</div>
|
|
<a class="flex items-center gap-stack-sm text-primary font-label-md text-label-md hover:underline decoration-2 underline-offset-4" href="#">
|
|
<span class="material-symbols-outlined">map</span>
|
|
전시장 도면 보기
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<!-- Product Showcase -->
|
|
<section class="py-section-padding">
|
|
<div class="max-w-[1280px] mx-auto px-container-padding">
|
|
<div class="mb-16">
|
|
<h2 class="font-display-lg text-display-lg text-on-background mb-stack-sm">핵심 제품 라인업</h2>
|
|
<div class="w-20 h-1.5 bg-primary rounded-full"></div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
|
<!-- Product Card 1 -->
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden group hover:shadow-md transition-shadow border-l-4 border-l-primary">
|
|
<div class="h-64 overflow-hidden bg-surface-container">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A close-up photograph of the HR-A1 collaborative robot arm, showing its sleek, segmented white body and articulated joints. The lighting is soft and even, highlighting the clean industrial design against a blurred tech-office background. It exudes safety and precision, with high-quality materials and a modern professional feel." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD7OZa-KYPrl0XYqzJj58FLBe6BTrUV3LZTOhBbSQDdifMblQ-5vSP415roqgeuOPpuM9UEtRhaEWTkiccGOnJkptoeOtocjrSBzlys8PMGgc2KH2uXtJ1uSSpSxxtb9Ueqy6ednSNBfOovllZfgM1SBWSG5BCtiBLg8aqIpBtq4gD7O2TlbIiN-OBZgncBMSNA9pEYRcvMwZ08eOwa2Evq17qSIak8JfJOOpkI0sre68vCa1JYZMKwq1tfqVgWXJF9ZcqAmPkDyG4"/>
|
|
</div>
|
|
<div class="p-stack-lg">
|
|
<span class="font-label-md text-label-md text-primary bg-primary-fixed px-2 py-0.5 rounded mb-stack-sm inline-block">Industrial COBOT</span>
|
|
<h4 class="font-title-sm text-title-sm text-on-surface mb-stack-sm">HR-A1 협동 로봇</h4>
|
|
<p class="font-body-base text-body-base text-on-surface-variant mb-stack-lg">고도의 정밀도와 안전성을 갖춘 산업용 협동 로봇입니다. 인간과의 협업을 최우선으로 설계되었습니다.</p>
|
|
<button class="w-full py-2.5 border border-outline-variant rounded-lg font-label-md text-label-md hover:bg-primary hover:text-on-primary transition-colors">자세히 보기</button>
|
|
</div>
|
|
</div>
|
|
<!-- Product Card 2 -->
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden group hover:shadow-md transition-shadow border-l-4 border-l-secondary">
|
|
<div class="h-64 overflow-hidden bg-surface-container">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="The HR-M3 autonomous mobile robot (AMR) navigating a warehouse floor. It is a sleek, low-profile vehicle with sensors and a modular top platform. The factory background is clean and organized, with soft blue ambient lighting that emphasizes the smart factory automation aesthetic. The design is robust and modern." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCvi9hLgpoqM37bRXqWVajDzwnG6_RwtYyrP60Ef_xKVDnXSFpSlVWkiBdaXqE3z3aRlhdvT6fTfuq3YD20TI-fl4PaNaBnpqBmDJ5TpDutAy4KcokejBuZmv9s8C3YUJgNDiVFrq1nmuqmiv-ISIuf1L1oMTQYPcHjOproOWVmP7c-jMu9JHw0rokKmUwyeQ4cpwbJdVRlkP1jVAXcsPckSyLqEfwRg1vnheSSppFhr0q8OFbkj4BmA8mDWLOFfhHNo1atx-ja0CI"/>
|
|
</div>
|
|
<div class="p-stack-lg">
|
|
<span class="font-label-md text-label-md text-secondary bg-secondary-fixed px-2 py-0.5 rounded mb-stack-sm inline-block">Smart Logistics</span>
|
|
<h4 class="font-title-sm text-title-sm text-on-surface mb-stack-sm">HR-M3 자율주행 AMR</h4>
|
|
<p class="font-body-base text-body-base text-on-surface-variant mb-stack-lg">스마트 팩토리 물류 효율을 극대화하는 자율 이동 로봇입니다. 실시간 장애물 회피와 경로 최적화 기능을 갖추고 있습니다.</p>
|
|
<button class="w-full py-2.5 border border-outline-variant rounded-lg font-label-md text-label-md hover:bg-primary hover:text-on-primary transition-colors">자세히 보기</button>
|
|
</div>
|
|
</div>
|
|
<!-- Product Card 3 -->
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden group hover:shadow-md transition-shadow border-l-4 border-l-tertiary">
|
|
<div class="h-64 overflow-hidden bg-surface-container">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="The HR-Q Vision scanner in action, projecting a grid of light onto a mechanical part for quality inspection. The environment is dark-themed with focused spotlighting, creating a high-tech inspection mood. The scanner has a metallic, premium finish and integrated AI processing units visible in the design." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAzq13j9Ej2M8W1HW_TSJy-KR9pXchnSM1HP8vTpvB2yeAMDsLrNUeRhIbrW24hSm-NqpTIqWymyrvGYtxKSTFqdwpvX_Uv-SA2yatAkUoF5t9cvN8qThDFnZSXEZ8w48VdGs8xsE4tAV3XgZgYpugXwvoNtVXbqNbPhJ_fxtQ-79lhdo5nKFm6J2psXpsA9q80FKgRudwAC-j5CH9484zHvZpligh17SCZ8kuC1Jo2p-_i3-ABwoVzKATyWQyIdlowWPUi5KUt4XU"/>
|
|
</div>
|
|
<div class="p-stack-lg">
|
|
<span class="font-label-md text-label-md text-tertiary bg-tertiary-fixed px-2 py-0.5 rounded mb-stack-sm inline-block">AI Vision</span>
|
|
<h4 class="font-title-sm text-title-sm text-on-surface mb-stack-sm">HR-Q Vision 스캐너</h4>
|
|
<p class="font-body-base text-body-base text-on-surface-variant mb-stack-lg">AI 기반 딥러닝 기술로 완벽한 품질 검수를 보장합니다. 미세한 결함도 놓치지 않는 초정밀 3D 스캐닝을 지원합니다.</p>
|
|
<button class="w-full py-2.5 border border-outline-variant rounded-lg font-label-md text-label-md hover:bg-primary hover:text-on-primary transition-colors">자세히 보기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- AI Booth Gallery Section -->
|
|
<section class="py-section-padding bg-surface-container-low">
|
|
<div class="max-w-[1280px] mx-auto px-container-padding">
|
|
<div class="text-center mb-16 max-w-3xl mx-auto">
|
|
<h2 class="font-display-lg text-display-lg text-on-background mb-stack-sm">부스 미리보기</h2>
|
|
<p class="font-body-base text-body-base text-on-surface-variant">현장에서 만나보실 한빛로보틱스의 혁신적인 전시 부스 디자인입니다. 각 섹션별로 다양한 로봇 시연이 준비되어 있습니다.</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-lg">
|
|
<div class="relative rounded-xl overflow-hidden shadow-sm group">
|
|
<img class="w-full h-[400px] object-cover" data-alt="A wide-angle view of a futuristic exhibition booth for Hanbit Robotics. The structure features sweeping curves, integrated blue neon lighting, and large digital displays showing robotic arms. Multiple robotic workstations are arranged across the gray carpeted floor, with professional attendees interacting with the technology. The lighting is bright and expansive, reflecting the KINTEX venue scale." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCimWurGsjObNQXff4cID-YYj5L7qxSBIhWBn28679h2dTWRl1dKgb7HkT9sMn7VtNoKcF4eNTC8JLcbH-9MYXq0HambujhK3jhSLAZ208dk4Wgf8WsBhjM7742kBLOPY_X76hQgDb1w12nw2eT8tmZCYq6PR3FGzA9qIutbaM5iJ7Xev4KLca6ihSFfPyBeI5zuciq2lXNafmy7Lsd7R75FL6OJOKi3LycB4YuyGCpClc6c3RLKK8_mP3tsw0W1CG4PbFo0wIfmuY"/>
|
|
<div class="absolute bottom-4 right-4 text-[10px] text-white/60 ai-watermark font-label-xs">AI 생성 예상 이미지</div>
|
|
<div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
|
<span class="text-white font-bold text-lg px-4 py-2 border-2 border-white rounded-lg">전체 보기</span>
|
|
</div>
|
|
</div>
|
|
<div class="relative rounded-xl overflow-hidden shadow-sm group">
|
|
<img class="w-full h-[400px] object-cover" data-alt="A detailed view of a VIP lounge area within the Hanbit Robotics booth. Modern gray sofas are arranged around geometric coffee tables, with professional visitors engaged in discussions. Behind them, a large curved screen displays complex engineering schematics and robotic data. The atmosphere is sophisticated and collaborative, featuring indoor plants and warm architectural lighting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDfwXa5yfmmM54OHV6tAksxyRoIeIlkDLwE729oI7aQ9r_ArOPk4KYq-ACdR4_7odNkasv_0hNcB6Wth26qhoh1Rgl-YX8MeE_JJS8olx4FF-ItvDMShh8DgDJ3TGPM7Mi5TXDv73phN3R4Q1mHKhMGETQtPKfBejXYqdcTPR10wSqbWIS371kTHV1Ajmpah4JpNuMaI9w8hf2Z0Q7UX74cfSdaH7ELZJqVt9fTCfN-Wp6x9uOAHgJGv9svTEtMhwxJqMn88jnmZ_o"/>
|
|
<div class="absolute bottom-4 right-4 text-[10px] text-white/60 ai-watermark font-label-xs">AI 생성 예상 이미지</div>
|
|
<div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
|
<span class="text-white font-bold text-lg px-4 py-2 border-2 border-white rounded-lg">라운지 보기</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Final CTA Banner -->
|
|
<section class="py-section-padding bg-primary text-on-primary overflow-hidden relative">
|
|
<!-- Subtle background pattern using a gradient overlay -->
|
|
<div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white via-transparent to-transparent"></div>
|
|
<div class="max-w-[1280px] mx-auto px-container-padding relative z-10 text-center">
|
|
<h2 class="font-display-lg text-display-lg mb-stack-lg max-w-4xl mx-auto">
|
|
귀사의 비즈니스에 맞는 맞춤형 로봇 솔루션을 제안해 드립니다.
|
|
</h2>
|
|
<button class="bg-white text-primary px-10 py-5 rounded-full font-title-sm text-title-sm hover:bg-surface-container transition-all shadow-xl active:scale-95">
|
|
지금 문의하기
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="full-width py-section-padding bg-surface-container-lowest border-t border-outline-variant">
|
|
<div class="max-w-[1280px] mx-auto px-container-padding flex flex-col md:flex-row justify-between items-start gap-stack-lg">
|
|
<div class="max-w-md">
|
|
<div class="font-title-sm text-title-sm text-on-surface mb-stack-md">(주)한빛로보틱스</div>
|
|
<p class="font-body-base text-body-base text-on-surface-variant/80 mb-stack-lg">
|
|
지능형 자율주행 로봇 및 협동 로봇 전문 기업으로 산업 전반의 디지털 전환과 자동화를 선도합니다.
|
|
</p>
|
|
<div class="flex gap-stack-md text-on-surface-variant">
|
|
<span class="material-symbols-outlined hover:text-primary cursor-pointer">public</span>
|
|
<span class="material-symbols-outlined hover:text-primary cursor-pointer">mail</span>
|
|
<span class="material-symbols-outlined hover:text-primary cursor-pointer">call</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-stack-md">
|
|
<div class="flex flex-wrap gap-stack-lg">
|
|
<a class="font-label-md text-label-md text-on-surface-variant/80 hover:text-primary underline transition-all" href="#">이용약관</a>
|
|
<a class="font-label-md text-label-md text-on-surface-variant/80 hover:text-primary underline transition-all" href="#">개인정보처리방침</a>
|
|
<a class="font-label-md text-label-md text-on-surface-variant/80 hover:text-primary underline transition-all" href="#">찾아오시는 길</a>
|
|
</div>
|
|
<p class="font-body-base text-body-base text-on-surface-variant/80">
|
|
© 2024 (주)한빛로보틱스. All rights reserved. KINTEX Official Partner.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<!-- Simple Scroll Interaction -->
|
|
<script>
|
|
window.addEventListener('scroll', () => {
|
|
const header = document.querySelector('header');
|
|
if (window.scrollY > 20) {
|
|
header.classList.add('shadow-md');
|
|
header.classList.remove('shadow-sm');
|
|
} else {
|
|
header.classList.add('shadow-sm');
|
|
header.classList.remove('shadow-md');
|
|
}
|
|
});
|
|
|
|
// CTA interactions
|
|
document.querySelectorAll('button').forEach(btn => {
|
|
btn.addEventListener('mousedown', () => btn.classList.add('scale-95'));
|
|
btn.addEventListener('mouseup', () => btn.classList.remove('scale-95'));
|
|
btn.addEventListener('mouseleave', () => btn.classList.remove('scale-95'));
|
|
});
|
|
</script>
|
|
</body></html> |