create-landing-app 0.1.0

package/templates/nextjs/base/scripts/build-and-scan.sh

@@ -0,0 +1,127 @@
+#!/bin/bash
+
+set -euo pipefail
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Configuration
+APP_NAME="${APP_NAME:-__PROJECT_NAME__}"
+APP_TAG="${APP_TAG:-$(git rev-parse --short HEAD)-$(date +%s)}"
+APP_REGISTRY="${APP_REGISTRY:-registry.example.com}"
+GITOPS_NAMESPACE="${GITOPS_NAMESPACE:-dev}"
+DOCKERFILE="${DOCKERFILE:-Dockerfile}"
+BUILD_CONTEXT="${BUILD_CONTEXT:-.}"
+PUSH_IMAGE="${PUSH_IMAGE:-false}"
+FAIL_ON_VULN="${FAIL_ON_VULN:-true}"
+TRIVY_SEVERITY="${TRIVY_SEVERITY:-HIGH,CRITICAL,MEDIUM}"
+
+# Construct image name
+APP_IMAGE="${APP_REGISTRY}/${GITOPS_NAMESPACE}/${APP_NAME}"
+
+echo "${GREEN}🐳 Docker Build & Scan Script${NC}"
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo "App Name:     ${APP_NAME}"
+echo "Image Tag:    ${APP_TAG}"
+echo "Image:        ${APP_IMAGE}:${APP_TAG}"
+echo "Dockerfile:   ${DOCKERFILE}"
+echo "Context:      ${BUILD_CONTEXT}"
+echo "Push Image:   ${PUSH_IMAGE}"
+echo "Fail on Vuln: ${FAIL_ON_VULN}"
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo ""
+
+# Check if Docker is running
+if ! docker info > /dev/null 2>&1; then
+  echo "${RED}❌ Docker is not running. Please start Docker and try again.${NC}"
+  exit 1
+fi
+
+# Check if Trivy is available
+if ! command -v trivy > /dev/null 2>&1; then
+  echo "${YELLOW}⚠️  Trivy not found. Installing via Docker...${NC}"
+  USE_DOCKER_TRIVY=true
+else
+  USE_DOCKER_TRIVY=false
+fi
+
+# Step 1: Build Docker image
+echo "${GREEN}📦 Step 1: Building Docker image...${NC}"
+if docker build \
+  -f "${DOCKERFILE}" \
+  -t "${APP_IMAGE}:${APP_TAG}" \
+  -t "${APP_IMAGE}:latest" \
+  "${BUILD_CONTEXT}"; then
+  echo "${GREEN}✅ Docker image built successfully${NC}"
+else
+  echo "${RED}❌ Docker build failed${NC}"
+  exit 1
+fi
+
+echo ""
+
+# Step 2: Download Trivy HTML template
+echo "${GREEN}🔍 Step 2: Preparing Trivy scan...${NC}"
+HTML_TEMPLATE="html.tpl"
+if [ ! -f "${HTML_TEMPLATE}" ]; then
+  echo "Downloading Trivy HTML template..."
+  curl -sfL https://raw.githubusercontent.com/aquasecurity/trivy/main/contrib/html.tpl -o "${HTML_TEMPLATE}" || {
+    echo "${YELLOW}⚠️  Failed to download template, using default format${NC}"
+    HTML_TEMPLATE=""
+  }
+fi
+
+echo ""
+
+# Step 3: Scan image with Trivy
+echo "${GREEN}🔍 Step 3: Scanning image with Trivy...${NC}"
+REPORT_FILE="trivy-${APP_NAME}-report.html"
+SARIF_FILE="trivy-${APP_NAME}-report.sarif"
+JSON_FILE="trivy-${APP_NAME}-report.json"
+
+if [ "$USE_DOCKER_TRIVY" = true ]; then
+  docker run --rm \
+    -v /var/run/docker.sock:/var/run/docker.sock \
+    -v "$(pwd):/output" \
+    aquasecurity/trivy:latest \
+    image --format json --output "/output/${JSON_FILE}" \
+    --severity "${TRIVY_SEVERITY}" "${APP_IMAGE}:${APP_TAG}" || true
+else
+  trivy image --format json --output "${JSON_FILE}" \
+    --severity "${TRIVY_SEVERITY}" "${APP_IMAGE}:${APP_TAG}" || true
+fi
+
+echo ""
+
+# Step 4: Check for vulnerabilities
+echo "${GREEN}📊 Step 4: Analyzing scan results...${NC}"
+
+if [ -f "${JSON_FILE}" ]; then
+  VULN_COUNT=$(jq '[.Results[]?.Vulnerabilities[]?] | length' "${JSON_FILE}" 2>/dev/null || echo "0")
+  CRITICAL_COUNT=$(jq '[.Results[]?.Vulnerabilities[]? | select(.Severity == "CRITICAL")] | length' "${JSON_FILE}" 2>/dev/null || echo "0")
+  HIGH_COUNT=$(jq '[.Results[]?.Vulnerabilities[]? | select(.Severity == "HIGH")] | length' "${JSON_FILE}" 2>/dev/null || echo "0")
+
+  echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+  echo "Scan Results:"
+  echo "  Total Vulnerabilities: ${VULN_COUNT}"
+  echo "  Critical:              ${CRITICAL_COUNT}"
+  echo "  High:                  ${HIGH_COUNT}"
+  echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+
+  if [ "${FAIL_ON_VULN}" = "true" ] && [ "${VULN_COUNT}" -gt 0 ]; then
+    echo "${RED}🛑 Vulnerabilities found! Set FAIL_ON_VULN=false to continue.${NC}"
+    exit 1
+  elif [ "${VULN_COUNT}" -gt 0 ]; then
+    echo "${YELLOW}⚠️  Vulnerabilities found but continuing (FAIL_ON_VULN=false)${NC}"
+  else
+    echo "${GREEN}✅ No vulnerabilities found!${NC}"
+  fi
+else
+  echo "${YELLOW}⚠️  Could not parse scan results${NC}"
+fi
+
+echo ""
+echo "${GREEN}✅ Build and scan completed successfully!${NC}"

