[Product Homepage Design] Implementation

.gitignore

@@ -1,2 +1,5 @@
 /target
 **/*.rs.bk
+.something/
+node_modules/
+test-results/

css/base.css

@@ -0,0 +1,126 @@
+/**
+ * Base Styles and CSS Custom Properties
+ * Owner: First Builder
+ *
+ * Contains:
+ * - CSS custom properties (--color-primary, --font-family, --spacing-unit, etc.)
+ * - CSS reset (normalize/box-sizing)
+ * - Utility classes (.container, .sr-only, .text-center, etc.)
+ * - Base typography styles
+ *
+ * Expected exports (CSS custom properties):
+ * --color-primary, --color-text, --color-bg, --color-accent
+ * --font-sans, --font-mono
+ * --spacing-sm, --spacing-md, --spacing-lg, --spacing-xl
+ * --breakpoint-tablet: 768px
+ * --breakpoint-desktop: 1024px
+ */
+
+/* CSS Custom Properties */
+:root {
+  --color-primary: #2563eb;
+  --color-text: #1f2937;
+  --color-bg: #ffffff;
+  --color-accent: #10b981;
+  --color-muted: #6b7280;
+  --color-border: #e5e7eb;
+  --color-card-bg: #f9fafb;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  --font-mono: 'Fira Code', 'SF Mono', Consolas, monospace;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --breakpoint-tablet: 768px;
+  --breakpoint-desktop: 1024px;
+  --max-width: 1200px;
+  --border-radius: 8px;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* CSS Reset */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-sans);
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  line-height: 1.6;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Utility Classes */
+.container {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.text-center {
+  text-align: center;
+}
+
+/* Base Typography */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: var(--spacing-md);
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.25rem;
+}
+
+p {
+  margin-bottom: var(--spacing-md);
+}
+
+section {
+  padding: var(--spacing-2xl) 0;
+}

css/features.css

@@ -0,0 +1,82 @@
+/**
+ * Features Section Styles
+ * Owner: Scenario 3 - Features Section
+ *
+ * Styles for:
+ * - #features section layout
+ * - Feature card grid (4-col / 2-col / 1-col)
+ * - Individual feature card styling
+ * - Icon sizing and color
+ * - Card title and description typography
+ * - Hover effects on cards
+ */
+
+#features {
+  background-color: var(--color-card-bg);
+}
+
+#features .section-title {
+  text-align: center;
+  margin-bottom: var(--spacing-2xl);
+  color: var(--color-text);
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--spacing-xl);
+}
+
+.feature-card {
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-xl);
+  text-align: center;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+}
+
+.feature-icon {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto var(--spacing-md);
+  color: var(--color-primary);
+}
+
+.feature-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.feature-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: var(--spacing-sm);
+  color: var(--color-text);
+}
+
+.feature-description {
+  font-size: 0.9375rem;
+  color: var(--color-muted);
+  line-height: 1.6;
+  margin-bottom: 0;
+}
+
+/* Tablet: 2x2 grid */
+@media (max-width: 1023px) {
+  .features-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Mobile: single column */
+@media (max-width: 767px) {
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+}

css/footer.css

@@ -0,0 +1,107 @@
+/**
+ * Footer Styles
+ * Owner: Scenario 7 - Footer
+ *
+ * Styles for:
+ * - Footer layout and spacing
+ * - Copyright and license text
+ * - Footer link styling
+ * - Visual separation from main content
+ */
+
+/* Footer container with distinct visual separation */
+.site-footer {
+  background-color: var(--color-card-bg, #f9fafb);
+  border-top: 1px solid var(--color-border, #e5e7eb);
+  padding: var(--spacing-xl) 0;
+  margin-top: auto;
+}
+
+/* Footer content layout */
+.footer-content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+}
+
+/* Copyright text styling */
+.footer-copyright p {
+  font-size: 0.875rem;
+  color: var(--color-muted, #6b7280);
+  margin: 0;
+}
+
+.footer-copyright-symbol {
+  margin-right: 0.25rem;
+}
+
+/* License text styling */
+.footer-license p {
+  font-size: 0.875rem;
+  color: var(--color-muted, #6b7280);
+  margin: 0;
+}
+
+.footer-license a {
+  color: var(--color-primary, #2563eb);
+  text-decoration: none;
+}
+
+.footer-license a:hover {
+  text-decoration: underline;
+}
+
+/* Footer links navigation */
+.footer-links {
+  flex-shrink: 0;
+}
+
+.footer-link-list {
+  display: flex;
+  list-style: none;
+  gap: var(--spacing-lg);
+  margin: 0;
+  padding: 0;
+}
+
+.footer-link-list li {
+  display: flex;
+  align-items: center;
+}
+
+.footer-link-list a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.875rem;
+  color: var(--color-muted, #6b7280);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.footer-link-list a:hover {
+  color: var(--color-primary, #2563eb);
+  text-decoration: none;
+}
+
+.footer-link-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .footer-content {
+    flex-direction: column;
+    text-align: center;
+    gap: var(--spacing-sm);
+  }
+
+  .footer-link-list {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+}