@beknurakhmed/webforge-cli 0.1.1 → 0.1.2

package/templates/overlays/blog/nuxt/components/PostCard.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+defineProps<{
+  post: {
+    id: number;
+    title: string;
+    excerpt: string;
+    date: string;
+    author: string;
+    category: string;
+    image: string;
+    readTime: string;
+  };
+}>();
+</script>
+
+<template>
+  <NuxtLink :to="`/post/${post.id}`" class="post-card">
+    <div class="card-image">
+      <span class="emoji">{{ post.image }}</span>
+    </div>
+    <div class="card-body">
+      <div class="card-meta">
+        <NuxtLink :to="`/category/${post.category.toLowerCase()}`" class="card-category" @click.stop>
+          {{ post.category }}
+        </NuxtLink>
+        <span class="card-read-time">{{ post.readTime }}</span>
+      </div>
+      <h3 class="card-title">{{ post.title }}</h3>
+      <p class="card-excerpt">{{ post.excerpt }}</p>
+      <div class="card-footer">
+        <span class="card-author">{{ post.author }}</span>
+        <span class="card-date">{{ post.date }}</span>
+      </div>
+    </div>
+  </NuxtLink>
+</template>
+
+<style scoped>
+.post-card {
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s, box-shadow 0.2s;
+  display: block;
+}
+
+.post-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.card-image {
+  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.emoji {
+  font-size: 3.5rem;
+}
+
+.card-body {
+  padding: 1.25rem;
+}
+
+.card-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.card-category {
+  font-size: 0.75rem;
+  color: #4f46e5;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.card-category:hover {
+  text-decoration: underline;
+}
+
+.card-read-time {
+  font-size: 0.75rem;
+  color: #9ca3af;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.card-title {
+  font-size: 1.15rem;
+  color: #111827;
+  margin-bottom: 0.5rem;
+  line-height: 1.4;
+}
+
+.card-excerpt {
+  font-size: 0.9rem;
+  color: #6b7280;
+  margin-bottom: 1rem;
+  line-height: 1.6;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.8rem;
+  color: #9ca3af;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.card-author {
+  font-weight: 600;
+  color: #374151;
+}
+</style>

package/templates/overlays/blog/nuxt/layouts/default.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="blog-layout">
+    <BlogHeader />
+    <main class="blog-main">
+      <slot />
+    </main>
+    <BlogFooter />
+  </div>
+</template>
+
+<style>
+.blog-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.blog-main {
+  flex: 1;
+  max-width: 1100px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+</style>

package/templates/overlays/blog/nuxt/pages/about.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+const authors = [
+  { name: 'Alex Rivera', role: 'Tech Lead & Writer', bio: 'Full-stack developer passionate about modern web technologies and teaching.', avatar: '👨‍💻' },
+  { name: 'Sarah Chen', role: 'Design Editor', bio: 'UI/UX designer exploring the intersection of aesthetics and usability.', avatar: '👩‍🎨' },
+  { name: 'Jordan Lee', role: 'Business & Lifestyle', bio: 'Entrepreneur and writer covering business strategy and digital wellness.', avatar: '🧑‍💼' },
+];
+</script>
+
+<template>
+  <div class="about-page">
+    <div class="about-hero">
+      <h1>About {{projectName}}</h1>
+      <p class="hero-desc">
+        We are a team of passionate writers and developers sharing insights about
+        technology, design, business, and modern living. Our mission is to provide
+        thoughtful, practical content that helps you grow professionally and personally.
+      </p>
+    </div>
+
+    <section class="authors-section">
+      <h2>Our Writers</h2>
+      <div class="authors-grid">
+        <div v-for="author in authors" :key="author.name" class="author-card">
+          <span class="author-avatar">{{ author.avatar }}</span>
+          <h3 class="author-name">{{ author.name }}</h3>
+          <p class="author-role">{{ author.role }}</p>
+          <p class="author-bio">{{ author.bio }}</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="mission-section">
+      <h2>Our Mission</h2>
+      <div class="mission-grid">
+        <div class="mission-card">
+          <span class="mission-icon">📚</span>
+          <h3>Quality Content</h3>
+          <p>Well-researched, in-depth articles that provide real value to our readers.</p>
+        </div>
+        <div class="mission-card">
+          <span class="mission-icon">🌍</span>
+          <h3>Community</h3>
+          <p>Building a community of learners who share knowledge and support each other.</p>
+        </div>
+        <div class="mission-card">
+          <span class="mission-icon">💡</span>
+          <h3>Innovation</h3>
+          <p>Staying at the forefront of technology and sharing insights from the cutting edge.</p>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.about-hero {
+  text-align: center;
+  padding: 2rem 0 3rem;
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+.about-hero h1 {
+  font-size: 2.25rem;
+  color: #111827;
+  margin-bottom: 1rem;
+}
+
+.hero-desc {
+  font-size: 1.1rem;
+  color: #6b7280;
+  line-height: 1.8;
+}
+
+.authors-section,
+.mission-section {
+  margin-bottom: 3rem;
+}
+
+.authors-section h2,
+.mission-section h2 {
+  font-size: 1.5rem;
+  color: #111827;
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.authors-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+}
+
+.author-card {
+  background: white;
+  border-radius: 12px;
+  padding: 2rem;
+  text-align: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.author-avatar {
+  font-size: 3.5rem;
+  display: block;
+  margin-bottom: 1rem;
+}
+
+.author-name {
+  font-size: 1.15rem;
+  color: #111827;
+  margin-bottom: 0.25rem;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.author-role {
+  font-size: 0.85rem;
+  color: #4f46e5;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.author-bio {
+  font-size: 0.9rem;
+  color: #6b7280;
+  line-height: 1.6;
+}
+
+.mission-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+}
+
+.mission-card {
+  background: white;
+  border-radius: 12px;
+  padding: 2rem;
+  text-align: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.mission-icon {
+  font-size: 2.5rem;
+  display: block;
+  margin-bottom: 1rem;
+}
+
+.mission-card h3 {
+  font-size: 1.1rem;
+  color: #111827;
+  margin-bottom: 0.5rem;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.mission-card p {
+  font-size: 0.9rem;
+  color: #6b7280;
+  line-height: 1.6;
+}
+</style>

package/templates/overlays/blog/nuxt/pages/category/[slug].vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+const route = useRoute();
+const slug = route.params.slug as string;
+
+const posts = [
+  { id: 1, title: 'Getting Started with Vue 3 Composition API', excerpt: 'Learn the fundamentals of Vue 3 Composition API and how it transforms the way we build components.', date: 'Jan 15, 2024', author: 'Alex Rivera', category: 'Technology', image: '💻', readTime: '5 min read' },
+  { id: 2, title: 'Modern UI Design Principles', excerpt: 'Explore the key principles that make modern user interfaces intuitive, beautiful, and accessible.', date: 'Jan 12, 2024', author: 'Sarah Chen', category: 'Design', image: '🎨', readTime: '4 min read' },
+  { id: 3, title: 'Building Scalable Web Applications', excerpt: 'Best practices for building web applications that scale from hundreds to millions of users.', date: 'Jan 10, 2024', author: 'Alex Rivera', category: 'Technology', image: '🏗️', readTime: '7 min read' },
+  { id: 4, title: 'The Future of Remote Work', excerpt: 'How remote work is reshaping the business landscape and what it means for teams worldwide.', date: 'Jan 8, 2024', author: 'Jordan Lee', category: 'Business', image: '🏠', readTime: '6 min read' },
+  { id: 5, title: 'Color Theory for Developers', excerpt: 'A practical guide to using color effectively in your web projects without being a designer.', date: 'Jan 5, 2024', author: 'Sarah Chen', category: 'Design', image: '🌈', readTime: '5 min read' },
+  { id: 6, title: 'Startup Lessons Learned', excerpt: 'Key takeaways from building and growing a tech startup in a competitive market.', date: 'Jan 3, 2024', author: 'Jordan Lee', category: 'Business', image: '🚀', readTime: '8 min read' },
+  { id: 7, title: 'TypeScript Best Practices', excerpt: 'Write cleaner, safer code with these TypeScript patterns and conventions used by top teams.', date: 'Jan 1, 2024', author: 'Alex Rivera', category: 'Technology', image: '📘', readTime: '6 min read' },
+  { id: 8, title: 'Digital Minimalism', excerpt: 'How simplifying your digital life can boost productivity and improve well-being.', date: 'Dec 28, 2023', author: 'Jordan Lee', category: 'Lifestyle', image: '🧘', readTime: '4 min read' },
+];
+
+const categoryName = computed(() => {
+  const s = slug.toString();
+  return s.charAt(0).toUpperCase() + s.slice(1);
+});
+
+const filteredPosts = computed(() =>
+  posts.filter(p => p.category.toLowerCase() === slug.toString().toLowerCase())
+);
+</script>
+
+<template>
+  <div class="category-page">
+    <NuxtLink to="/" class="back-link">← All Posts</NuxtLink>
+
+    <h1 class="page-title">{{ categoryName }}</h1>
+    <p class="page-subtitle">{{ filteredPosts.length }} post{{ filteredPosts.length !== 1 ? 's' : '' }} in this category</p>
+
+    <div class="posts-grid">
+      <PostCard v-for="post in filteredPosts" :key="post.id" :post="post" />
+    </div>
+
+    <p v-if="filteredPosts.length === 0" class="no-results">
+      No posts found in this category.
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.back-link {
+  display: inline-block;
+  color: #4f46e5;
+  margin-bottom: 1.5rem;
+  font-weight: 500;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.back-link:hover {
+  text-decoration: underline;
+}
+
+.page-title {
+  font-size: 2rem;
+  color: #111827;
+  margin-bottom: 0.25rem;
+}
+
+.page-subtitle {
+  color: #6b7280;
+  margin-bottom: 2rem;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.posts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.5rem;
+}
+
+.no-results {
+  text-align: center;
+  color: #6b7280;
+  padding: 3rem 0;
+  font-size: 1.1rem;
+}
+</style>

package/templates/overlays/blog/nuxt/pages/index.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const posts = [
+  { id: 1, title: 'Getting Started with Vue 3 Composition API', excerpt: 'Learn the fundamentals of Vue 3 Composition API and how it transforms the way we build components.', date: 'Jan 15, 2024', author: 'Alex Rivera', category: 'Technology', image: '💻', readTime: '5 min read' },
+  { id: 2, title: 'Modern UI Design Principles', excerpt: 'Explore the key principles that make modern user interfaces intuitive, beautiful, and accessible.', date: 'Jan 12, 2024', author: 'Sarah Chen', category: 'Design', image: '🎨', readTime: '4 min read' },
+  { id: 3, title: 'Building Scalable Web Applications', excerpt: 'Best practices for building web applications that scale from hundreds to millions of users.', date: 'Jan 10, 2024', author: 'Alex Rivera', category: 'Technology', image: '🏗️', readTime: '7 min read' },
+  { id: 4, title: 'The Future of Remote Work', excerpt: 'How remote work is reshaping the business landscape and what it means for teams worldwide.', date: 'Jan 8, 2024', author: 'Jordan Lee', category: 'Business', image: '🏠', readTime: '6 min read' },
+  { id: 5, title: 'Color Theory for Developers', excerpt: 'A practical guide to using color effectively in your web projects without being a designer.', date: 'Jan 5, 2024', author: 'Sarah Chen', category: 'Design', image: '🌈', readTime: '5 min read' },
+  { id: 6, title: 'Startup Lessons Learned', excerpt: 'Key takeaways from building and growing a tech startup in a competitive market.', date: 'Jan 3, 2024', author: 'Jordan Lee', category: 'Business', image: '🚀', readTime: '8 min read' },
+  { id: 7, title: 'TypeScript Best Practices', excerpt: 'Write cleaner, safer code with these TypeScript patterns and conventions used by top teams.', date: 'Jan 1, 2024', author: 'Alex Rivera', category: 'Technology', image: '📘', readTime: '6 min read' },
+  { id: 8, title: 'Digital Minimalism', excerpt: 'How simplifying your digital life can boost productivity and improve well-being.', date: 'Dec 28, 2023', author: 'Jordan Lee', category: 'Lifestyle', image: '🧘', readTime: '4 min read' },
+];
+</script>
+
+<template>
+  <div class="blog-home">
+    <div class="blog-content">
+      <div class="posts-section">
+        <h1 class="page-title">Latest Posts</h1>
+        <div class="posts-grid">
+          <PostCard v-for="post in posts" :key="post.id" :post="post" />
+        </div>
+      </div>
+
+      <BlogSidebar />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-title {
+  font-size: 2rem;
+  color: #111827;
+  margin-bottom: 1.5rem;
+}
+
+.blog-content {
+  display: grid;
+  grid-template-columns: 1fr 320px;
+  gap: 2rem;
+  align-items: start;
+}
+
+.posts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.5rem;
+}
+
+@media (max-width: 900px) {
+  .blog-content {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/templates/overlays/blog/nuxt/pages/post/[id].vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+const route = useRoute();
+const postId = Number(route.params.id);
+
+const posts = [
+  { id: 1, title: 'Getting Started with Vue 3 Composition API', excerpt: 'Learn the fundamentals of Vue 3 Composition API and how it transforms the way we build components.', date: 'Jan 15, 2024', author: 'Alex Rivera', category: 'Technology', image: '💻', readTime: '5 min read', content: 'The Vue 3 Composition API represents a significant evolution in how we structure Vue components. Unlike the Options API, which organizes code by option type (data, methods, computed), the Composition API lets you organize code by logical concern.\n\nThis means related code stays together, making components easier to understand and maintain. The setup function (or <script setup>) is the entry point where you define reactive state, computed properties, and functions.\n\nKey concepts include ref() for primitive reactive values, reactive() for objects, computed() for derived state, and watch/watchEffect for side effects. These composables can be extracted into reusable functions, promoting code reuse across components.\n\nThe Composition API also provides better TypeScript support, as the type inference works naturally with standard JavaScript/TypeScript patterns.' },
+  { id: 2, title: 'Modern UI Design Principles', excerpt: 'Explore the key principles that make modern user interfaces intuitive, beautiful, and accessible.', date: 'Jan 12, 2024', author: 'Sarah Chen', category: 'Design', image: '🎨', readTime: '4 min read', content: 'Great UI design is built on timeless principles that prioritize the user experience. Visual hierarchy guides users through content by establishing clear importance levels using size, color, and spacing.\n\nConsistency creates familiarity, reducing cognitive load and helping users predict how elements will behave. A consistent design system with reusable components ensures uniformity across your application.\n\nWhitespace is not empty space but a powerful design element. Proper use of whitespace improves readability, draws attention to key elements, and creates a sense of elegance.\n\nAccessibility should be woven into every design decision. This means sufficient color contrast, readable font sizes, clear focus indicators, and semantic markup that works with assistive technologies.' },
+  { id: 3, title: 'Building Scalable Web Applications', excerpt: 'Best practices for building web applications that scale from hundreds to millions of users.', date: 'Jan 10, 2024', author: 'Alex Rivera', category: 'Technology', image: '🏗️', readTime: '7 min read', content: 'Building scalable web applications requires thoughtful architecture decisions from the start. Start with a modular architecture that separates concerns and allows individual components to scale independently.\n\nPerformance optimization is crucial. Implement lazy loading, code splitting, and efficient caching strategies. Use CDNs for static assets and consider server-side rendering for improved initial load times.\n\nDatabase design matters immensely at scale. Choose the right database for your use case, implement proper indexing, and plan for horizontal scaling through sharding or read replicas.\n\nMonitoring and observability help you understand system behavior. Implement comprehensive logging, metrics collection, and distributed tracing to identify bottlenecks before they become critical issues.' },
+  { id: 4, title: 'The Future of Remote Work', excerpt: 'How remote work is reshaping the business landscape and what it means for teams worldwide.', date: 'Jan 8, 2024', author: 'Jordan Lee', category: 'Business', image: '🏠', readTime: '6 min read', content: 'Remote work has fundamentally changed how businesses operate and how employees structure their professional lives. The shift to distributed teams has proven that productivity is not tied to physical location.\n\nSuccessful remote teams prioritize asynchronous communication, allowing team members across time zones to contribute effectively. Written documentation becomes the backbone of organizational knowledge.\n\nCompany culture in remote settings requires intentional effort. Virtual team building, regular check-ins, and transparent communication help maintain connection and alignment.\n\nThe hybrid model is emerging as a popular middle ground, offering flexibility while maintaining in-person collaboration opportunities for creative work and team bonding.' },
+  { id: 5, title: 'Color Theory for Developers', excerpt: 'A practical guide to using color effectively in your web projects without being a designer.', date: 'Jan 5, 2024', author: 'Sarah Chen', category: 'Design', image: '🌈', readTime: '5 min read', content: 'Understanding color theory helps developers make better design decisions even without formal design training. Start with the color wheel and basic relationships: complementary, analogous, and triadic color schemes.\n\nIn web design, a focused color palette typically includes a primary color for brand identity, a secondary color for accents, and neutral colors for text and backgrounds. Limiting your palette creates visual coherence.\n\nColor psychology influences user perception. Blue conveys trust, green suggests growth, red creates urgency, and purple implies luxury. Choose colors that align with your brand message.\n\nAccessibility must guide color choices. Ensure text meets WCAG contrast ratios (4.5:1 for normal text, 3:1 for large text). Never rely on color alone to convey information.' },
+  { id: 6, title: 'Startup Lessons Learned', excerpt: 'Key takeaways from building and growing a tech startup in a competitive market.', date: 'Jan 3, 2024', author: 'Jordan Lee', category: 'Business', image: '🚀', readTime: '8 min read', content: 'Building a startup is a journey of constant learning and adaptation. The most important lesson is to validate your idea early with real users. Build a minimum viable product and iterate based on genuine feedback.\n\nHiring is both the most impactful and most challenging aspect of growing a startup. Look for adaptable people who share your vision and can wear multiple hats in the early stages.\n\nCash flow management can make or break a startup. Understand your burn rate, maintain a healthy runway, and be strategic about when and how to raise funding.\n\nBuilding in public and maintaining transparency with stakeholders creates trust and valuable feedback loops. Share your journey, celebrate wins, and be honest about challenges.' },
+  { id: 7, title: 'TypeScript Best Practices', excerpt: 'Write cleaner, safer code with these TypeScript patterns and conventions used by top teams.', date: 'Jan 1, 2024', author: 'Alex Rivera', category: 'Technology', image: '📘', readTime: '6 min read', content: 'TypeScript adds type safety to JavaScript, catching errors at compile time rather than runtime. To get the most from TypeScript, embrace strict mode and avoid using the any type as an escape hatch.\n\nUse interfaces for object shapes and types for unions and intersections. Generic types enable reusable, type-safe abstractions. Learn to leverage utility types like Partial, Pick, Omit, and Record.\n\nProper error handling with discriminated unions provides exhaustive type checking. Instead of throwing errors, consider returning typed result objects that force callers to handle both success and failure cases.\n\nOrganize types close to where they are used. Export only the types that are part of your public API. Use barrel files judiciously to avoid circular dependency issues.' },
+  { id: 8, title: 'Digital Minimalism', excerpt: 'How simplifying your digital life can boost productivity and improve well-being.', date: 'Dec 28, 2023', author: 'Jordan Lee', category: 'Lifestyle', image: '🧘', readTime: '4 min read', content: 'Digital minimalism is about being intentional with technology use. Rather than adopting every new tool, evaluate each one against your values and goals. Keep what adds genuine value; remove what merely adds noise.\n\nStart by auditing your digital habits. Track screen time, review app usage, and identify patterns of mindless consumption. This awareness is the first step toward meaningful change.\n\nCreate boundaries around technology use. Designate device-free times and spaces. Turn off non-essential notifications. Batch email and message checking rather than responding to every ping.\n\nReplace digital consumption with analog activities. Reading physical books, writing in a journal, and spending time outdoors provide the mental rest that constant connectivity prevents.' },
+];
+
+const post = posts.find(p => p.id === postId);
+</script>
+
+<template>
+  <div v-if="post" class="post-detail">
+    <NuxtLink to="/" class="back-link">← Back to Posts</NuxtLink>
+
+    <article class="article">
+      <div class="article-hero">
+        <span class="article-emoji">{{ post.image }}</span>
+      </div>
+
+      <div class="article-meta">
+        <NuxtLink :to="`/category/${post.category.toLowerCase()}`" class="article-category">
+          {{ post.category }}
+        </NuxtLink>
+        <span class="meta-dot">&middot;</span>
+        <span>{{ post.readTime }}</span>
+      </div>
+
+      <h1 class="article-title">{{ post.title }}</h1>
+
+      <div class="article-author-line">
+        <span class="author-name">By {{ post.author }}</span>
+        <span class="article-date">{{ post.date }}</span>
+      </div>
+
+      <div class="article-content">
+        <p v-for="(paragraph, idx) in post.content.split('\n\n')" :key="idx">
+          {{ paragraph }}
+        </p>
+      </div>
+    </article>
+  </div>
+
+  <div v-else class="not-found">
+    <h2>Post not found</h2>
+    <NuxtLink to="/" class="back-link">← Back to Posts</NuxtLink>
+  </div>
+</template>
+
+<style scoped>
+.back-link {
+  display: inline-block;
+  color: #4f46e5;
+  margin-bottom: 1.5rem;
+  font-weight: 500;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.back-link:hover {
+  text-decoration: underline;
+}
+
+.article {
+  max-width: 740px;
+  margin: 0 auto;
+}
+
+.article-hero {
+  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  margin-bottom: 2rem;
+}
+
+.article-emoji {
+  font-size: 6rem;
+}
+
+.article-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.article-category {
+  color: #4f46e5;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.8rem;
+}
+
+.article-category:hover {
+  text-decoration: underline;
+}
+
+.meta-dot {
+  color: #d1d5db;
+}
+
+.article-title {
+  font-size: 2.25rem;
+  color: #111827;
+  line-height: 1.3;
+  margin-bottom: 1rem;
+}
+
+.article-author-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 1.5rem;
+  margin-bottom: 2rem;
+  border-bottom: 1px solid #e5e7eb;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  font-size: 0.9rem;
+}
+
+.author-name {
+  font-weight: 600;
+  color: #374151;
+}
+
+.article-date {
+  color: #9ca3af;
+}
+
+.article-content p {
+  margin-bottom: 1.5rem;
+  font-size: 1.1rem;
+  line-height: 1.9;
+  color: #374151;
+}
+
+.not-found {
+  text-align: center;
+  padding: 4rem 0;
+}
+
+.not-found h2 {
+  color: #111827;
+  margin-bottom: 1rem;
+}
+</style>