Implement all basic public page

.env.example

@@ -35,3 +35,7 @@ BASESCAN_API_KEY="your_basescan_api_key"
 
 # Mapbox (for scan location maps)
 NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN="your_mapbox_access_token"
+
+# Ghost Blog API (for blog posts)
+NEXT_PUBLIC_GHOST_URL="https://blog.example.com"
+NEXT_PUBLIC_TOKEN="your_ghost_content_api_key"

CLAUDE.md

@@ -106,6 +106,16 @@ Server actions are organized in `src/lib/actions/`:
 **Public Routes:**
 
 - `/` - Public landing page
+- `/about` - About Etags, mission, vision, team
+- `/features` - Comprehensive features showcase
+- `/pricing` - Pricing plans and FAQs
+- `/showcase` - Success stories and testimonials
+- `/careers` - Job openings and company culture
+- `/contact` - Contact form and information
+- `/blog` - Blog articles from Ghost CMS
+- `/privacy` - Privacy policy
+- `/terms` - Terms and conditions
+- `/security` - Security practices and policies
 - `/login` - Login page (redirects to /manage if authenticated)
 - `/register` - User registration page
 - `/scan` - QR code scanner for tag verification
@@ -249,3 +259,4 @@ Copy `.env.example` to `.env` and configure:
 - `KOLOSAL_API_KEY` - Kolosal AI for fraud detection
 - `BASESCAN_API_KEY` - BaseScan API for explorer features
 - `NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN` - Mapbox token for scan location maps
+- `NEXT_PUBLIC_TOKEN` - Ghost CMS Content API key for blog posts

README.md

@@ -29,7 +29,8 @@
 | Blockchain | ethers.js, ERC721 NFT (Base Sepolia)              |
 | Storage    | Cloudflare R2                                     |
 | AI         | Kolosal AI (Fraud Detection), Gemini AI (NFT Art) |
-| Styling    | Tailwind CSS v4, shadcn/ui                        |
+| CMS        | Ghost CMS (Blog)                                  |
+| Styling    | Tailwind CSS v4, shadcn/ui, Framer Motion         |
 | Testing    | Vitest                                            |
 
 ## Features
@@ -53,6 +54,14 @@
 - **Auto Product Detection** - System detects owned products from NFT
 - **Brand/Admin Routing** - Tickets route to brand, fallback to admin
 
+### Public Pages
+
+- **Landing & Marketing** - About, Features, Pricing, Showcase pages
+- **Company** - Careers, Contact pages with form integration
+- **Legal** - Privacy Policy, Terms & Conditions, Security documentation
+- **Blog** - Ghost CMS integration with pagination support
+- **Resources** - FAQ, API Documentation (Swagger)
+
 ## Quick Start
 
 ```bash
@@ -89,20 +98,49 @@ NFT_CONTRACT_ADDRESS, NEXT_PUBLIC_NFT_CONTRACT_ADDRESS, GEMINI_API_KEY
 
 # Optional - AI
 KOLOSAL_API_KEY
+
+# Optional - Blog
+NEXT_PUBLIC_TOKEN="ghost_content_api_key"  # Ghost CMS Content API Key
 ```
 
 ## Routes
 
-| Route            | Description          |
-| ---------------- | -------------------- |
-| `/`              | Landing page         |
-| `/login`         | Authentication       |
-| `/scan`          | QR scanner           |
-| `/verify/[code]` | Tag verification     |
-| `/support`       | Web3 support tickets |
-| `/explorer`      | Blockchain explorer  |
-| `/manage/*`      | Admin dashboard      |
-| `/docs`          | Swagger API docs     |
+### Public Routes
+
+| Route            | Description               |
+| ---------------- | ------------------------- |
+| `/`              | Landing page              |
+| `/about`         | About company & team      |
+| `/features`      | Features showcase         |
+| `/pricing`       | Pricing plans             |
+| `/showcase`      | Success stories           |
+| `/careers`       | Job openings              |
+| `/contact`       | Contact form              |
+| `/blog`          | Blog articles (Ghost CMS) |
+| `/privacy`       | Privacy policy            |
+| `/terms`         | Terms & conditions        |
+| `/security`      | Security practices        |
+| `/faqs`          | FAQ page                  |
+| `/login`         | Authentication            |
+| `/register`      | User registration         |
+| `/scan`          | QR scanner                |
+| `/verify/[code]` | Tag verification          |
+| `/support`       | Web3 support tickets      |
+| `/explorer`      | Blockchain explorer       |
+| `/docs`          | Swagger API docs          |
+
+### Admin Routes
+
+| Route              | Description             |
+| ------------------ | ----------------------- |
+| `/manage`          | Dashboard home          |
+| `/manage/brands`   | Brand management        |
+| `/manage/products` | Product CRUD            |
+| `/manage/tags`     | Tag management          |
+| `/manage/nfts`     | NFT monitoring          |
+| `/manage/tickets`  | Support tickets         |
+| `/manage/users`    | User management (admin) |
+| `/manage/profile`  | Profile settings        |
 
 ## Scripts
 
