480 lines
17 KiB
Plaintext
480 lines
17 KiB
Plaintext
---
|
|
// src/pages/index.astro - Main Homepage
|
|
import { getCollection } from 'astro:content';
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
import Header from '../components/Header.astro';
|
|
import Footer from '../components/Footer.astro';
|
|
import Terminal from '../components/Terminal.astro';
|
|
import PostCard from '../components/PostCard.astro';
|
|
import '../styles/card-animations.css';
|
|
|
|
const title = "ArgoBox | Enterprise-Grade Home Lab & DevOps Hub";
|
|
const description = "Community-driven platform for Kubernetes, infrastructure automation, and enterprise-grade home lab setups.";
|
|
|
|
// --- Data Fetching ---
|
|
|
|
// Get 3 most recent blog posts (non-draft)
|
|
const recentPosts = (await getCollection('posts'))
|
|
.filter(post => !post.data.draft)
|
|
.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime())
|
|
.slice(0, 3);
|
|
|
|
// Define Project Highlights Data (Example - adjust as needed)
|
|
const projectHighlights = [
|
|
{
|
|
title: "Home Lab Architecture",
|
|
description: "Enterprise-grade environment blueprints with Kubernetes, virtualization, and monitoring.",
|
|
url: "/architecture",
|
|
isExternal: false,
|
|
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>`,
|
|
tags: ["Proxmox", "Kubernetes", "pfSense"]
|
|
},
|
|
{
|
|
title: "DevOps Workflows",
|
|
description: "Continuous integration and deployment patterns for home and small business environments.",
|
|
url: "/workflows",
|
|
isExternal: false,
|
|
icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>`,
|
|
tags: ["GitOps", "CI/CD", "Automation"]
|
|
},
|
|
{
|
|
title: "IaC Templates",
|
|
description: "Ready-to-deploy infrastructure templates for modern tech stacks.",
|
|
url: "/resources/iac",
|
|
isExternal: false,
|
|
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline><line x1="12" y1="2" x2="12" y2="22"></line></svg>`,
|
|
tags: ["Terraform", "Ansible", "Kubernetes"]
|
|
}
|
|
];
|
|
|
|
// Define Commands for Hero Terminal
|
|
const heroCommands = [
|
|
{ prompt: "[user@argobox]$ ", command: "uname -a", output: ["Linux argobox 6.1.0-18-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.76-1 (2024-02-01) x86_64 GNU/Linux"] },
|
|
{ prompt: "[user@argobox]$ ", command: "ls -l /services", output: ["kubernetes/", "monitoring/", "gitops/", "media/"] },
|
|
{ prompt: "[user@argobox]$ ", command: "echo 'Welcome to ArgoBox Tech Hub!'", output: ["Welcome to ArgoBox Tech Hub!"] }
|
|
];
|
|
---
|
|
|
|
<BaseLayout {title} {description}>
|
|
<Header slot="header" />
|
|
|
|
<main class="homepage-main">
|
|
<!-- Hero Section with integrated mini graph -->
|
|
<section class="hero-section">
|
|
<div class="hero-bg"></div>
|
|
<div class="container">
|
|
<div class="hero-content">
|
|
<div class="hero-text">
|
|
<div class="hero-subtitle">Enterprise-Grade Home Lab Infrastructure</div>
|
|
<h1 class="hero-title">ArgoBox <span>Tech Hub</span></h1>
|
|
<p class="hero-description">
|
|
A community resource for building enterprise-quality infrastructure, automating DevOps workflows, and mastering Kubernetes in your home lab environment.
|
|
</p>
|
|
<div class="hero-cta">
|
|
<a href="/blog" class="cta-button primary">Explore Guides</a>
|
|
<a href="/blog#knowledge-graph" class="cta-button secondary">Discover Connections</a>
|
|
</div>
|
|
</div>
|
|
<div class="terminal-container">
|
|
<Terminal commands={heroCommands} title="argobox:~" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Intro Section - Reframed as community resource -->
|
|
<section class="intro-section section-padding">
|
|
<div class="container">
|
|
<h2 class="section-title">About ArgoBox</h2>
|
|
<p class="intro-text">
|
|
ArgoBox is a community-driven platform sharing infrastructure patterns, automation techniques, and practical guides for building professional-grade technology environments at any scale. From home labs to enterprise deployments, we focus on Kubernetes, GitOps, Infrastructure as Code, and system optimization. Created by the ArgoBox team to help technologists build better systems through shared knowledge and proven configurations.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Blog Posts -->
|
|
<section class="featured-posts-section section-padding alt-bg">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Latest Guides</h2>
|
|
<a href="/blog" class="view-all-link">View All Guides →</a>
|
|
</div>
|
|
<div class="posts-grid">
|
|
{recentPosts.map(post => (
|
|
<PostCard post={post} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Use Case Highlights (Formerly Project Highlights) -->
|
|
<section class="use-case-section section-padding">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Implementation Blueprints</h2>
|
|
<a href="/blueprints" class="view-all-link">View All Blueprints →</a>
|
|
</div>
|
|
<div class="resources-grid">
|
|
{projectHighlights.map(project => (
|
|
<a href={project.url} target={project.isExternal ? "_blank" : undefined} rel={project.isExternal ? "noopener noreferrer" : undefined} class="resource-card">
|
|
<div class="resource-icon-wrapper">
|
|
<div class="resource-icon" set:html={project.icon}></div>
|
|
<div class="resource-icon-particles">
|
|
<div class="resource-icon-particle"></div>
|
|
<div class="resource-icon-particle"></div>
|
|
<div class="resource-icon-particle"></div>
|
|
<div class="resource-icon-particle"></div>
|
|
<div class="resource-icon-particle"></div>
|
|
</div>
|
|
</div>
|
|
<div class="resource-content">
|
|
<h3 class="resource-title">{project.title}</h3>
|
|
<p class="resource-description">{project.description}</p>
|
|
<div class="resource-tags">
|
|
{project.tags.map(tag => <span class="resource-tag">{tag}</span>)}
|
|
</div>
|
|
</div>
|
|
<div class="shine-effect"></div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Resource Links -->
|
|
<section class="quick-links-section section-padding alt-bg">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Resources & Tools</h2>
|
|
</div>
|
|
<div class="quick-links-grid">
|
|
<a href="/resources" class="quick-link-card">
|
|
<div class="quick-link-icon">📄</div>
|
|
<h3 class="quick-link-title">Templates</h3>
|
|
<p class="quick-link-desc">Production-ready configurations and code snippets.</p>
|
|
</a>
|
|
<a href="/tech-stack" class="quick-link-card">
|
|
<div class="quick-link-icon">⚙️</div>
|
|
<h3 class="quick-link-title">Tech Stack</h3>
|
|
<p class="quick-link-desc">Curated tools and technologies for modern infrastructure.</p>
|
|
</a>
|
|
<a href="/blog" class="quick-link-card">
|
|
<div class="quick-link-icon">📝</div>
|
|
<h3 class="quick-link-title">Guide Library</h3>
|
|
<p class="quick-link-desc">Step-by-step implementation tutorials and best practices.</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Community Section - New -->
|
|
<section class="community-section section-padding">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Join the Community</h2>
|
|
<p class="section-description">Connect with fellow infrastructure enthusiasts and DevOps practitioners.</p>
|
|
</div>
|
|
<div class="community-container">
|
|
<div class="community-card">
|
|
<div class="community-icon">💬</div>
|
|
<h3 class="community-title">Discussion Forum</h3>
|
|
<p class="community-description">Ask questions, share your setups, and collaborate on solutions.</p>
|
|
<a href="/community" class="community-link">Join the Conversation</a>
|
|
</div>
|
|
<div class="community-card">
|
|
<div class="community-icon">🛠️</div>
|
|
<h3 class="community-title">GitHub Repository</h3>
|
|
<p class="community-description">Contribute to open-source infrastructure templates and tools.</p>
|
|
<a href="https://github.com/argobox" target="_blank" rel="noopener noreferrer" class="community-link">View Projects</a>
|
|
</div>
|
|
<div class="community-card">
|
|
<div class="community-icon">📨</div>
|
|
<h3 class="community-title">Newsletter</h3>
|
|
<p class="community-description">Get the latest guides, tips, and community highlights.</p>
|
|
<a href="/newsletter" class="community-link">Subscribe</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<Footer slot="footer" />
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
/* Core Styles - Keep existing styles */
|
|
.section-padding {
|
|
padding: 4rem 0;
|
|
}
|
|
.alt-bg {
|
|
background-color: var(--bg-secondary);
|
|
border-top: 1px solid var(--border-secondary);
|
|
border-bottom: 1px solid var(--border-secondary);
|
|
}
|
|
|
|
/* Hero Section - Enhanced for more tech focus */
|
|
.hero-section {
|
|
padding: 6rem 0 4rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
|
|
min-height: 85vh;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.hero-bg {
|
|
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
|
background-image:
|
|
radial-gradient(circle at 20% 35%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
|
|
radial-gradient(circle at 75% 15%, rgba(59, 130, 246, 0.15) 0%, transparent 45%),
|
|
radial-gradient(circle at 85% 70%, rgba(139, 92, 246, 0.15) 0%, transparent 40%);
|
|
z-index: -1;
|
|
}
|
|
|
|
.hero-bg::before {
|
|
content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
|
background-image:
|
|
linear-gradient(rgba(226, 232, 240, 0.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(226, 232, 240, 0.05) 1px, transparent 1px);
|
|
background-size: 30px 30px; pointer-events: none;
|
|
}
|
|
|
|
.hero-content { display: flex; align-items: center; gap: 4rem; }
|
|
.hero-text { flex: 1; }
|
|
.hero-subtitle {
|
|
font-family: var(--font-mono); color: var(--accent-primary); font-size: var(--font-size-sm);
|
|
letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1rem;
|
|
display: flex; align-items: center; gap: 0.5rem;
|
|
}
|
|
|
|
.hero-subtitle::before {
|
|
content: '>'; font-weight: bold;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; margin-bottom: 1.5rem; font-weight: 700;
|
|
}
|
|
|
|
.hero-title span {
|
|
background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary));
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
}
|
|
|
|
.hero-description { color: var(--text-secondary); font-size: var(--font-size-lg); margin-bottom: 2rem; max-width: 90%; }
|
|
.hero-cta { display: flex; gap: 1rem; }
|
|
.terminal-container { flex: 1; max-width: 550px; }
|
|
|
|
/* Intro Section - Adjusted for community focus */
|
|
.intro-section .section-title { text-align: center; margin-bottom: 1.5rem; }
|
|
.intro-text {
|
|
max-width: 900px; margin: 0 auto; text-align: center;
|
|
font-size: var(--font-size-lg); color: var(--text-secondary); line-height: 1.7;
|
|
}
|
|
|
|
/* Shared Section Styles */
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--border-secondary);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: var(--font-size-3xl);
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.section-description {
|
|
text-align: center;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-lg);
|
|
margin-top: -1.5rem;
|
|
margin-bottom: 2rem;
|
|
max-width: 700px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.view-all-link {
|
|
color: var(--accent-primary);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.view-all-link:hover { color: var(--accent-secondary); }
|
|
|
|
/* Featured Posts */
|
|
.posts-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
/* Use Case (Project) Highlights */
|
|
.resources-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.use-case-section .resource-card {
|
|
text-decoration: none;
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.use-case-section .resource-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.use-case-section .resource-card .resource-icon svg {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.use-case-section .resource-card .resource-title {
|
|
font-size: var(--font-size-xl);
|
|
margin: 1rem 0 0.5rem;
|
|
}
|
|
|
|
.use-case-section .resource-card .resource-description {
|
|
font-size: var(--font-size-sm);
|
|
margin-bottom: 1rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.use-case-section .resource-card .resource-tags {
|
|
margin-top: auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.resource-tag {
|
|
background: rgba(6, 182, 212, 0.1);
|
|
color: var(--accent-primary);
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.7rem;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* Quick Links */
|
|
.quick-links-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.quick-link-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border-primary);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.quick-link-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.quick-link-icon { font-size: 2rem; margin-bottom: 1rem; }
|
|
.quick-link-title { font-size: var(--font-size-lg); color: var(--text-primary); margin-bottom: 0.5rem; }
|
|
.quick-link-desc { font-size: var(--font-size-sm); color: var(--text-secondary); }
|
|
|
|
/* Community Section - New */
|
|
.community-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.community-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border-primary);
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.community-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.community-icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.community-title {
|
|
font-size: var(--font-size-xl);
|
|
margin-bottom: 1rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.community-description {
|
|
font-size: var(--font-size-md);
|
|
color: var(--text-secondary);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.community-link {
|
|
color: var(--accent-primary);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid var(--accent-primary);
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.community-link:hover {
|
|
background-color: var(--accent-primary);
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
/* Responsive Adjustments */
|
|
@media (max-width: 992px) {
|
|
.hero-content { flex-direction: column; text-align: center; }
|
|
.hero-text { order: 2; }
|
|
.terminal-container { order: 1; max-width: 100%; margin-bottom: 2rem; }
|
|
.hero-description { max-width: 100%; }
|
|
.hero-cta { justify-content: center; }
|
|
.community-container { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.section-padding { padding: 3rem 0; }
|
|
.hero-section { padding: 4rem 0 3rem; }
|
|
.hero-title { font-size: 2.5rem; }
|
|
.section-title { font-size: var(--font-size-2xl); }
|
|
.posts-grid, .resources-grid, .quick-links-grid { grid-template-columns: 1fr; }
|
|
.section-header { flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; }
|
|
.view-all-link { margin-top: 0.5rem; }
|
|
}
|
|
</style> |