package/templates/nextjs/base/scripts/lighthouse-check.sh

@@ -0,0 +1,86 @@
+#!/bin/bash
+# Lighthouse CI check — runs against the production build
+# Requires: Next.js build complete, @lhci/cli installed
+
+set -euo pipefail
+
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m'
+
+PORT="${LIGHTHOUSE_PORT:-3000}"
+START_TIMEOUT=30 # seconds to wait for server to be ready
+
+# Check if lhci is available
+if ! npx lhci --version > /dev/null 2>&1; then
+  echo "${RED}❌ @lhci/cli not found. Run: npm install --save-dev @lhci/cli${NC}"
+  exit 1
+fi
+
+# Check if build output exists
+if [ ! -d ".next" ]; then
+  echo "${RED}❌ No .next directory found. Run 'npm run build' first.${NC}"
+  exit 1
+fi
+
+# Start Next.js production server in background
+echo "Starting Next.js server on port ${PORT}..."
+npm run start -- --port "${PORT}" &
+SERVER_PID=$!
+
+# Ensure server is killed on script exit
+cleanup() {
+  echo "Stopping server (PID ${SERVER_PID})..."
+  kill "${SERVER_PID}" 2>/dev/null || true
+}
+trap cleanup EXIT
+
+# Wait for server to be ready
+echo "Waiting for server to be ready..."
+ELAPSED=0
+until curl -sf "http://localhost:${PORT}" > /dev/null 2>&1; do
+  if [ "${ELAPSED}" -ge "${START_TIMEOUT}" ]; then
+    echo "${RED}❌ Server did not start within ${START_TIMEOUT}s${NC}"
+    exit 1
+  fi
+  sleep 1
+  ELAPSED=$((ELAPSED + 1))
+done
+echo "${GREEN}Server ready after ${ELAPSED}s${NC}"
+
+# Run Lighthouse CI
+echo "Running Lighthouse CI..."
+npx lhci autorun --config=.lighthouserc.json
+
+# Print score summary from the latest LHR JSON
+echo ""
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo "  Lighthouse Score Summary"
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+node -e "
+const fs = require('fs');
+const dir = '.lighthouseci';
+const lhrs = fs.readdirSync(dir).filter(f => f.startsWith('lhr-') && f.endsWith('.json'));
+if (!lhrs.length) { console.log('No LHR results found.'); process.exit(0); }
+const lhr = JSON.parse(fs.readFileSync(dir + '/' + lhrs[lhrs.length - 1], 'utf8'));
+const cats = lhr.categories;
+const score = (s) => Math.round(s * 100);
+const icon = (s) => s >= 90 ? '🟢' : s >= 50 ? '🟡' : '🔴';
+const fmt = (label, s) => console.log(icon(s) + '  ' + label.padEnd(18) + s);
+fmt('Performance',    score(cats.performance.score));
+fmt('Accessibility',  score(cats.accessibility.score));
+fmt('Best Practices', score(cats['best-practices'].score));
+fmt('SEO',            score(cats.seo.score));
+console.log('');
+const audits = lhr.audits;
+const ms = (v) => v >= 1000 ? (v/1000).toFixed(1) + 's' : Math.round(v) + 'ms';
+console.log('  FCP : ' + ms(audits['first-contentful-paint'].numericValue));
+console.log('  LCP : ' + ms(audits['largest-contentful-paint'].numericValue));
+console.log('  TBT : ' + ms(audits['total-blocking-time'].numericValue));
+console.log('  CLS : ' + audits['cumulative-layout-shift'].numericValue.toFixed(3));
+console.log('  TTI : ' + ms(audits['interactive'].numericValue));
+"
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+
+echo "${GREEN}✅ Lighthouse checks completed${NC}"

