initial commit
This commit is contained in:
Mark
713
wireframe.html
Normal file
713
wireframe.html
Normal file
@@ -0,0 +1,713 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>No Hype AI | Honest Tech Reviews</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;700;900&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Icons (Lucide) -->
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
display: ['Space Grotesk', 'sans-serif'],
|
||||
mono: ['Fira Code', 'monospace'],
|
||||
},
|
||||
colors: {
|
||||
brand: {
|
||||
cyan: '#06b6d4', // Cyan 500
|
||||
cyanGlow: 'rgba(6, 182, 212, 0.4)',
|
||||
pink: '#ec4899', // Pink 500
|
||||
dark: '#09090b', // Zinc 950
|
||||
light: '#fafafa', // Zinc 50
|
||||
surfaceDark: '#18181b', // Zinc 900
|
||||
surfaceLight: '#ffffff'
|
||||
}
|
||||
},
|
||||
boxShadow: {
|
||||
'neon-cyan': '0 0 20px rgba(6, 182, 212, 0.3)',
|
||||
'neon-pink': '0 0 20px rgba(236, 72, 153, 0.3)',
|
||||
'solid-dark': '6px 6px 0px 0px #09090b',
|
||||
'solid-light': '6px 6px 0px 0px #e4e4e7',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Custom Styles & Utilities */
|
||||
body {
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Tech Dot Grid Background */
|
||||
.bg-grid-pattern {
|
||||
background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
.dark .bg-grid-pattern {
|
||||
background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
/* Page Transition Animations */
|
||||
.page-view {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition: opacity 0.4s ease, transform 0.4s ease;
|
||||
}
|
||||
.page-view.active {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Code Block Styling */
|
||||
pre {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
|
||||
}
|
||||
pre::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
}
|
||||
pre::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(156, 163, 175, 0.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Gradient Text */
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #06b6d4, #ec4899);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Custom Selection */
|
||||
::selection {
|
||||
background-color: #ec4899;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-brand-light dark:bg-brand-dark text-brand-dark dark:text-brand-light antialiased min-h-screen flex flex-col relative">
|
||||
|
||||
<!-- Background Grid -->
|
||||
<div class="fixed inset-0 bg-grid-pattern pointer-events-none z-[-1]"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="sticky top-0 z-50 backdrop-blur-md bg-brand-light/80 dark:bg-brand-dark/80 border-b border-zinc-200 dark:border-zinc-800 transition-colors">
|
||||
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
||||
<!-- Logo -->
|
||||
<a href="#" onclick="navigateTo('home')" class="group flex items-center gap-2">
|
||||
<div class="w-8 h-8 bg-brand-dark dark:bg-brand-light text-brand-light dark:text-brand-dark flex items-center justify-center font-display font-bold text-xl group-hover:rotate-12 transition-transform">
|
||||
/
|
||||
</div>
|
||||
<span class="font-display font-bold text-2xl tracking-tight">NO HYPE AI</span>
|
||||
</a>
|
||||
|
||||
<!-- Desktop Links -->
|
||||
<div class="hidden md:flex items-center gap-8 font-medium">
|
||||
<a href="#" onclick="navigateTo('home')" class="hover:text-brand-cyan transition-colors">Home</a>
|
||||
<a href="#" onclick="navigateTo('list')" class="hover:text-brand-cyan transition-colors">Articles</a>
|
||||
<a href="#" class="hover:text-brand-pink transition-colors">About</a>
|
||||
<a href="#" class="px-5 py-2.5 bg-brand-dark dark:bg-brand-light text-brand-light dark:text-brand-dark font-display font-bold hover:-translate-y-1 hover:shadow-solid-dark dark:hover:shadow-solid-light transition-all border border-transparent dark:border-zinc-700">Subscribe</a>
|
||||
</div>
|
||||
|
||||
<!-- Theme Toggle & Mobile Menu -->
|
||||
<div class="flex items-center gap-4">
|
||||
<button id="theme-toggle" class="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors" aria-label="Toggle Dark Mode">
|
||||
<i data-lucide="sun" class="w-5 h-5 hidden dark:block text-yellow-400"></i>
|
||||
<i data-lucide="moon" class="w-5 h-5 block dark:hidden text-zinc-700"></i>
|
||||
</button>
|
||||
<button class="md:hidden p-2">
|
||||
<i data-lucide="menu" class="w-6 h-6"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content Container -->
|
||||
<main class="flex-grow w-full max-w-7xl mx-auto px-6 py-8">
|
||||
|
||||
<!-- ==========================================
|
||||
PAGE: HOME
|
||||
========================================== -->
|
||||
<div id="page-home" class="page-view active">
|
||||
|
||||
<!-- Featured Article -->
|
||||
<section class="mb-12 md:mb-16">
|
||||
<div class="flex items-center gap-2 mb-6">
|
||||
<span class="w-2 h-2 rounded-full bg-brand-pink animate-pulse"></span>
|
||||
<span class="font-mono text-sm font-bold uppercase tracking-widest text-zinc-500">Featured Article</span>
|
||||
</div>
|
||||
|
||||
<article class="group cursor-pointer grid grid-cols-1 lg:grid-cols-2 gap-8 items-center bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 p-4 md:p-6 hover:border-brand-cyan dark:hover:border-brand-cyan hover:shadow-solid-dark dark:hover:shadow-solid-light transition-all duration-300" onclick="navigateTo('article')">
|
||||
<div class="w-full h-64 md:h-[400px] overflow-hidden relative bg-zinc-100 dark:bg-zinc-900 order-2 lg:order-1 border border-zinc-200 dark:border-zinc-800">
|
||||
<div class="absolute inset-0 bg-brand-cyan/20 mix-blend-overlay group-hover:bg-transparent transition-colors z-10"></div>
|
||||
<img src="https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?q=80&w=800&auto=format&fit=crop" alt="Code" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 group-hover:scale-105">
|
||||
</div>
|
||||
<div class="flex flex-col py-2 order-1 lg:order-2">
|
||||
<div class="flex gap-3 mb-4 items-center flex-wrap">
|
||||
<span class="text-xs font-mono font-bold px-2 py-1 bg-brand-cyan/10 text-brand-cyan">LLMs</span>
|
||||
<span class="text-xs font-mono font-bold px-2 py-1 bg-brand-pink/10 text-brand-pink">Frontend</span>
|
||||
<span class="text-sm font-mono text-zinc-500"><i data-lucide="clock" class="w-3 h-3 inline mr-1 -mt-0.5"></i>12 min read</span>
|
||||
</div>
|
||||
<h2 class="font-display font-black text-3xl md:text-5xl mb-4 group-hover:text-brand-cyan transition-colors leading-[1.1]">Claude 3.5 Sonnet vs. GPT-4o: React Benchmark</h2>
|
||||
<p class="text-zinc-600 dark:text-zinc-400 mb-8 text-lg md:text-xl line-clamp-3">We asked both models to build an authenticated dashboard from scratch. Read our full methodology and see which model provided the most reliable code.</p>
|
||||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-zinc-200 dark:border-zinc-800">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-none bg-gradient-to-tr from-brand-cyan to-brand-pink"></div>
|
||||
<div>
|
||||
<div class="text-sm font-bold font-display">Alex Chen</div>
|
||||
<div class="text-xs font-mono text-zinc-500">Oct 24, 2024</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-sm font-bold font-mono group-hover:text-brand-cyan transition-colors flex items-center gap-1">Read <i data-lucide="arrow-right" class="w-4 h-4"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<!-- 2-Column Editorial Layout -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
||||
|
||||
<!-- Main Feed -->
|
||||
<div class="lg:col-span-8">
|
||||
<div class="flex items-center justify-between mb-8 pb-4 border-b border-zinc-200 dark:border-zinc-800">
|
||||
<h3 class="font-display font-bold text-3xl">Latest Articles</h3>
|
||||
<button onclick="navigateTo('list')" class="font-mono text-sm text-brand-cyan hover:underline flex items-center gap-1">
|
||||
View All
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<!-- Article 1 -->
|
||||
<article class="group cursor-pointer flex flex-col md:flex-row gap-6 items-start pb-8 border-b border-zinc-200 dark:border-zinc-800 last:border-0" onclick="navigateTo('article')">
|
||||
<div class="w-full md:w-48 h-48 md:h-32 shrink-0 overflow-hidden relative bg-zinc-900 border border-zinc-200 dark:border-zinc-800 flex items-center justify-center">
|
||||
<i data-lucide="bot" class="w-12 h-12 text-brand-pink opacity-50 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></i>
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex gap-3 mb-2 items-center">
|
||||
<span class="text-xs font-mono font-bold px-2 py-1 bg-brand-pink/10 text-brand-pink">Agents</span>
|
||||
<span class="text-sm font-mono text-zinc-500">Oct 18</span>
|
||||
</div>
|
||||
<h4 class="font-display font-bold text-2xl mb-2 group-hover:text-brand-pink transition-colors">Evaluating Devin: An Autonomous Coding Agent</h4>
|
||||
<p class="text-zinc-600 dark:text-zinc-400 text-sm line-clamp-2 mb-3">A review of autonomous coding agents. We tested Devin on a legacy codebase to evaluate its real-world performance.</p>
|
||||
<span class="text-xs font-mono font-bold group-hover:text-brand-pink transition-colors mt-auto">Read article →</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Article 2 -->
|
||||
<article class="group cursor-pointer flex flex-col md:flex-row gap-6 items-start pb-8 border-b border-zinc-200 dark:border-zinc-800 last:border-0" onclick="navigateTo('article')">
|
||||
<div class="w-full md:w-48 h-48 md:h-32 shrink-0 overflow-hidden relative bg-[#0f172a] border border-zinc-200 dark:border-zinc-800 p-2 flex flex-col justify-end">
|
||||
<div class="font-mono text-[10px] leading-tight text-green-400 opacity-70 group-hover:opacity-100 transition-opacity">
|
||||
> ollama run llama3<br>
|
||||
> analyzing...<br>
|
||||
> generating fixes...
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex gap-3 mb-2 items-center">
|
||||
<span class="text-xs font-mono font-bold px-2 py-1 bg-zinc-800 text-white dark:bg-zinc-100 dark:text-black">Local AI</span>
|
||||
<span class="text-sm font-mono text-zinc-500">Oct 12</span>
|
||||
</div>
|
||||
<h4 class="font-display font-bold text-2xl mb-2 group-hover:text-zinc-500 transition-colors">Running Llama 3 Locally for Automated Code Reviews</h4>
|
||||
<p class="text-zinc-600 dark:text-zinc-400 text-sm line-clamp-2 mb-3">Learn how to set up a local pipeline that reviews your pull requests before merging, running entirely on a local machine.</p>
|
||||
<span class="text-xs font-mono font-bold group-hover:text-zinc-500 transition-colors mt-auto">Read article →</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Article 3 -->
|
||||
<article class="group cursor-pointer flex flex-col md:flex-row gap-6 items-start pb-8 border-b border-zinc-200 dark:border-zinc-800 last:border-0" onclick="navigateTo('article')">
|
||||
<div class="w-full md:w-48 h-48 md:h-32 shrink-0 overflow-hidden relative bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-800 flex items-center justify-center">
|
||||
<i data-lucide="eye" class="w-12 h-12 text-brand-cyan opacity-50 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></i>
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex gap-3 mb-2 items-center">
|
||||
<span class="text-xs font-mono font-bold px-2 py-1 bg-brand-cyan/10 text-brand-cyan">Vision</span>
|
||||
<span class="text-sm font-mono text-zinc-500">Oct 05</span>
|
||||
</div>
|
||||
<h4 class="font-display font-bold text-2xl mb-2 group-hover:text-brand-cyan transition-colors">Gemini 1.5 Pro vs GPT-4V: UI to Code Extraction</h4>
|
||||
<p class="text-zinc-600 dark:text-zinc-400 text-sm line-clamp-2 mb-3">Can you upload a Figma screenshot and get a functional React component? We tested 50 diverse UI patterns to find out.</p>
|
||||
<span class="text-xs font-mono font-bold group-hover:text-brand-cyan transition-colors mt-auto">Read article →</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="lg:col-span-4 space-y-8">
|
||||
|
||||
<!-- Sidebar: Newsletter -->
|
||||
<div class="bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 p-6 relative overflow-hidden group">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-brand-cyan to-brand-pink"></div>
|
||||
<h4 class="font-display font-bold text-xl mb-2">Weekly Newsletter</h4>
|
||||
<p class="text-zinc-600 dark:text-zinc-400 text-sm mb-4">Get our latest articles and coding benchmarks delivered to your inbox every week.</p>
|
||||
<form class="space-y-3" onsubmit="event.preventDefault();">
|
||||
<input type="email" placeholder="dev@example.com" class="w-full bg-transparent border border-zinc-300 dark:border-zinc-700 px-4 py-2 text-brand-dark dark:text-brand-light font-mono text-sm focus:outline-none focus:border-brand-pink transition-colors">
|
||||
<button type="submit" class="w-full bg-brand-dark text-brand-light dark:bg-brand-light dark:text-brand-dark font-display font-bold py-2 hover:bg-brand-pink dark:hover:bg-brand-pink hover:text-white transition-colors">
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar: Topics -->
|
||||
<div>
|
||||
<h4 class="font-display font-bold text-lg mb-4 uppercase tracking-widest text-zinc-500 text-sm">Explore Topics</h4>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<a href="#" class="px-3 py-1.5 border border-zinc-200 dark:border-zinc-800 text-sm font-mono hover:border-brand-cyan hover:text-brand-cyan transition-colors">#LLMs</a>
|
||||
<a href="#" class="px-3 py-1.5 border border-zinc-200 dark:border-zinc-800 text-sm font-mono hover:border-brand-pink hover:text-brand-pink transition-colors">#Agents</a>
|
||||
<a href="#" class="px-3 py-1.5 border border-zinc-200 dark:border-zinc-800 text-sm font-mono hover:border-brand-cyan hover:text-brand-cyan transition-colors">#Local_AI</a>
|
||||
<a href="#" class="px-3 py-1.5 border border-zinc-200 dark:border-zinc-800 text-sm font-mono hover:border-brand-pink hover:text-brand-pink transition-colors">#Frontend</a>
|
||||
<a href="#" class="px-3 py-1.5 border border-zinc-200 dark:border-zinc-800 text-sm font-mono hover:border-zinc-500 transition-colors">#RAG</a>
|
||||
<a href="#" class="px-3 py-1.5 border border-zinc-200 dark:border-zinc-800 text-sm font-mono hover:border-zinc-500 transition-colors">#Methodology</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar: Trending -->
|
||||
<div>
|
||||
<h4 class="font-display font-bold text-lg mb-4 uppercase tracking-widest text-zinc-500 text-sm">Popular Articles</h4>
|
||||
<ul class="space-y-4">
|
||||
<li class="group cursor-pointer" onclick="navigateTo('article')">
|
||||
<div class="flex gap-4 items-start">
|
||||
<span class="font-display font-black text-2xl text-zinc-300 dark:text-zinc-800 group-hover:text-brand-cyan transition-colors">01</span>
|
||||
<div>
|
||||
<h5 class="font-display font-bold text-md leading-tight group-hover:text-brand-cyan transition-colors">Can ChatGPT Write Secure Smart Contracts?</h5>
|
||||
<div class="text-xs font-mono text-zinc-500 mt-1">18 min read</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="group cursor-pointer" onclick="navigateTo('article')">
|
||||
<div class="flex gap-4 items-start">
|
||||
<span class="font-display font-black text-2xl text-zinc-300 dark:text-zinc-800 group-hover:text-brand-pink transition-colors">02</span>
|
||||
<div>
|
||||
<h5 class="font-display font-bold text-md leading-tight group-hover:text-brand-pink transition-colors">Cursor vs GitHub Copilot: 30-Day Dev Log</h5>
|
||||
<div class="text-xs font-mono text-zinc-500 mt-1">24 min read</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="group cursor-pointer" onclick="navigateTo('article')">
|
||||
<div class="flex gap-4 items-start">
|
||||
<span class="font-display font-black text-2xl text-zinc-300 dark:text-zinc-800 group-hover:text-brand-cyan transition-colors">03</span>
|
||||
<div>
|
||||
<h5 class="font-display font-bold text-md leading-tight group-hover:text-brand-cyan transition-colors">The Cost of RAG: Optimizing Token Usage</h5>
|
||||
<div class="text-xs font-mono text-zinc-500 mt-1">9 min read</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ==========================================
|
||||
PAGE: ARTICLE LIST
|
||||
========================================== -->
|
||||
<div id="page-list" class="page-view">
|
||||
<div class="py-8 md:py-12 border-b border-zinc-200 dark:border-zinc-800 mb-12">
|
||||
<h1 class="font-display font-black text-4xl md:text-6xl mb-6">Articles</h1>
|
||||
|
||||
<!-- Filters / Search -->
|
||||
<div class="flex flex-col md:flex-row justify-between gap-6">
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<button class="px-4 py-2 bg-brand-dark text-brand-light dark:bg-brand-light dark:text-brand-dark font-mono text-sm font-bold border border-transparent">All</button>
|
||||
<button class="px-4 py-2 bg-transparent text-zinc-600 dark:text-zinc-400 hover:text-brand-dark dark:hover:text-brand-light font-mono text-sm border border-zinc-300 dark:border-zinc-700 hover:border-brand-dark dark:hover:border-brand-light transition-colors">LLMs</button>
|
||||
<button class="px-4 py-2 bg-transparent text-zinc-600 dark:text-zinc-400 hover:text-brand-dark dark:hover:text-brand-light font-mono text-sm border border-zinc-300 dark:border-zinc-700 hover:border-brand-dark dark:hover:border-brand-light transition-colors">Agents</button>
|
||||
<button class="px-4 py-2 bg-transparent text-zinc-600 dark:text-zinc-400 hover:text-brand-dark dark:hover:text-brand-light font-mono text-sm border border-zinc-300 dark:border-zinc-700 hover:border-brand-dark dark:hover:border-brand-light transition-colors">Local Models</button>
|
||||
<button class="px-4 py-2 bg-transparent text-zinc-600 dark:text-zinc-400 hover:text-brand-dark dark:hover:text-brand-light font-mono text-sm border border-zinc-300 dark:border-zinc-700 hover:border-brand-dark dark:hover:border-brand-light transition-colors">Vision</button>
|
||||
</div>
|
||||
<div class="relative w-full md:w-64">
|
||||
<i data-lucide="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-zinc-400"></i>
|
||||
<input type="text" placeholder="Search tests..." class="w-full bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-300 dark:border-zinc-700 pl-10 pr-4 py-2 font-mono text-sm focus:outline-none focus:border-brand-cyan dark:focus:border-brand-cyan focus:ring-1 focus:ring-brand-cyan transition-shadow">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List Layout -->
|
||||
<div class="space-y-8">
|
||||
<!-- List Item 1 -->
|
||||
<article class="group flex flex-col md:flex-row gap-8 items-center bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 p-4 hover:border-brand-cyan dark:hover:border-brand-cyan transition-colors cursor-pointer" onclick="navigateTo('article')">
|
||||
<div class="w-full md:w-1/3 h-48 md:h-full min-h-[200px] overflow-hidden relative bg-zinc-100 dark:bg-zinc-900 shrink-0">
|
||||
<img src="https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?q=80&w=800&auto=format&fit=crop" alt="Code" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
|
||||
</div>
|
||||
<div class="flex flex-col py-2 w-full">
|
||||
<div class="flex gap-3 mb-4 items-center">
|
||||
<span class="text-xs font-mono font-bold px-2 py-1 bg-brand-cyan/10 text-brand-cyan">LLMs</span>
|
||||
<span class="text-sm font-mono text-zinc-500">Oct 24, 2024</span>
|
||||
</div>
|
||||
<h2 class="font-display font-bold text-2xl md:text-3xl mb-3 group-hover:text-brand-cyan transition-colors">Claude 3.5 Sonnet vs. GPT-4o: React Benchmark</h2>
|
||||
<p class="text-zinc-600 dark:text-zinc-400 mb-6 max-w-2xl line-clamp-2">We asked both models to build an authenticated dashboard from scratch. Read our full methodology and see which model provided the most reliable code.</p>
|
||||
<div class="flex items-center gap-2 mt-auto text-sm font-bold font-mono group-hover:text-brand-cyan transition-colors">
|
||||
Read Article <i data-lucide="arrow-up-right" class="w-4 h-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- List Item 2 -->
|
||||
<article class="group flex flex-col md:flex-row gap-8 items-center bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 p-4 hover:border-brand-pink dark:hover:border-brand-pink transition-colors cursor-pointer" onclick="navigateTo('article')">
|
||||
<div class="w-full md:w-1/3 h-48 md:h-full min-h-[200px] overflow-hidden relative bg-zinc-900 flex items-center justify-center shrink-0">
|
||||
<i data-lucide="bot" class="w-20 h-20 text-brand-pink opacity-50 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></i>
|
||||
</div>
|
||||
<div class="flex flex-col py-2 w-full">
|
||||
<div class="flex gap-3 mb-4 items-center">
|
||||
<span class="text-xs font-mono font-bold px-2 py-1 bg-brand-pink/10 text-brand-pink">Agents</span>
|
||||
<span class="text-sm font-mono text-zinc-500">Oct 18, 2024</span>
|
||||
</div>
|
||||
<h2 class="font-display font-bold text-2xl md:text-3xl mb-3 group-hover:text-brand-pink transition-colors">Evaluating Devin: An Autonomous Coding Agent</h2>
|
||||
<p class="text-zinc-600 dark:text-zinc-400 mb-6 max-w-2xl line-clamp-2">A review of autonomous coding agents. We tested Devin on a legacy codebase to evaluate its real-world performance.</p>
|
||||
<div class="flex items-center gap-2 mt-auto text-sm font-bold font-mono group-hover:text-brand-pink transition-colors">
|
||||
Read Article <i data-lucide="arrow-up-right" class="w-4 h-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- List Item 3 -->
|
||||
<article class="group flex flex-col md:flex-row gap-8 items-center bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 p-4 hover:border-zinc-400 dark:hover:border-zinc-400 transition-colors cursor-pointer" onclick="navigateTo('article')">
|
||||
<div class="w-full md:w-1/3 h-48 md:h-full min-h-[200px] overflow-hidden relative bg-[#0f172a] shrink-0 p-4 flex flex-col justify-end">
|
||||
<div class="font-mono text-xs text-green-400 opacity-70 group-hover:opacity-100 transition-opacity">
|
||||
> ollama run llama3<br>
|
||||
> analyzing repository...<br>
|
||||
> found 42 vulnerabilities<br>
|
||||
> generating fixes...
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col py-2 w-full">
|
||||
<div class="flex gap-3 mb-4 items-center">
|
||||
<span class="text-xs font-mono font-bold px-2 py-1 bg-zinc-800 text-white dark:bg-zinc-100 dark:text-black">Local AI</span>
|
||||
<span class="text-sm font-mono text-zinc-500">Oct 12, 2024</span>
|
||||
</div>
|
||||
<h2 class="font-display font-bold text-2xl md:text-3xl mb-3 group-hover:text-zinc-500 transition-colors">Running Llama 3 Locally for Automated Code Reviews</h2>
|
||||
<p class="text-zinc-600 dark:text-zinc-400 mb-6 max-w-2xl line-clamp-2">Learn how to set up a local pipeline that reviews your pull requests before merging, running entirely on a local machine.</p>
|
||||
<div class="flex items-center gap-2 mt-auto text-sm font-bold font-mono group-hover:text-zinc-500 transition-colors">
|
||||
Read Article <i data-lucide="arrow-up-right" class="w-4 h-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 flex justify-center">
|
||||
<button class="px-6 py-3 border border-zinc-300 dark:border-zinc-700 font-mono text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors">Load More Articles</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ==========================================
|
||||
PAGE: ARTICLE READ
|
||||
========================================== -->
|
||||
<div id="page-article" class="page-view">
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<div class="mb-8 font-mono text-sm text-zinc-500">
|
||||
<a href="#" onclick="navigateTo('home')" class="hover:text-brand-cyan transition-colors">Home</a> /
|
||||
<a href="#" onclick="navigateTo('list')" class="hover:text-brand-cyan transition-colors">Articles</a> /
|
||||
<span class="text-brand-dark dark:text-brand-light">Claude vs GPT-4o</span>
|
||||
</div>
|
||||
|
||||
<!-- Article Header -->
|
||||
<header class="mb-12 border-b border-zinc-200 dark:border-zinc-800 pb-12">
|
||||
<div class="flex gap-3 mb-6 items-center">
|
||||
<span class="text-xs font-mono font-bold px-2 py-1 bg-brand-cyan/10 text-brand-cyan border border-brand-cyan/20">LLMs</span>
|
||||
<span class="text-xs font-mono font-bold px-2 py-1 bg-brand-pink/10 text-brand-pink border border-brand-pink/20">Frontend</span>
|
||||
<span class="text-sm font-mono text-zinc-500"><i data-lucide="calendar" class="w-4 h-4 inline mr-1 -mt-1"></i> Oct 24, 2024</span>
|
||||
<span class="text-sm font-mono text-zinc-500"><i data-lucide="clock" class="w-4 h-4 inline mr-1 -mt-1"></i> 12 min read</span>
|
||||
</div>
|
||||
|
||||
<h1 class="font-display font-black text-4xl md:text-6xl lg:text-7xl leading-tight mb-8">
|
||||
Claude 3.5 Sonnet vs. GPT-4o: React Benchmark
|
||||
</h1>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-none bg-gradient-to-tr from-brand-cyan to-brand-pink"></div>
|
||||
<div>
|
||||
<div class="font-bold font-display text-lg">Alex Chen</div>
|
||||
<div class="font-mono text-xs text-zinc-500">Senior Engineer / Editor</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Layout: Content + Sticky Sidebar -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
||||
|
||||
<!-- Article Body -->
|
||||
<article class="lg:col-span-8 prose prose-lg dark:prose-invert max-w-none prose-headings:font-display prose-headings:font-bold prose-a:text-brand-cyan hover:prose-a:text-brand-pink prose-a:transition-colors prose-img:border prose-img:border-zinc-200 dark:prose-img:border-zinc-800">
|
||||
|
||||
<p class="lead text-xl md:text-2xl text-zinc-600 dark:text-zinc-400 font-medium mb-8">
|
||||
With the rapid release of new AI models, it can be difficult to determine which performs best for real-world tasks. We built an automated benchmark to test them.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The prompt was simple but demanding. We provided zero architectural constraints beyond requiring React, Tailwind, and a mock authentication flow. We wanted to see how the models structure a project from scratch when left entirely to their own devices.
|
||||
</p>
|
||||
|
||||
<h2 class="text-3xl mt-12 mb-6">The Methodology</h2>
|
||||
<p>
|
||||
We ran the exact same zero-shot prompt through the API of both models. Temperature was set to <code>0.2</code> to reduce variance while allowing slight creative freedom in UI design.
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Prompt Length:</strong> ~450 words</li>
|
||||
<li><strong>Key Requirements:</strong> Context API for state, Tailwind for styling, mocked JWT auth flow, responsive dashboard layout.</li>
|
||||
<li><strong>Evaluation metric:</strong> Pass/Fail on compiling without errors, followed by a manual UX heuristic review.</li>
|
||||
</ul>
|
||||
|
||||
<blockquote class="border-l-4 border-brand-pink pl-6 py-2 my-8 italic bg-brand-pink/5 text-zinc-700 dark:text-zinc-300">
|
||||
"GPT-4o gave us a polished UI but hallucinated a dependency. Claude 3.5 Sonnet gave us a functional UI, and the code worked flawlessly on the first paste."
|
||||
</blockquote>
|
||||
|
||||
<h2 class="text-3xl mt-12 mb-6">GPT-4o: Polished UI, but Hallucinated Dependencies</h2>
|
||||
<p>
|
||||
GPT-4o writes code that looks visually impressive. Its Tailwind usage is sophisticated, utilizing complex grid layouts and modern utility combinations. However, it made a critical error in state management.
|
||||
</p>
|
||||
|
||||
<!-- Mock Code Block inside article -->
|
||||
<div class="my-8 rounded-md overflow-hidden bg-[#0d1117] border border-zinc-800 shadow-xl">
|
||||
<div class="flex items-center justify-between px-4 py-2 bg-[#161b22] border-b border-zinc-800">
|
||||
<div class="flex gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="font-mono text-xs text-zinc-500">AuthContext.jsx (GPT-4o Output)</div>
|
||||
<button class="text-zinc-500 hover:text-white transition-colors"><i data-lucide="copy" class="w-4 h-4"></i></button>
|
||||
</div>
|
||||
<div class="p-6 overflow-x-auto text-sm font-mono text-zinc-300">
|
||||
<pre><code><span class="text-brand-pink">import</span> { createContext, useContext, useReducer } <span class="text-brand-pink">from</span> <span class="text-brand-cyan">'react'</span>;
|
||||
<span class="text-brand-pink">import</span> { fakeAuthApi } <span class="text-brand-pink">from</span> <span class="text-brand-cyan">'@mock/api'</span>; <span class="text-zinc-500">// ERROR: Hallucinated import</span>
|
||||
|
||||
<span class="text-brand-pink">const</span> AuthContext = createContext(<span class="text-brand-cyan">null</span>);
|
||||
|
||||
<span class="text-brand-pink">export const</span> AuthProvider = ({ children }) => {
|
||||
<span class="text-brand-pink">const</span> [state, dispatch] = useReducer(authReducer, initialState);
|
||||
|
||||
<span class="text-brand-pink">const</span> login = <span class="text-brand-pink">async</span> (email, password) => {
|
||||
<span class="text-brand-pink">const</span> user = <span class="text-brand-pink">await</span> fakeAuthApi.login(email, password);
|
||||
dispatch({ <span class="text-brand-cyan">type</span>: <span class="text-brand-cyan">'LOGIN_SUCCESS'</span>, <span class="text-brand-cyan">payload</span>: user });
|
||||
};
|
||||
<span class="text-zinc-500">// ... rest of the context</span></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Notice line 2. It assumed the existence of a <code>@mock/api</code> package instead of building the mock function inline as requested. This caused an immediate build failure.
|
||||
</p>
|
||||
|
||||
<h2 class="text-3xl mt-12 mb-6">Claude 3.5 Sonnet: Self-Contained and Functional</h2>
|
||||
<p>
|
||||
Claude took a different approach. It built the mock infrastructure inline, ensuring the file was self-contained and runnable immediately. It properly isolated concerns and even added JSDoc comments to the mock functions.
|
||||
</p>
|
||||
<p>
|
||||
While its UI was slightly more basic (relying heavily on standard flexboxes rather than advanced CSS grids), it scored a perfect 1.0 on our strict compilation test.
|
||||
</p>
|
||||
|
||||
<div class="bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 p-6 my-8 flex items-start gap-4">
|
||||
<i data-lucide="trophy" class="w-8 h-8 text-brand-cyan shrink-0 mt-1"></i>
|
||||
<div>
|
||||
<h4 class="font-display font-bold text-xl mb-2 mt-0">Conclusion: Claude 3.5 Sonnet Provides Better Out-of-the-Box Code</h4>
|
||||
<p class="mb-0 text-sm">For zero-shot scaffolding of complex React architecture without human intervention, Claude's prioritization of self-contained logic over UI flair makes it a more reliable choice for developers.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
<!-- Sidebar (Tags, Share) -->
|
||||
<aside class="lg:col-span-4 space-y-8">
|
||||
<div class="sticky top-28">
|
||||
|
||||
<!-- Share -->
|
||||
<div class="mb-8">
|
||||
<h3 class="font-display font-bold text-lg mb-4 uppercase tracking-widest text-zinc-500 text-sm">Share Article</h3>
|
||||
<div class="flex gap-2">
|
||||
<button class="w-10 h-10 flex items-center justify-center bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 hover:border-brand-cyan transition-colors hover:text-brand-cyan">
|
||||
<i data-lucide="twitter" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 hover:border-blue-600 transition-colors hover:text-blue-600">
|
||||
<i data-lucide="linkedin" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 hover:border-brand-pink transition-colors hover:text-brand-pink">
|
||||
<i data-lucide="link-2" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter Promo -->
|
||||
<div class="bg-brand-dark text-brand-light dark:bg-brand-light dark:text-brand-dark p-6 border border-transparent dark:border-zinc-700 shadow-solid-dark dark:shadow-solid-light">
|
||||
<h3 class="font-display font-bold text-xl mb-2">Subscribe for Updates</h3>
|
||||
<p class="text-sm opacity-80 mb-6">Get our latest articles and coding benchmarks delivered to your inbox every week.</p>
|
||||
<form class="space-y-3" onsubmit="event.preventDefault();">
|
||||
<input type="email" placeholder="dev@example.com" class="w-full bg-brand-surfaceDark dark:bg-white border border-zinc-700 dark:border-zinc-300 px-4 py-2 text-brand-light dark:text-brand-dark font-mono text-sm focus:outline-none focus:border-brand-cyan">
|
||||
<button type="submit" class="w-full bg-brand-cyan text-brand-dark font-display font-bold py-2 hover:bg-brand-pink transition-colors">
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Related Articles Section -->
|
||||
<section class="mt-16 md:mt-24 pt-12 border-t border-zinc-200 dark:border-zinc-800">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h3 class="font-display font-bold text-3xl">Related Articles</h3>
|
||||
<button onclick="navigateTo('list')" class="font-mono text-sm text-brand-cyan hover:underline flex items-center gap-1">
|
||||
View All
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Related Card 1 -->
|
||||
<article class="group cursor-pointer flex flex-col h-full bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 hover:-translate-y-2 hover:shadow-solid-dark dark:hover:shadow-solid-light transition-all duration-300" onclick="navigateTo('article')">
|
||||
<div class="h-48 overflow-hidden relative bg-zinc-900 flex items-center justify-center border-b border-zinc-200 dark:border-zinc-800 shrink-0">
|
||||
<i data-lucide="bot" class="w-16 h-16 text-brand-pink opacity-50 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></i>
|
||||
</div>
|
||||
<div class="p-6 flex flex-col flex-grow">
|
||||
<div class="flex gap-2 mb-3">
|
||||
<span class="text-xs font-mono font-bold px-2 py-1 bg-brand-pink/10 text-brand-pink">Agents</span>
|
||||
</div>
|
||||
<h4 class="font-display font-bold text-xl mb-2 group-hover:text-brand-pink transition-colors">Evaluating Devin: An Autonomous Coding Agent</h4>
|
||||
<p class="text-zinc-600 dark:text-zinc-400 text-sm mb-6 line-clamp-2">A review of autonomous coding agents. We tested Devin on a legacy codebase to evaluate its real-world performance.</p>
|
||||
<div class="mt-auto pt-4 border-t border-zinc-100 dark:border-zinc-800 flex items-center gap-2 text-sm font-bold font-mono group-hover:text-brand-pink transition-colors">
|
||||
Read Article <i data-lucide="arrow-up-right" class="w-4 h-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Related Card 2 -->
|
||||
<article class="group cursor-pointer flex flex-col h-full bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 hover:-translate-y-2 hover:shadow-solid-dark dark:hover:shadow-solid-light transition-all duration-300" onclick="navigateTo('article')">
|
||||
<div class="h-48 overflow-hidden relative bg-[#0f172a] p-4 flex flex-col justify-end border-b border-zinc-200 dark:border-zinc-800 shrink-0">
|
||||
<div class="font-mono text-[10px] leading-tight text-green-400 opacity-70 group-hover:opacity-100 transition-opacity">
|
||||
> ollama run llama3<br>
|
||||
> analyzing...<br>
|
||||
> generating fixes...
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 flex flex-col flex-grow">
|
||||
<div class="flex gap-2 mb-3">
|
||||
<span class="text-xs font-mono font-bold px-2 py-1 bg-zinc-800 text-white dark:bg-zinc-100 dark:text-black">Local AI</span>
|
||||
</div>
|
||||
<h4 class="font-display font-bold text-xl mb-2 group-hover:text-zinc-500 transition-colors">Running Llama 3 Locally for Automated Code Reviews</h4>
|
||||
<p class="text-zinc-600 dark:text-zinc-400 text-sm mb-6 line-clamp-2">Learn how to set up a local pipeline that reviews your pull requests before merging, running entirely on a local machine.</p>
|
||||
<div class="mt-auto pt-4 border-t border-zinc-100 dark:border-zinc-800 flex items-center gap-2 text-sm font-bold font-mono group-hover:text-zinc-500 transition-colors">
|
||||
Read Article <i data-lucide="arrow-up-right" class="w-4 h-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Related Card 3 -->
|
||||
<article class="group cursor-pointer flex flex-col h-full bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 hover:-translate-y-2 hover:shadow-solid-dark dark:hover:shadow-solid-light transition-all duration-300" onclick="navigateTo('article')">
|
||||
<div class="h-48 overflow-hidden relative bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center border-b border-zinc-200 dark:border-zinc-800 shrink-0">
|
||||
<i data-lucide="eye" class="w-16 h-16 text-brand-cyan opacity-50 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></i>
|
||||
</div>
|
||||
<div class="p-6 flex flex-col flex-grow">
|
||||
<div class="flex gap-2 mb-3">
|
||||
<span class="text-xs font-mono font-bold px-2 py-1 bg-brand-cyan/10 text-brand-cyan">Vision</span>
|
||||
</div>
|
||||
<h4 class="font-display font-bold text-xl mb-2 group-hover:text-brand-cyan transition-colors">Gemini 1.5 Pro vs GPT-4V: UI to Code Extraction</h4>
|
||||
<p class="text-zinc-600 dark:text-zinc-400 text-sm mb-6 line-clamp-2">Can you upload a Figma screenshot and get a functional React component? We tested 50 diverse UI patterns to find out.</p>
|
||||
<div class="mt-auto pt-4 border-t border-zinc-100 dark:border-zinc-800 flex items-center gap-2 text-sm font-bold font-mono group-hover:text-brand-cyan transition-colors">
|
||||
Read Article <i data-lucide="arrow-up-right" class="w-4 h-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-zinc-200 dark:border-zinc-800 bg-brand-light dark:bg-brand-dark mt-12 py-12 text-center md:text-left">
|
||||
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div class="md:col-span-2">
|
||||
<a href="#" class="font-display font-bold text-2xl tracking-tight mb-4 inline-block">NO HYPE AI</a>
|
||||
<p class="text-zinc-500 font-mono text-sm max-w-sm mx-auto md:mx-0">
|
||||
In-depth reviews and benchmarks of the latest AI coding tools.<br>
|
||||
Honest analysis for developers.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-display font-bold mb-4 uppercase text-sm tracking-widest text-zinc-400">Navigation</h4>
|
||||
<ul class="space-y-2 font-mono text-sm text-zinc-500">
|
||||
<li><a href="#" onclick="navigateTo('home')" class="hover:text-brand-cyan transition-colors">Home</a></li>
|
||||
<li><a href="#" onclick="navigateTo('list')" class="hover:text-brand-cyan transition-colors">Articles</a></li>
|
||||
<li><a href="#" class="hover:text-brand-pink transition-colors">Methodology</a></li>
|
||||
<li><a href="#" class="hover:text-brand-pink transition-colors">About Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-display font-bold mb-4 uppercase text-sm tracking-widest text-zinc-400">Connect</h4>
|
||||
<ul class="space-y-2 font-mono text-sm text-zinc-500">
|
||||
<li><a href="#" class="hover:text-brand-cyan transition-colors flex items-center justify-center md:justify-start gap-2"><i data-lucide="twitter" class="w-4 h-4"></i> Twitter (X)</a></li>
|
||||
<li><a href="#" class="hover:text-brand-cyan transition-colors flex items-center justify-center md:justify-start gap-2"><i data-lucide="github" class="w-4 h-4"></i> GitHub</a></li>
|
||||
<li><a href="#" class="hover:text-brand-cyan transition-colors flex items-center justify-center md:justify-start gap-2"><i data-lucide="rss" class="w-4 h-4"></i> RSS Feed</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto px-6 mt-12 pt-8 border-t border-zinc-200 dark:border-zinc-800 text-center font-mono text-xs text-zinc-500 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p>© 2026 No Hype AI. All rights reserved.</p>
|
||||
<p>Designed with <span class="text-brand-pink">♥</span> by AI.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
// Initialize Lucide Icons
|
||||
lucide.createIcons();
|
||||
|
||||
// Simple SPA Navigation Logic
|
||||
function navigateTo(pageId) {
|
||||
// Hide all pages
|
||||
document.querySelectorAll('.page-view').forEach(page => {
|
||||
page.classList.remove('active');
|
||||
});
|
||||
|
||||
// Short timeout to allow fade out before showing new page
|
||||
setTimeout(() => {
|
||||
const targetPage = document.getElementById(`page-${pageId}`);
|
||||
if (targetPage) {
|
||||
targetPage.classList.add('active');
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// Dark Mode Toggle Logic
|
||||
const htmlElement = document.documentElement;
|
||||
const themeToggleBtn = document.getElementById('theme-toggle');
|
||||
|
||||
// Check for saved theme preference or use system preference (default dark)
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
if (savedTheme === 'light') {
|
||||
htmlElement.classList.remove('dark');
|
||||
} else if (!savedTheme) {
|
||||
// Force dark mode default for the "cool tech" aesthetic
|
||||
htmlElement.classList.add('dark');
|
||||
}
|
||||
|
||||
themeToggleBtn.addEventListener('click', () => {
|
||||
if (htmlElement.classList.contains('dark')) {
|
||||
htmlElement.classList.remove('dark');
|
||||
localStorage.setItem('theme', 'light');
|
||||
} else {
|
||||
htmlElement.classList.add('dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user