360 lines
21 KiB
HTML
360 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tech Insights | Home</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.gradient-bg {
|
|
background: linear-gradient(120deg, #f0f9ff 0%, #e0f2fe 100%);
|
|
}
|
|
|
|
.prose {
|
|
max-width: none;
|
|
}
|
|
|
|
.prose h2 {
|
|
font-weight: 600;
|
|
margin-top: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
font-size: 1.875rem;
|
|
line-height: 2.25rem;
|
|
}
|
|
|
|
.prose p {
|
|
margin-bottom: 1.5rem;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.tag {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tag:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.article-card {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.article-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.featured-article {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.featured-article:hover {
|
|
transform: scale(1.02);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-white text-gray-800 antialiased">
|
|
<!-- Header -->
|
|
<header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b border-gray-200">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex items-center">
|
|
<a href="#" class="text-xl font-bold text-gray-900">TechInsights</a>
|
|
</div>
|
|
|
|
<nav class="hidden md:flex space-x-8">
|
|
<a href="#" class="text-gray-600 hover:text-blue-600 font-medium">Home</a>
|
|
<a href="#" class="text-gray-600 hover:text-blue-600 font-medium">Articles</a>
|
|
<a href="#" class="text-gray-600 hover:text-blue-600 font-medium">Topics</a>
|
|
<a href="#" class="text-gray-600 hover:text-blue-600 font-medium">About</a>
|
|
<a href="#" class="text-gray-600 hover:text-blue-600 font-medium">Contact</a>
|
|
</nav>
|
|
|
|
<div class="flex items-center space-x-4">
|
|
<button class="md:hidden text-gray-600">
|
|
<i class="fas fa-bars text-xl"></i>
|
|
</button>
|
|
<button class="hidden md:block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium">
|
|
Subscribe
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="gradient-bg py-12 md:py-16 lg:py-20">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">Exploring Technology's Impact on Work & Life</h1>
|
|
<p class="text-xl text-gray-700 mb-8">Insights, analysis and trends about how technology is shaping our future</p>
|
|
<div class="flex flex-wrap justify-center gap-3 mb-10">
|
|
<span class="tag bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">AI</span>
|
|
<span class="tag bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full">Remote Work</span>
|
|
<span class="tag bg-purple-100 text-purple-800 text-sm font-medium px-3 py-1 rounded-full">Productivity</span>
|
|
<span class="tag bg-yellow-100 text-yellow-800 text-sm font-medium px-3 py-1 rounded-full">Innovation</span>
|
|
<span class="tag bg-red-100 text-red-800 text-sm font-medium px-3 py-1 rounded-full">Web3</span>
|
|
</div>
|
|
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
|
|
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">Get Updates</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Articles -->
|
|
<section class="py-12 md:py-16">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Featured Articles</h2>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
|
|
<!-- Featured Article 1 -->
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-lg article-card">
|
|
<div class="featured-article">
|
|
<img src="https://images.unsplash.com/photo-1677442135135-416f8aa26a5b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="AI Technology" class="w-full h-64 object-cover">
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">AI</span>
|
|
<span class="bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">Future of Work</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">How Tech Shapes the Future of Work in 2024</h3>
|
|
<p class="text-gray-600 mb-4">Exploring the latest technological advancements and their impact on the modern workplace, from AI to remote collaboration tools.</p>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center text-sm text-gray-500">
|
|
<img src="https://i.pravatar.cc/24?img=5" alt="Author" class="rounded-full mr-2">
|
|
<span>Sarah Johnson</span>
|
|
<span class="mx-2">•</span>
|
|
<span>Oct 16, 2024</span>
|
|
</div>
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Read more →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Featured Article 2 -->
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-lg article-card">
|
|
<div class="featured-article">
|
|
<img src="https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="AI Ethics" class="w-full h-64 object-cover">
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2 py-1 rounded">AI</span>
|
|
<span class="bg-red-100 text-red-800 text-xs font-medium px-2 py-1 rounded">Ethics</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">The Ethics of Artificial Intelligence in Hiring</h3>
|
|
<p class="text-gray-600 mb-4">Exploring the benefits and potential pitfalls of using AI to recruit and evaluate candidates in the modern workplace.</p>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center text-sm text-gray-500">
|
|
<img src="https://i.pravatar.cc/24?img=8" alt="Author" class="rounded-full mr-2">
|
|
<span>Michael Chen</span>
|
|
<span class="mx-2">•</span>
|
|
<span>Sep 3, 2024</span>
|
|
</div>
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Read more →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
|
|
View all articles
|
|
<i class="fas fa-arrow-right ml-2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Latest Articles -->
|
|
<section class="py-12 md:py-16 bg-gray-50">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Latest Articles</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
|
<!-- Article 1 -->
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
|
|
<img src="https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Productivity" class="w-full h-48 object-cover">
|
|
<div class="p-6">
|
|
<div class="flex flex-wrap gap-2 mb-3">
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">Productivity</span>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-900 mb-3">10 Tools to Boost Your Productivity in 2024</h3>
|
|
<p class="text-gray-600 text-sm mb-4">Discover the latest apps and software that can help you work smarter, not harder.</p>
|
|
<div class="flex items-center justify-between text-sm text-gray-500">
|
|
<span>May 12, 2024</span>
|
|
<span>5 min read</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Article 2 -->
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
|
|
<img src="https://images.unsplash.com/photo-1533750349088-cd871a92f312?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Remote Work" class="w-full h-48 object-cover">
|
|
<div class="p-6">
|
|
<div class="flex flex-wrap gap-2 mb-3">
|
|
<span class="bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">Remote Work</span>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-900 mb-3">Building Company Culture in a Remote World</h3>
|
|
<p class="text-gray-600 text-sm mb-4">How forward-thinking companies are maintaining strong cultures with distributed teams.</p>
|
|
<div class="flex items-center justify-between text-sm text-gray-500">
|
|
<span>July 24, 2024</span>
|
|
<span>7 min read</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Article 3 -->
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
|
|
<img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Web3" class="w-full h-48 object-cover">
|
|
<div class="p-6">
|
|
<div class="flex flex-wrap gap-2 mb-3">
|
|
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2 py-1 rounded">Web3</span>
|
|
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-1 rounded">Blockchain</span>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-900 mb-3">Understanding Web3: The Next Evolution of the Internet</h3>
|
|
<p class="text-gray-600 text-sm mb-4">What businesses need to know about the decentralized web and its potential impact.</p>
|
|
<div class="flex items-center justify-between text-sm text-gray-500">
|
|
<span>Aug 5, 2024</span>
|
|
<span>9 min read</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
|
|
View more articles
|
|
<i class="fas fa-arrow-right ml-2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Popular Topics -->
|
|
<section class="py-12 md:py-16">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Explore Topics</h2>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-12">
|
|
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
|
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-3">
|
|
<i class="fas fa-robot text-blue-600 text-xl"></i>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-900">AI</span>
|
|
</a>
|
|
|
|
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
|
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-3">
|
|
<i class="fas fa-laptop-house text-green-600 text-xl"></i>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-900">Remote Work</span>
|
|
</a>
|
|
|
|
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
|
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-3">
|
|
<i class="fas fa-tachometer-alt text-purple-600 text-xl"></i>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-900">Productivity</span>
|
|
</a>
|
|
|
|
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
|
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-3">
|
|
<i class="fas fa-lightbulb text-yellow-600 text-xl"></i>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-900">Innovation</span>
|
|
</a>
|
|
|
|
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
|
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-3">
|
|
<i class="fas fa-code text-red-600 text-xl"></i>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-900">Development</span>
|
|
</a>
|
|
|
|
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
|
<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-3">
|
|
<i class="fas fa-link text-indigo-600 text-xl"></i>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-900">Web3</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
|
|
Browse all topics
|
|
<i class="fas fa-arrow-right ml-2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Newsletter -->
|
|
<section class="py-12 md:py-16 bg-blue-50">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-3xl mx-auto text-center">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">Stay Updated</h2>
|
|
<p class="text-gray-700 mb-6">Join our newsletter and get the latest insights on technology and the future of work delivered to your inbox.</p>
|
|
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
|
|
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">Subscribe</button>
|
|
</form>
|
|
<p class="text-sm text-gray-500 mt-4">No spam. Unsubscribe at any time.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-gray-900 text-white py-12">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
<div>
|
|
<h3 class="text-xl font-bold mb-4">TechInsights</h3>
|
|
<p class="text-gray-400">Exploring the future of work and technology through thoughtful analysis and commentary.</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold mb-4">Explore</h4>
|
|
<ul class="space-y-2">
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Articles</a></li>
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Topics</a></li>
|
|
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold mb-4">Topics</h4>
|
|
<ul class="space-y-2">
|
|
<li><a href="#" class="text-gray-400 hover:text-white">AI</a></li>
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Remote Work</a></li>
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Productivity</a></li>
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Web3</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold mb-4">Connect</h4>
|
|
<div class="flex space-x-4">
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin text-xl"></i></a>
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram text-xl"></i></a>
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github text-xl"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
|
<p>© 2024 TechInsights. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html> |