package/templates/nextjs/base/styles/theme.css

@@ -0,0 +1,63 @@
+/* Theme file — auto-generated by create-landing-app */
+/* This file is replaced by the theme preset you selected during scaffolding */
+/* To rebrand: edit the CSS variables below */
+
+/* Pila Theme (default) — white + deep blue */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.147 0.004 49.25);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+  --primary: oklch(0.45 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+  --secondary: oklch(0.97 0.015 210);
+  --secondary-foreground: oklch(0.216 0.006 56.043);
+  --muted: oklch(0.97 0.015 210);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.95 0.03 220);
+  --accent-foreground: oklch(0.45 0.18 250);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.88 0.04 220);
+  --input: oklch(0.88 0.04 220);
+  --ring: oklch(0.65 0.12 230);
+  --brand-primary: #1849a9;
+  --brand-action: #1570ef;
+  --brand-footer-from: #1764eb;
+  --brand-footer-to: #002d7b;
+  --brand-surface: #daf8ff;
+  --brand-border: #d1e9ff;
+  --brand-gradient-from: #327eff;
+  --brand-gradient-to: #ffffff;
+}
+
+.dark {
+  --background: oklch(0.1 0.02 250);
+  --foreground: oklch(0.985 0.001 106.423);
+  --card: oklch(0.15 0.03 250);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.15 0.03 250);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.65 0.16 250);
+  --primary-foreground: oklch(0.1 0.02 250);
+  --secondary: oklch(0.2 0.03 250);
+  --secondary-foreground: oklch(0.985 0.001 106.423);
+  --muted: oklch(0.2 0.03 250);
+  --muted-foreground: oklch(0.6 0.06 250);
+  --accent: oklch(0.2 0.03 250);
+  --accent-foreground: oklch(0.985 0.001 106.423);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --brand-primary: #6aaeff;
+  --brand-action: #3b82f6;
+  --brand-footer-from: #1e3a8a;
+  --brand-footer-to: #0f172a;
+  --brand-surface: #1e293b;
+  --brand-border: #334155;
+  --brand-gradient-from: #6aaeff;
+  --brand-gradient-to: #dbeafe;
+}

package/templates/nextjs/base/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/nextjs/base/types/index.ts

