688 lines
21 KiB
Plaintext
688 lines
21 KiB
Plaintext
---
|
|
// src/pages/tech-stack.astro
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
import '../styles/card-animations.css';
|
|
import Header from '../components/Header.astro';
|
|
import Footer from '../components/Footer.astro';
|
|
|
|
const title = "Tech Stack | LaForceIT";
|
|
const description = "Explore the technology stack that powers LaForceIT projects, infrastructure, and home lab environment.";
|
|
|
|
// Define tech categories
|
|
const techCategories = [
|
|
{
|
|
name: "Infrastructure & Hosting",
|
|
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>`,
|
|
filter: "infrastructure",
|
|
technologies: [
|
|
{
|
|
name: "Proxmox VE",
|
|
description: "Hypervisor for virtualization and container management",
|
|
url: "https://www.proxmox.com/en/proxmox-ve",
|
|
},
|
|
{
|
|
name: "TrueNAS Scale",
|
|
description: "Storage platform with built-in virtualization capabilities",
|
|
url: "https://www.truenas.com/truenas-scale/",
|
|
},
|
|
{
|
|
name: "pfSense",
|
|
description: "Open source firewall/router with advanced features",
|
|
url: "https://www.pfsense.org/",
|
|
},
|
|
{
|
|
name: "UniFi Network",
|
|
description: "Enterprise-grade networking equipment and management",
|
|
url: "https://ui.com/",
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: "Container Orchestration",
|
|
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"><path d="M12 2L3 7l9 5 9-5-9-5z"></path><path d="M3 7v10l9 5 9-5V7"></path><line x1="13.73" y1="21.755" x2="20.95" y2="16.265"></line><line x1="3.05" y1="7.735" x2="10.27" y2="13.225"></line><line x1="13.73" y1="13.225" x2="20.95" y2="7.735"></line><line x1="3.05" y1="16.265" x2="10.27" y2="21.755"></line></svg>`,
|
|
filter: "containers",
|
|
technologies: [
|
|
{
|
|
name: "Kubernetes",
|
|
description: "Container orchestration platform for application scaling",
|
|
url: "https://kubernetes.io/",
|
|
},
|
|
{
|
|
name: "Rancher",
|
|
description: "Multi-cluster Kubernetes management interface",
|
|
url: "https://rancher.com/",
|
|
},
|
|
{
|
|
name: "ArgoCD",
|
|
description: "GitOps continuous delivery tool for Kubernetes",
|
|
url: "https://argoproj.github.io/argo-cd/",
|
|
},
|
|
{
|
|
name: "Longhorn",
|
|
description: "Cloud-native distributed storage for Kubernetes",
|
|
url: "https://longhorn.io/",
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: "CI/CD & Automation",
|
|
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="19" y1="12" x2="5" y2="12"></line></svg>`,
|
|
filter: "automation",
|
|
technologies: [
|
|
{
|
|
name: "Terraform",
|
|
description: "Infrastructure as Code for cloud and on-premises resources",
|
|
url: "https://www.terraform.io/",
|
|
},
|
|
{
|
|
name: "Ansible",
|
|
description: "Automation platform for configuration management",
|
|
url: "https://www.ansible.com/",
|
|
},
|
|
{
|
|
name: "GitHub Actions",
|
|
description: "CI/CD pipeline automation integrated with GitHub",
|
|
url: "https://github.com/features/actions",
|
|
},
|
|
{
|
|
name: "Flux CD",
|
|
description: "GitOps tool for keeping Kubernetes clusters in sync",
|
|
url: "https://fluxcd.io/",
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: "Monitoring & Observability",
|
|
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="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>`,
|
|
filter: "monitoring",
|
|
technologies: [
|
|
{
|
|
name: "Prometheus",
|
|
description: "Monitoring system with time-series database",
|
|
url: "https://prometheus.io/",
|
|
},
|
|
{
|
|
name: "Grafana",
|
|
description: "Visualization and analytics platform for metrics",
|
|
url: "https://grafana.com/",
|
|
},
|
|
{
|
|
name: "Loki",
|
|
description: "Log aggregation system designed for Kubernetes",
|
|
url: "https://grafana.com/oss/loki/",
|
|
},
|
|
{
|
|
name: "Uptime Kuma",
|
|
description: "Self-hosted monitoring tool for websites and services",
|
|
url: "https://github.com/louislam/uptime-kuma",
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: "Development & Web",
|
|
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></svg>`,
|
|
filter: "development",
|
|
technologies: [
|
|
{
|
|
name: "Astro",
|
|
description: "Modern static site builder with minimal JavaScript",
|
|
url: "https://astro.build/",
|
|
},
|
|
{
|
|
name: "Docker",
|
|
description: "Container platform for application packaging",
|
|
url: "https://www.docker.com/",
|
|
},
|
|
{
|
|
name: "Tailwind CSS",
|
|
description: "Utility-first CSS framework for rapid UI development",
|
|
url: "https://tailwindcss.com/",
|
|
},
|
|
{
|
|
name: "Node.js",
|
|
description: "JavaScript runtime for building server-side applications",
|
|
url: "https://nodejs.org/",
|
|
}
|
|
]
|
|
}
|
|
];
|
|
|
|
// Tech stack filters
|
|
const filters = [
|
|
"all",
|
|
"infrastructure",
|
|
"containers",
|
|
"automation",
|
|
"monitoring",
|
|
"development"
|
|
];
|
|
---
|
|
|
|
<BaseLayout title={title} description={description}>
|
|
<Header slot="header" />
|
|
|
|
<main>
|
|
<div class="container">
|
|
<div class="page-header">
|
|
<h1 class="page-title">Tech Stack</h1>
|
|
<p class="page-description">
|
|
Explore the technologies, tools, and platforms that power the LaForceIT infrastructure, projects, and home lab environment. This curated stack focuses on enterprise-grade solutions that balance performance, reliability, and maintainability.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Search & Filters -->
|
|
<div class="resource-search">
|
|
<div class="search-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
</svg>
|
|
</div>
|
|
<input type="text" placeholder="Search technologies..." class="search-input" id="tech-search-input">
|
|
</div>
|
|
|
|
<div class="resource-filters">
|
|
{filters.map(filter => (
|
|
<button class={`filter-button ${filter === 'all' ? 'active' : ''}`} data-filter={filter}>
|
|
{filter.charAt(0).toUpperCase() + filter.slice(1)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<!-- Tech Stack Grid -->
|
|
<div class="tech-categories">
|
|
{techCategories.map((category, index) => (
|
|
<div class="tech-category-section" id={`category-${index}`}>
|
|
<div class="category-header">
|
|
<div class="category-icon" set:html={category.icon}></div>
|
|
<h2 class="category-title">{category.name}</h2>
|
|
</div>
|
|
|
|
<div class="technology-grid">
|
|
{category.technologies.map(tech => (
|
|
<a href={tech.url} target="_blank" rel="noopener noreferrer" class={`resource-card ${category.filter}`}>
|
|
<div class="resource-icon-wrapper">
|
|
<div class="tech-logo">{tech.name.substring(0, 2)}</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">{tech.name}</h3>
|
|
<p class="resource-description">{tech.description}</p>
|
|
<div class="resource-link">
|
|
Learn More
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
<polyline points="12 5 19 12 12 19"></polyline>
|
|
</svg>
|
|
</div>
|
|
<div class="resource-tags">
|
|
<span class="resource-tag">{category.filter}</span>
|
|
</div>
|
|
</div>
|
|
<div class="shine-effect"></div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<!-- Empty State (hidden by default) -->
|
|
<div class="no-results" style="display: none;">
|
|
<div class="no-results-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
<line x1="11" y1="8" x2="11" y2="14"></line>
|
|
<line x1="8" y1="11" x2="14" y2="11"></line>
|
|
</svg>
|
|
</div>
|
|
<h3>No matching technologies found</h3>
|
|
<p>Try adjusting your search terms or filters to find what you're looking for.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA Section -->
|
|
<div class="cta-section">
|
|
<div class="cta-content">
|
|
<h2 class="cta-title">Build Your Own Tech Stack</h2>
|
|
<p class="cta-text">Interested in setting up a similar tech stack in your own environment? Check out my detailed tutorials and guides for step-by-step instructions on deploying and configuring these technologies.</p>
|
|
</div>
|
|
<div class="cta-buttons">
|
|
<a href="/resources/tutorials" class="cta-button primary">View Tutorials</a>
|
|
<a href="https://argobox.com" class="cta-button secondary" target="_blank" rel="noopener noreferrer">Explore HomeLab</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer slot="footer" />
|
|
</BaseLayout>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Filter functionality
|
|
const filterButtons = document.querySelectorAll('.filter-button');
|
|
const resourceCards = document.querySelectorAll('.resource-card');
|
|
const noResults = document.querySelector('.no-results');
|
|
const searchInput = document.getElementById('tech-search-input');
|
|
const categoryContainers = document.querySelectorAll('.tech-category-section');
|
|
|
|
function filterAndSearch() {
|
|
const searchTerm = searchInput ? searchInput.value.toLowerCase().trim() : '';
|
|
const activeFilter = document.querySelector('.filter-button.active')?.getAttribute('data-filter') || 'all';
|
|
let visibleCount = 0;
|
|
|
|
resourceCards.forEach(card => {
|
|
const title = card.querySelector('.resource-title')?.textContent.toLowerCase() || '';
|
|
const description = card.querySelector('.resource-description')?.textContent.toLowerCase() || '';
|
|
const cardClass = Array.from(card.classList).find(cls => filters.includes(cls)) || '';
|
|
|
|
const matchesSearch = searchTerm === '' || title.includes(searchTerm) || description.includes(searchTerm);
|
|
const matchesFilter = activeFilter === 'all' || cardClass === activeFilter;
|
|
|
|
if (matchesSearch && matchesFilter) {
|
|
card.style.display = 'flex';
|
|
visibleCount++;
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Show/hide category sections based on visible cards
|
|
categoryContainers.forEach(container => {
|
|
const hasVisibleCards = Array.from(container.querySelectorAll('.resource-card')).some(card => card.style.display !== 'none');
|
|
container.style.display = hasVisibleCards ? 'block' : 'none';
|
|
});
|
|
|
|
if (noResults) {
|
|
noResults.style.display = visibleCount === 0 ? 'block' : 'none';
|
|
}
|
|
}
|
|
|
|
filterButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
filterButtons.forEach(btn => btn.classList.remove('active'));
|
|
button.classList.add('active');
|
|
filterAndSearch(); // Re-run search when filter changes
|
|
});
|
|
});
|
|
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', filterAndSearch);
|
|
}
|
|
|
|
// Initial filter/search on load
|
|
filterAndSearch();
|
|
|
|
// Card hover effect enhancement (particle animation)
|
|
resourceCards.forEach(card => {
|
|
card.addEventListener('mouseenter', () => {
|
|
const particles = card.querySelectorAll('.resource-icon-particle');
|
|
particles.forEach(particle => {
|
|
const x = Math.random() * 100;
|
|
const y = Math.random() * 100;
|
|
particle.style.top = `${y}%`;
|
|
particle.style.left = `${x}%`;
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.page-header {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.page-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100px;
|
|
height: 3px;
|
|
background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary));
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.page-description {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
color: var(--text-secondary);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* Resource Filtering */
|
|
.resource-filters {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.filter-button {
|
|
padding: 0.5rem 1.25rem;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-primary);
|
|
color: var(--text-secondary);
|
|
border-radius: 20px;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.filter-button:hover {
|
|
background: linear-gradient(90deg, rgba(6, 182, 212, 0.1), rgba(59, 130, 246, 0.1));
|
|
color: var(--text-primary);
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 10px var(--glow-primary);
|
|
}
|
|
|
|
.filter-button.active {
|
|
background: linear-gradient(90deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.2));
|
|
color: var(--accent-primary);
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 15px var(--glow-primary);
|
|
}
|
|
|
|
/* Search Box */
|
|
.resource-search {
|
|
display: flex;
|
|
margin: 0 auto 2rem;
|
|
max-width: 500px;
|
|
position: relative;
|
|
}
|
|
|
|
.search-input {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem 0.75rem 2.75rem;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-primary);
|
|
border-radius: 8px;
|
|
color: var(--text-primary);
|
|
font-size: 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.search-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px var(--glow-primary);
|
|
}
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* Tech Categories */
|
|
.tech-categories {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4rem;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.tech-category-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.category-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.category-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
padding: 0.5rem;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(59, 130, 246, 0.1));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.category-icon svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.category-title {
|
|
font-size: 1.5rem;
|
|
color: var(--text-primary);
|
|
position: relative;
|
|
}
|
|
|
|
.category-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -0.5rem;
|
|
left: 0;
|
|
width: 50px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--accent-primary), transparent);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.technology-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
/* Styles for .resource-card, .resource-icon-wrapper, etc. are now in card-animations.css */
|
|
|
|
.resource-content {
|
|
padding: 1.5rem;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.resource-title {
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.75rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.resource-description {
|
|
color: var(--text-secondary);
|
|
margin-bottom: 1.5rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.resource-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
color: var(--accent-primary);
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.resource-link svg {
|
|
margin-left: 0.5rem;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.resource-card:hover .resource-link svg {
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
.resource-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: auto;
|
|
}
|
|
|
|
/* .resource-tag styling is now in card-animations.css */
|
|
|
|
|
|
/* Shine effect styling is now in card-animations.css */
|
|
|
|
/* Empty State */
|
|
.no-results {
|
|
text-align: center;
|
|
padding: 3rem;
|
|
color: var(--text-secondary);
|
|
background: var(--bg-tertiary);
|
|
border-radius: 12px;
|
|
border: 1px dashed var(--border-primary);
|
|
margin-top: 2rem;
|
|
display: none; /* Hidden by default */
|
|
}
|
|
|
|
.no-results-icon {
|
|
color: var(--text-tertiary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.no-results-icon svg {
|
|
width: 64px;
|
|
height: 64px;
|
|
stroke-width: 1;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* CTA Section */
|
|
.cta-section {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 16px;
|
|
padding: 3rem;
|
|
margin: 2rem 0 4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 2rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cta-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: radial-gradient(circle at 30% 50%, rgba(6, 182, 212, 0.1), transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.cta-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.cta-title {
|
|
font-size: 2rem;
|
|
color: var(--text-primary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.cta-text {
|
|
color: var(--text-secondary);
|
|
font-size: 1.1rem;
|
|
line-height: 1.7;
|
|
margin: 0;
|
|
}
|
|
|
|
.cta-buttons {
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.cta-button {
|
|
display: inline-block;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
font-size: 1rem;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.cta-button.primary {
|
|
background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
|
|
color: var(--bg-primary);
|
|
box-shadow: 0 5px 15px rgba(6, 182, 212, 0.2);
|
|
}
|
|
|
|
.cta-button.secondary {
|
|
background: rgba(15, 23, 42, 0.5);
|
|
border: 1px solid var(--border-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.cta-button.primary:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 20px rgba(6, 182, 212, 0.3);
|
|
}
|
|
|
|
.cta-button.secondary:hover {
|
|
transform: translateY(-3px);
|
|
border-color: var(--accent-primary);
|
|
background: rgba(15, 23, 42, 0.8);
|
|
}
|
|
|
|
/* Keyframes are now in card-animations.css */
|
|
|
|
/* Responsive Adjustments */
|
|
@media (max-width: 768px) {
|
|
.technology-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.cta-section {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
padding: 2rem 1.5rem;
|
|
}
|
|
|
|
.cta-buttons {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.cta-title {
|
|
font-size: 1.75rem;
|
|
}
|
|
}
|
|
</style> |