Art Deco Data Visualization 구성 요소
컨설팅 서비스를 위한 복잡하고 반응이 빠른 아르데코 스타일의 데이터 시각화 구성 요소로, 기하학적 패턴과 고급스러운 보라색/보라색 색 구성표를 특징으로 합니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="font-sans p-4 sm:p-8 md:p-12 bg-purple-50 dark:bg-gray-950 text-purple-900 dark:text-purple-100 min-h-screen relative overflow-hidden">
<!-- Art Deco Geometric Background Elements -->
<div class="absolute inset-0 pointer-events-none overflow-hidden opacity-10 dark:opacity-5">
<div class="absolute top-0 left-0 w-64 h-64 bg-gradient-to-br from-purple-200 to-purple-400 dark:from-violet-800 dark:to-purple-900 transform -translate-x-1/2 -translate-y-1/2 rotate-45 animate-pulse-slow"></div>
<div class="absolute bottom-0 right-0 w-80 h-80 bg-gradient-to-tl from-purple-300 to-purple-500 dark:from-violet-700 dark:to-purple-800 transform translate-x-1/3 translate-y-1/3 -rotate-30 animate-pulse-slow delay-500"></div>
<div class="absolute top-1/4 right-0 w-32 h-32 bg-purple-200 dark:bg-violet-900 transform translate-x-1/2 rotate-15"></div>
<div class="absolute bottom-1/4 left-0 w-48 h-48 bg-purple-100 dark:bg-violet-950 transform -translate-x-1/3 -rotate-25"></div>
</div>
<header class="relative z-10 text-center mb-10 md:mb-16">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-purple-950 dark:text-purple-50 mb-4 tracking-tight leading-tight uppercase relative inline-block group">
<span class="block">Strategic Insights</span>
<span class="block text-2xl sm:text-3xl md:text-4xl font-normal text-purple-700 dark:text-purple-300">Data & Analytics Console</span>
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-2/3 h-1 bg-purple-600 dark:bg-purple-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-center"></div>
</h1>
<p class="text-lg sm:text-xl text-purple-700 dark:text-purple-300 max-w-3xl mx-auto opacity-90">Unveiling actionable intelligence through elegant data visualization and predictive modeling.</p>
</header>
<main class="relative z-10 grid grid-cols-1 md:grid-cols-12 gap-6 sm:gap-8 lg:gap-10">
<!-- Main Data Panel (Span 8/12 - Desktop) -->
<section class="md:col-span-8 flex flex-col p-6 sm:p-8 bg-purple-100 dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 shadow-xl rounded-lg transform hover:scale-[1.005] transition-transform duration-300 group">
<h2 class="text-3xl sm:text-4xl font-bold text-purple-900 dark:text-purple-100 mb-6 flex items-center justify-between">
<span class="">Market Trend Dynamics</span>
<div class="flex space-x-2">
<button class="p-2 rounded-full border border-purple-400 dark:border-purple-600 bg-purple-200 dark:bg-gray-700 text-purple-800 dark:text-purple-200 hover:bg-purple-300 dark:hover:bg-gray-600 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.309.746L13 9.475V15a1 1 0 01-.293.707l-2 2A1 1 0 019 17v-5.5L5.309 6.746A1 1 0 015 6V3z" clip-rule="evenodd" /></svg></button>
<button class="p-2 rounded-full border border-purple-400 dark:border-purple-600 bg-purple-200 dark:bg-gray-700 text-purple-800 dark:text-purple-200 hover:bg-purple-300 dark:hover:bg-gray-600 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7 2a1 1 0 011 1v1h4V3a1 1 0 112 0v1h1a1 1 0 011 1v3.414l-1.707 1.707A1 1 0 0115 11.414V17a1 1 0 01-1 1H6a1 1 0 01-1-1v-5.586a1 1 0 01-.293-.707L3 8.414V5a1 1 0 011-1h1V3a1 1 0 112 0v1zM6 9h8V5H6v4z" clip-rule="evenodd" /></svg></button>
</div>
</h2>
<div class="flex-grow grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 mb-6">
<!-- Chart Placeholder 1 -->
<div class="bg-purple-50 dark:bg-gray-700 p-4 rounded-md border border-purple-200 dark:border-purple-600 shadow-inner flex flex-col items-center justify-center min-h-[180px] group-hover:scale-[1.01] transition-transform duration-200">
<h3 class="text-xl font-semibold text-purple-800 dark:text-purple-200 mb-2">Growth Projection</h3>
<img src="https://picsum.photos/300/200?random=1" alt="Growth Projection Chart" class="w-full h-auto object-cover rounded-md border border-purple-300 dark:border-purple-500 opacity-80 group-hover:opacity-100 transition-opacity">
</div>
<!-- Chart Placeholder 2 -->
<div class="bg-purple-50 dark:bg-gray-700 p-4 rounded-md border border-purple-200 dark:border-purple-600 shadow-inner flex flex-col items-center justify-center min-h-[180px] group-hover:scale-[1.01] transition-transform duration-200">
<h3 class="text-xl font-semibold text-purple-800 dark:text-purple-200 mb-2">Demographic Shift</h3>
<img src="https://picsum.photos/300/200?random=2" alt="Demographic Shift Chart" class="w-full h-auto object-cover rounded-md border border-purple-300 dark:border-purple-500 opacity-80 group-hover:opacity-100 transition-opacity">
</div>
<!-- Chart Placeholder 3 (Hidden on smaller viewports) -->
<div class="hidden xl:flex bg-purple-50 dark:bg-gray-700 p-4 rounded-md border border-purple-200 dark:border-purple-600 shadow-inner flex-col items-center justify-center min-h-[180px] group-hover:scale-[1.01] transition-transform duration-200">
<h3 class="text-xl font-semibold text-purple-800 dark:text-purple-200 mb-2">Competitor Landscape</h3>
<img src="https://picsum.photos/300/200?random=3" alt="Competitor Landscape Chart" class="w-full h-auto object-cover rounded-md border border-purple-300 dark:border-purple-500 opacity-80 group-hover:opacity-100 transition-opacity">
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-purple-200 dark:bg-gray-700 p-4 rounded-md border border-purple-300 dark:border-purple-600">
<h4 class="font-semibold text-purple-800 dark:text-purple-100 text-lg mb-2">Key Indicators</h4>
<ul class="list-none space-y-1 text-sm text-purple-700 dark:text-purple-200">
<li><span class="font-medium text-purple-900 dark:text-purple-50">Market Volume:</span> +12.3% YoY</li>
<li><span class="font-medium text-purple-900 dark:text-purple-50">Customer Acquisition:</span> 8.1% increase</li>
</ul>
</div>
<div class="bg-purple-200 dark:bg-gray-700 p-4 rounded-md border border-purple-300 dark:border-purple-600">
<h4 class="font-semibold text-purple-800 dark:text-purple-100 text-lg mb-2">Recommendations</h4>
<p class="text-sm text-purple-700 dark:text-purple-200">Optimize digital channels for targeted outreach. Diversify product offerings based on emerging trends.</p>
</div>
</div>
</section>
<!-- Side Panel (Span 4/12 - Desktop) -->
<aside class="md:col-span-4 flex flex-col space-y-6 sm:space-y-8">
<!-- Quick Stats Card -->
<div class="p-6 sm:p-8 bg-purple-100 dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 shadow-xl rounded-lg group transform hover:scale-[1.005] transition-transform duration-300">
<h2 class="text-2xl sm:text-3xl font-bold text-purple-900 dark:text-purple-100 mb-5">Operational Summary</h2>
<div class="grid grid-cols-2 gap-4 text-center">
<div class="p-4 bg-purple-200 dark:bg-gray-700 rounded-md border border-purple-300 dark:border-purple-600 group-hover:scale-[1.02] transition-transform duration-200">
<p class="text-4xl font-extrabold text-purple-800 dark:text-purple-200 mb-1">$1.2M</p>
<p class="text-purple-600 dark:text-purple-300 text-sm">Revenue Q3</p>
</div>
<div class="p-4 bg-purple-200 dark:bg-gray-700 rounded-md border border-purple-300 dark:border-purple-600 group-hover:scale-[1.02] transition-transform duration-200">
<p class="text-4xl font-extrabold text-purple-800 dark:text-purple-200 mb-1">2,500+</p>
<p class="text-purple-600 dark:text-purple-300 text-sm">Client Engagements</p>
</div>
<div class="p-4 bg-purple-200 dark:bg-gray-700 rounded-md border border-purple-300 dark:border-purple-600 col-span-2 group-hover:scale-[1.02] transition-transform duration-200">
<p class="text-4xl font-extrabold text-purple-800 dark:text-purple-200 mb-1">98%</p>
<p class="text-purple-600 dark:text-purple-300 text-sm">Client Satisfaction Score</p>
</div>
</div>
</div>
<!-- Recent Activities/Notifications Card -->
<div class="p-6 sm:p-8 bg-purple-100 dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 shadow-xl rounded-lg flex-grow overflow-hidden group transform hover:scale-[1.005] transition-transform duration-300">
<h2 class="text-2xl sm:text-3xl font-bold text-purple-900 dark:text-purple-100 mb-5">Recent Activities</h2>
<div class="overflow-y-auto max-h-64 sm:max-h-72 lg:max-h-96 pr-2">
<ul class="space-y-4">
<li class="flex items-start">
<img class="h-10 w-10 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-purple-800 dark:text-purple-200 font-semibold">Julian Thorne</p>
<p class="text-sm text-purple-700 dark:text-purple-300">Generated <span class="font-medium">'Q4 Performance Report'</span>.</p>
<time datetime="2023-10-26" class="text-xs text-purple-500 dark:text-purple-400">2 hours ago</time>
</div>
</li>
<li class="flex items-start">
<img class="h-10 w-10 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-purple-800 dark:text-purple-200 font-semibold">Eleanor Vance</p>
<p class="text-sm text-purple-700 dark:text-purple-300">Updated <span class="font-medium">'Client Portfolio Trends'</span> dashboard.</p>
<time datetime="2023-10-25" class="text-xs text-purple-500 dark:text-purple-400">Yesterday</time>
</div>
</li>
<li class="flex items-start">
<img class="h-10 w-10 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-purple-800 dark:text-purple-200 font-semibold">Marcus Finch</p>
<p class="text-sm text-purple-700 dark:text-purple-300">Completed <span class="font-medium">'Predictive Model A'</span> recalibration.</p>
<time datetime="2023-10-24" class="text-xs text-purple-500 dark:text-purple-400">2 days ago</time>
</div>
</li>
<li class="flex items-start">
<img class="h-10 w-10 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-purple-800 dark:text-purple-200 font-semibold">Olivia Reed</p>
<p class="text-sm text-purple-700 dark:text-purple-300">Initiated new project: <span class="font-medium">'Global Market Entry Strategy'</span>.</p>
<time datetime="2023-10-23" class="text-xs text-purple-500 dark:text-purple-400">3 days ago</time>
</div>
</li>
<li class="flex items-start">
<img class="h-10 w-10 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-purple-800 dark:text-purple-200 font-semibold">David Chen</p>
<p class="text-sm text-purple-700 dark:text-purple-300"> Reviewed 'Client Feedback Analysis'.</p>
<time datetime="2023-10-22" class="text-xs text-purple-500 dark:text-purple-400">4 days ago</time>
</div>
</li>
</ul>
</div>
</div>
</aside>
</main>
<footer class="relative z-10 text-center mt-10 md:mt-16 text-purple-600 dark:text-purple-400 text-sm opacity-80">
<p>© 2023 Nexus Analytics. All rights reserved. | <a href="#" class="underline hover:text-purple-700 dark:hover:text-purple-300">Privacy Policy</a></p>
</footer>
</div>관련 구성 요소
Data Visualization Components 구성 요소
전자 상거래를 위해 설계된 간단한 데이터 시각화 구성 요소로, 생생한 색상의 다크 모드 인터페이스를 특징으로 합니다.
Data Visualization Components 구성 요소
복잡하고 미니멀한 예약/예약 구성 요소로, 네온/일렉트릭 색상 구성표가 있으며, 달력 및 시간대 선택기와 같은 데이터 시각화 요소가 특징입니다. 다크 모드 지원으로 완벽하게 반응합니다.