@@ -0,0 +1,16 @@
+export interface NavLink {
+  label: string;
+  href: string;
+}
+
+export interface Feature {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+export interface SocialLinks {
+  twitter?: string;
+  github?: string;
+  linkedin?: string;
+}

package/templates/nextjs/optional/docker/files/.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+.next
+.git
+*.log
+.env
+.env.local

package/templates/nextjs/optional/docker/files/Dockerfile

@@ -0,0 +1,36 @@
+# Stage 1: Install dependencies
+FROM node:20-alpine AS deps
+RUN corepack enable
+WORKDIR /app
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* bun.lockb* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then pnpm i --frozen-lockfile; \
+  elif [ -f bun.lockb ]; then bun install --frozen-lockfile; \
+  else echo "No lockfile found." && exit 1; \
+  fi
+
+# Stage 2: Build
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN yarn build
+
+# Stage 3: Production runner (standalone output)
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV PORT=3000
+
+# Run as non-root user for security (OWASP A05)
+RUN addgroup --system --gid 1001 nodejs && adduser --system --uid 1001 nextjs
+USER nextjs
+
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+
+EXPOSE 3000
+CMD ["node", "server.js"]

package/templates/nextjs/optional/docker/files/docker-compose.yml

@@ -0,0 +1,9 @@
+services:
+  web:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - NEXT_PUBLIC_SITE_URL=${NEXT_PUBLIC_SITE_URL}
+    restart: unless-stopped

package/templates/nextjs/optional/i18n-dict/files/app/[lang]/layout.tsx

@@ -0,0 +1,19 @@
+import Providers from "@/components/providers";
+import { getDictionary } from "@/get-dictionary";
+import { i18n, type Locale } from "@/i18n-config";
+
+export async function generateStaticParams() {
+  return i18n.locales.map((locale) => ({ lang: locale }));
+}
+
+export default async function Layout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ lang: string }>;
+}) {
+  const { lang } = await params;
+  const dict = await getDictionary(lang as Locale);
+  return <Providers dict={dict}>{children}</Providers>;
+}

package/templates/nextjs/optional/i18n-dict/files/app/[lang]/page.tsx

@@ -0,0 +1,15 @@
+import HeroSection from "@/components/sections/hero-section";
+import FeaturesSection from "@/components/sections/features-section";
+import FooterSection from "@/components/sections/footer-section";
+// __PAGE_IMPORTS__
+
+export default function Home() {
+  return (
+    <main>
+      <HeroSection />
+      <FeaturesSection />
+      {/* __PAGE_SECTIONS__ */}
+      <FooterSection />
+    </main>
+  );
+}

package/templates/nextjs/optional/i18n-dict/files/components/navs/language-switcher.tsx

