refactor(Container): simplify container component and remove size prop

Remove size variants from Container component and set a default max-width
Update all instances where Container was used with size prop to use default
This commit is contained in:
joyzhao
2025-06-19 18:26:05 +08:00
parent 5fcf7a9d33
commit f4ff971c85
12 changed files with 23 additions and 36 deletions

View File

@@ -24,7 +24,7 @@ const currentProjects = projects[lang as keyof typeof projects] || projects.en;
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-purple-700/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-purple-700/30"></div>
<Container client:load size="md" className="relative z-10">
<Container client:load className="relative z-10">
<div class="text-center mb-16">
<!-- Main title -->
<h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-purple-600 to-purple-800 dark:from-white dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent">
@@ -44,7 +44,7 @@ const currentProjects = projects[lang as keyof typeof projects] || projects.en;
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
<Container client:load size="md" className="relative z-10">
<Container client:load className="relative z-10">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
{currentProjects.map((project) => (
<div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>