@@ -129,17 +167,21 @@ docker run -p 3000:3000 -e DATABASE_URL="..." -e AUTH_SECRET="..." etags
 
 ```
 src/
-├── app/           # Next.js App Router
-│   ├── api/       # API Routes
-│   ├── manage/    # Admin Dashboard
-│   └── support/   # Web3 Support
+├── app/                # Next.js App Router
+│   ├── api/            # API Routes
+│   ├── manage/         # Admin Dashboard
+│   ├── about/          # Public pages (about, features, pricing, etc.)
+│   ├── blog/           # Blog with Ghost CMS
+│   └── support/        # Web3 Support
 ├── lib/
-│   ├── actions/   # Server Actions
-│   └── *.ts       # Utilities (db, auth, r2, blockchain)
+│   ├── actions/        # Server Actions
+│   └── *.ts            # Utilities (db, auth, r2, blockchain)
 ├── components/
-│   ├── ui/        # shadcn/ui components
-│   └── landing/   # Landing page components
-└── tests/         # Test setup & mocks
+│   ├── ui/             # shadcn/ui components
+│   ├── landing/        # Landing page components
+│   ├── blog/           # Blog components (Grid, Pagination)
+│   └── faq/            # FAQ components
+└── tests/              # Test setup & mocks
 ```
 
 ## NFT Collectible Flow
@@ -159,9 +201,14 @@ src/
 | Phase 3 | 🔜     | Distribution Tracking, Supply Chain                                    |
 | Phase 4 | 🔜     | Blockchain Warranty                                                    |
 | Phase 5 | ✅     | Web3 Support Tickets                                                   |
+| Phase 6 | ✅     | Public Pages & Blog (Ghost CMS)                                        |
 
 See [ROADMAP.md](./ROADMAP.md) for details.
 
+## Contributing
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for contribution guidelines.
+
 ## License
 
 MIT

next.config.ts

@@ -23,6 +23,21 @@ const nextConfig: NextConfig = {
         protocol: 'https',
         hostname: '*.cloudflarestorage.com',
       },
+      {
+        // Ghost CMS blog images
+        protocol: 'https',
+        hostname: 'blog.javapixa.com',
+      },
+      {
+        // Unsplash images (used by Ghost)
+        protocol: 'https',
+        hostname: 'images.unsplash.com',
+      },
+      {
+        // Ghost CDN
+        protocol: 'https',
+        hostname: 'static.ghost.org',
+      },
     ],
   },
 };

package.json

@@ -45,6 +45,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@types/mapbox-gl": "^3.4.1",
+    "axios": "^1.13.2",
     "bcryptjs": "^3.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

src/app/about/page.tsx

@@ -0,0 +1,49 @@
+import { Metadata } from 'next';
+import { Navbar } from '@/components/landing/Navbar';
+import { Footer } from '@/components/landing/Footer';
+import {
+  AboutHero,
+  MissionVision,
+  ValuesSection,
+  TechnologyStack,
+  TeamSection,
+  StatsSection,
+} from '@/components/about';
+
+export const metadata: Metadata = {
+  title: 'About Us - Etags',
+  description:
+    'Learn about Etags, our mission to secure product authenticity with blockchain technology, and meet the team behind the platform.',
+  openGraph: {
+    title: 'About Us - Etags',
+    description:
+      'Platform verifikasi produk berbasis blockchain yang mengamankan rantai pasokan.',
+  },
+};
+
+export default function AboutPage() {
+  return (
+    <div className="relative min-h-screen bg-white font-sans selection:bg-[#2B4C7E]/20 selection:text-[#0C2340]">
+      {/* Background Effects */}
+      <div className="fixed inset-0 pointer-events-none z-0">
+        <div className="absolute top-[-10%] left-[-5%] w-[50vw] h-[50vw] rounded-full bg-[#2B4C7E]/10 blur-[120px]" />
+        <div className="absolute bottom-[-10%] right-[-10%] w-[40vw] h-[40vw] rounded-full bg-[#A8A8A8]/20 blur-[120px]" />
+      </div>
+
+      <Navbar />
+
+      <main className="relative z-10 pt-32 pb-16">
+        <div className="container mx-auto px-4 sm:px-6">
+          <AboutHero />
+          <MissionVision />
+          <ValuesSection />
+          <TechnologyStack />
+          <TeamSection />
+          <StatsSection />
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}