@@ -0,0 +1,39 @@
+"use client";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+import { i18n, type Locale } from "@/i18n-config";
+
+const LOCALE_LABELS: Record<Locale, string> = {
+  en: "EN",
+  vi: "VI",
+};
+
+// Build the same page URL but with a different locale prefix
+function buildLocalePath(pathname: string, targetLocale: Locale, currentLocale: string): string {
+  if (pathname === `/${currentLocale}`) return `/${targetLocale}`;
+  return pathname.replace(`/${currentLocale}/`, `/${targetLocale}/`);
+}
+
+export default function LanguageSwitcher() {
+  const pathname = usePathname();
+  const params = useParams();
+  const currentLocale = (params?.lang as Locale) ?? i18n.defaultLocale;
+
+  return (
+    <div className="hidden items-center gap-1 rounded-md border border-border p-0.5 md:flex">
+      {i18n.locales.map((locale) => (
+        <Link
+          key={locale}
+          href={buildLocalePath(pathname, locale as Locale, currentLocale)}
+          className={`rounded px-2 py-0.5 text-xs font-medium transition-colors ${
+            currentLocale === locale
+              ? "bg-primary text-primary-foreground"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          {LOCALE_LABELS[locale as Locale] ?? locale.toUpperCase()}
+        </Link>
+      ))}
+    </div>
+  );
+}

package/templates/nextjs/optional/i18n-dict/files/components/navs/navbar-mobile.tsx

@@ -0,0 +1,41 @@
+"use client";
+import { useState } from "react";
+import Link from "next/link";
+import { Menu, X } from "lucide-react";
+import { NAV_LINKS } from "@/constants/common";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { useDictionary } from "@/lib/dict-context";
+
+export default function NavbarMobile() {
+  const [open, setOpen] = useState(false);
+  const dict = useDictionary();
+
+  return (
+    <div className="md:hidden">
+      <button onClick={() => setOpen(!open)} aria-label="Toggle menu">
+        {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+      </button>
+
+      {/* Slide-down mobile menu */}
+      <div
+        className={cn(
+          "absolute inset-x-0 top-16 flex flex-col gap-4 border-b bg-background p-6 transition-all duration-200",
+          open ? "visible opacity-100" : "invisible pointer-events-none opacity-0"
+        )}
+      >
+        {NAV_LINKS.map((link) => (
+          <Link
+            key={link.href}
+            href={link.href}
+            onClick={() => setOpen(false)}
+            className="text-sm font-medium"
+          >
+            {dict.nav[link.href.slice(1) as keyof typeof dict.nav] ?? link.label}
+          </Link>
+        ))}
+        <Button className="w-full">{dict.nav.getStarted}</Button>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/optional/i18n-dict/files/components/navs/navbar.tsx

@@ -0,0 +1,41 @@
+"use client";
+import Link from "next/link";
+import { NAV_LINKS, SITE_NAME } from "@/constants/common";
+import NavbarMobile from "./navbar-mobile";
+import { Button } from "@/components/ui/button";
+import LanguageSwitcher from "./language-switcher";
+import { useDictionary } from "@/lib/dict-context";
+
+export default function Navbar() {
+  const dict = useDictionary();
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/80 backdrop-blur-sm header-shadow">
+      <div className="content-container flex h-16 items-center justify-between">
+        {/* Logo */}
+        <Link href="/" className="flex items-center gap-2 text-xl font-bold text-primary">
+          {SITE_NAME}
+        </Link>
+
+        {/* Desktop nav */}
+        <nav className="hidden items-center gap-6 md:flex">
+          {NAV_LINKS.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+            >
+              {dict.nav[link.href.slice(1) as keyof typeof dict.nav] ?? link.label}
+            </Link>
+          ))}
+        </nav>
+
+        {/* CTA + mobile toggle */}
+        <div className="flex items-center gap-3">
+          <LanguageSwitcher />
+          <Button className="hidden md:flex">{dict.nav.getStarted}</Button>
+          <NavbarMobile />
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/nextjs/optional/i18n-dict/files/components/providers.tsx

@@ -0,0 +1,16 @@
+"use client";
+import { DictProvider } from "@/lib/dict-context";
+import type en from "@/dictionaries/en.json";
+
+type Dictionary = typeof en;
+
+export default function Providers({
+  children,
+  dict,
+}: {
+  children: React.ReactNode;
+  dict?: Dictionary;
+}) {
+  const content = <>{children}</>;
+  return dict ? <DictProvider dict={dict}>{content}</DictProvider> : content;
+}

package/templates/nextjs/optional/i18n-dict/files/components/sections/features-section.tsx

@@ -0,0 +1,80 @@
+"use client";
+import { motion } from "motion/react";
+import { Zap, Shield, Palette, Globe, Code, Rocket } from "lucide-react";
+import { useDictionary } from "@/lib/dict-context";
+
+const FEATURES = [
+  {
+    icon: Zap,
+    title: "Lightning fast",
+    description: "Built on Next.js 15 with Turbopack. Dev server starts in milliseconds.",
+  },
+  {
+    icon: Shield,
+    title: "Secure by default",
+    description: "Best-practice security headers, no inline scripts, CSP-ready.",
+  },
+  {
+    icon: Palette,
+    title: "Fully themeable",
+    description: "5 beautiful presets. One CSS file to rebrand completely.",
+  },
+  {
+    icon: Globe,
+    title: "i18n ready",
+    description: "Optional dictionary-based translation. Zero extra dependencies.",
+  },
+  {
+    icon: Code,
+    title: "Clean code",
+    description: "TypeScript, ESLint, component-first architecture. Easy to extend.",
+  },
+  {
+    icon: Rocket,
+    title: "Deploy anywhere",
+    description: "Docker-ready standalone output. Ships to any VPS in minutes.",
+  },
+];
+
+export default function FeaturesSection() {
+  const dict = useDictionary();
+  return (
+    <section id="features" className="bg-secondary/30 py-24">
+      <div className="content-container">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+          className="mb-16 space-y-4 text-center"
+        >
+          <h2 className="text-4xl font-bold">{dict.features.title}</h2>
+          <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
+            {dict.features.subtitle}
+          </p>
+        </motion.div>
+
+        {/* Feature grid */}
+        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {FEATURES.map((feature, i) => (
+            <motion.div
+              key={feature.title}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: i * 0.08 }}
+              className="group rounded-2xl border border-border bg-background p-6 transition-all duration-300 hover:border-primary/40 hover:shadow-md"
+            >
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-accent transition-colors group-hover:bg-primary/10">
+                <feature.icon className="h-6 w-6 text-primary" />
+              </div>
+              <h3 className="mb-2 text-lg font-semibold">{feature.title}</h3>
+              <p className="text-sm leading-relaxed text-muted-foreground">{feature.description}</p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}