@digilogiclabs/create-saas-app 2.9.1 → 2.11.0

package/src/templates/web/marketplace/template/src/app/products/[id]/page.tsx

@@ -0,0 +1,218 @@
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { ArrowLeft, Star, ShoppingCart, MessageCircle, ShoppingBag } from 'lucide-react'
+import Link from 'next/link'
+
+const PRODUCTS: Record<string, {
+  id: string
+  name: string
+  price: number
+  vendor: string
+  rating: number
+  reviews: number
+  category: string
+  description: string
+  features: string[]
+}> = {
+  '1': {
+    id: '1',
+    name: 'Premium Widget Pro',
+    price: 49.99,
+    vendor: 'TechCo',
+    rating: 4.8,
+    reviews: 124,
+    category: 'Software',
+    description: 'A comprehensive widget toolkit that helps developers build beautiful, responsive interfaces in minutes. Includes 50+ pre-built components, dark mode support, and full TypeScript definitions. Perfect for startups and teams looking to ship faster without sacrificing quality.',
+    features: ['50+ Pre-built Components', 'Dark Mode Support', 'TypeScript Definitions', 'Lifetime Updates'],
+  },
+  '2': {
+    id: '2',
+    name: 'Developer Toolkit',
+    price: 129.99,
+    vendor: 'DevTools',
+    rating: 4.9,
+    reviews: 87,
+    category: 'Software',
+    description: 'The ultimate developer toolkit packed with debugging utilities, code generators, and productivity boosters. Streamline your development workflow with intelligent code analysis, automated refactoring tools, and seamless CI/CD integration.',
+    features: ['Code Generator', 'Debugging Utilities', 'CI/CD Integration', 'Team Collaboration'],
+  },
+  '3': {
+    id: '3',
+    name: 'UI Design Pack',
+    price: 79.99,
+    vendor: 'CreativeStudio',
+    rating: 4.7,
+    reviews: 203,
+    category: 'Templates',
+    description: 'A stunning collection of UI design templates for web and mobile applications. Each template is fully customizable and built with modern design principles. Includes Figma source files, responsive layouts, and component documentation.',
+    features: ['Figma Source Files', 'Responsive Layouts', 'Component Docs', '100+ Screens'],
+  },
+  '4': {
+    id: '4',
+    name: 'Analytics Dashboard',
+    price: 199.99,
+    vendor: 'DataCorp',
+    rating: 4.6,
+    reviews: 56,
+    category: 'Software',
+    description: 'Real-time analytics dashboard with advanced data visualization capabilities. Track key metrics, create custom reports, and share insights with your team. Supports multiple data sources and provides AI-powered trend analysis.',
+    features: ['Real-time Analytics', 'Custom Reports', 'AI Trend Analysis', 'Multi-source Support'],
+  },
+  '5': {
+    id: '5',
+    name: 'Marketing Templates',
+    price: 39.99,
+    vendor: 'GrowthLab',
+    rating: 4.5,
+    reviews: 312,
+    category: 'Templates',
+    description: 'Ready-to-use marketing templates for landing pages, email campaigns, and social media. Conversion-optimized designs backed by A/B testing data from thousands of campaigns.',
+    features: ['Landing Pages', 'Email Templates', 'Social Media Kit', 'A/B Tested Designs'],
+  },
+}
+
+const RELATED_PRODUCTS = [
+  { id: '2', name: 'Developer Toolkit', price: 129.99, vendor: 'DevTools', rating: 4.9, category: 'Software' },
+  { id: '3', name: 'UI Design Pack', price: 79.99, vendor: 'CreativeStudio', rating: 4.7, category: 'Templates' },
+  { id: '5', name: 'Marketing Templates', price: 39.99, vendor: 'GrowthLab', rating: 4.5, category: 'Templates' },
+]
+
+function StarRating({ rating, reviews }: { rating: number; reviews: number }) {
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex items-center">
+        {[...Array(5)].map((_, i) => (
+          <Star
+            key={i}
+            className={`w-5 h-5 ${
+              i < Math.floor(rating)
+                ? 'text-amber-500 fill-amber-500'
+                : i < rating
+                  ? 'text-amber-500 fill-amber-500/50'
+                  : 'text-muted-foreground/30'
+            }`}
+          />
+        ))}
+      </div>
+      <span className="text-sm text-muted-foreground">
+        {rating} ({reviews} reviews)
+      </span>
+    </div>
+  )
+}
+
+export default async function ProductDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params
+  const product = PRODUCTS[id] || PRODUCTS['1']
+
+  const relatedProducts = RELATED_PRODUCTS.filter(p => p.id !== product.id).slice(0, 3)
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Back Link */}
+        <Link
+          href="/products"
+          className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-6 transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4 mr-1" />
+          Back to Products
+        </Link>
+
+        {/* Product Detail */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
+          {/* Product Image */}
+          <div className="aspect-video bg-muted rounded-xl flex items-center justify-center border border-border">
+            <div className="text-center">
+              <ShoppingBag className="w-16 h-16 mx-auto text-muted-foreground/30 mb-2" />
+              <p className="text-sm text-muted-foreground">Product Preview</p>
+            </div>
+          </div>
+
+          {/* Product Info */}
+          <div>
+            <div className="mb-4">
+              <span className="inline-block px-3 py-1 text-xs font-medium bg-primary text-primary-foreground rounded-full mb-3">
+                {product.category}
+              </span>
+              <h1 className="text-2xl font-bold text-foreground mb-2">
+                {product.name}
+              </h1>
+              <p className="text-muted-foreground">
+                by {product.vendor}
+              </p>
+            </div>
+
+            <StarRating rating={product.rating} reviews={product.reviews} />
+
+            <p className="text-3xl font-bold text-primary mt-4 mb-6">
+              ${product.price}
+            </p>
+
+            <p className="text-muted-foreground leading-relaxed mb-6">
+              {product.description}
+            </p>
+
+            {/* Features */}
+            <div className="mb-6">
+              <h3 className="text-sm font-semibold text-foreground mb-3">What&apos;s Included</h3>
+              <ul className="grid grid-cols-2 gap-2">
+                {product.features.map((feature) => (
+                  <li key={feature} className="flex items-center text-sm text-muted-foreground">
+                    <span className="w-1.5 h-1.5 bg-primary rounded-full mr-2 flex-shrink-0" />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Actions */}
+            <div className="flex gap-3">
+              <Button size="lg" className="flex-1">
+                <ShoppingCart className="w-4 h-4 mr-2" />
+                Add to Cart
+              </Button>
+              <Button variant="outline" size="lg" className="flex-1">
+                <MessageCircle className="w-4 h-4 mr-2" />
+                Contact Vendor
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Related Products */}
+        <div>
+          <h2 className="text-2xl font-bold text-foreground mb-6">Related Products</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+            {relatedProducts.map((item) => (
+              <Card key={item.id} className="overflow-hidden hover:shadow-lg transition-shadow">
+                <div className="aspect-square bg-muted relative">
+                  <span className="absolute top-2 left-2 bg-primary text-primary-foreground text-xs px-2 py-1 rounded">
+                    {item.category}
+                  </span>
+                </div>
+                <div className="p-4">
+                  <h3 className="font-semibold text-foreground mb-1">{item.name}</h3>
+                  <p className="text-sm text-muted-foreground mb-2">by {item.vendor}</p>
+                  <div className="flex items-center justify-between mb-3">
+                    <span className="text-lg font-bold text-primary">${item.price}</span>
+                    <div className="flex items-center text-amber-500">
+                      <Star className="w-4 h-4 fill-current" />
+                      <span className="text-sm ml-1">{item.rating}</span>
+                    </div>
+                  </div>
+                  <Link href={`/products/${item.id}`}>
+                    <Button variant="outline" size="sm" className="w-full">View Details</Button>
+                  </Link>
+                </div>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/templates/web/marketplace/template/src/app/products/page.tsx

@@ -1,129 +1,129 @@
-'use client'
-
-import { useState } from 'react'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { Search, Filter, Star, ShoppingCart } from 'lucide-react'
-import Link from 'next/link'
-
-const PRODUCTS = [
-  { id: 1, name: 'Premium Widget Pro', price: 49.99, vendor: 'TechCo', rating: 4.8, category: 'Software', sales: 234 },
-  { id: 2, name: 'Developer Toolkit', price: 129.99, vendor: 'DevTools', rating: 4.9, category: 'Software', sales: 156 },
-  { id: 3, name: 'UI Design Pack', price: 79.99, vendor: 'CreativeStudio', rating: 4.7, category: 'Templates', sales: 89 },
-  { id: 4, name: 'Analytics Dashboard', price: 199.99, vendor: 'DataCorp', rating: 4.6, category: 'Software', sales: 67 },
-  { id: 5, name: 'Marketing Templates', price: 39.99, vendor: 'GrowthLab', rating: 4.5, category: 'Templates', sales: 312 },
-  { id: 6, name: 'API Integration Kit', price: 149.99, vendor: 'APIExperts', rating: 4.8, category: 'Software', sales: 178 },
-  { id: 7, name: 'SEO Course Bundle', price: 99.99, vendor: 'SEOMasters', rating: 4.9, category: 'Courses', sales: 245 },
-  { id: 8, name: 'Cloud Consulting', price: 299.99, vendor: 'CloudPros', rating: 4.7, category: 'Services', sales: 45 },
-]
-
-const CATEGORIES = ['All', 'Software', 'Templates', 'Courses', 'Services']
-
-export default function ProductsPage() {
-  const [searchQuery, setSearchQuery] = useState('')
-  const [selectedCategory, setSelectedCategory] = useState('All')
-  const [sortBy, setSortBy] = useState('popular')
-
-  const filteredProducts = PRODUCTS
-    .filter(p => selectedCategory === 'All' || p.category === selectedCategory)
-    .filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase()))
-    .sort((a, b) => {
-      if (sortBy === 'popular') return b.sales - a.sales
-      if (sortBy === 'price-low') return a.price - b.price
-      if (sortBy === 'price-high') return b.price - a.price
-      if (sortBy === 'rating') return b.rating - a.rating
-      return 0
-    })
-
-  return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      {/* Header */}
-      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
-        <div className="max-w-7xl mx-auto px-4 py-6">
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Products</h1>
-
-          {/* Search and Filters */}
-          <div className="flex flex-col md:flex-row gap-4">
-            <div className="flex-1 relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
-              <input
-                type="text"
-                placeholder="Search products..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-              />
-            </div>
-
-            <div className="flex gap-2">
-              <select
-                value={sortBy}
-                onChange={(e) => setSortBy(e.target.value)}
-                className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-              >
-                <option value="popular">Most Popular</option>
-                <option value="rating">Highest Rated</option>
-                <option value="price-low">Price: Low to High</option>
-                <option value="price-high">Price: High to Low</option>
-              </select>
-            </div>
-          </div>
-
-          {/* Categories */}
-          <div className="flex gap-2 mt-4 overflow-x-auto pb-2">
-            {CATEGORIES.map((category) => (
-              <Button
-                key={category}
-                variant={selectedCategory === category ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setSelectedCategory(category)}
-              >
-                {category}
-              </Button>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Products Grid */}
-      <div className="max-w-7xl mx-auto px-4 py-8">
-        <div className="flex items-center justify-between mb-6">
-          <p className="text-gray-600 dark:text-gray-300">
-            {filteredProducts.length} products found
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-          {filteredProducts.map((product) => (
-            <Card key={product.id} className="overflow-hidden hover:shadow-lg transition-shadow">
-              <div className="aspect-square bg-gray-100 dark:bg-gray-700 relative">
-                <span className="absolute top-2 left-2 bg-blue-600 text-white text-xs px-2 py-1 rounded">
-                  {product.category}
-                </span>
-              </div>
-              <div className="p-4">
-                <h3 className="font-semibold text-gray-900 dark:text-white mb-1">{product.name}</h3>
-                <p className="text-sm text-gray-500 mb-2">by {product.vendor}</p>
-                <div className="flex items-center justify-between mb-3">
-                  <span className="text-lg font-bold text-blue-600">${product.price}</span>
-                  <div className="flex items-center text-yellow-500">
-                    <Star className="w-4 h-4 fill-current" />
-                    <span className="text-sm ml-1">{product.rating}</span>
-                  </div>
-                </div>
-                <div className="flex gap-2">
-                  <Button className="flex-1" size="sm">
-                    <ShoppingCart className="w-4 h-4 mr-1" />
-                    Add
-                  </Button>
-                  <Link href={`/products/${product.id}`} className="flex-1">
-                    <Button variant="outline" size="sm" className="w-full">View</Button>
-                  </Link>
-                </div>
-              </div>
-            </Card>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
+'use client'
+
+import { useState } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Search, Filter, Star, ShoppingCart } from 'lucide-react'
+import Link from 'next/link'
+
+const PRODUCTS = [
+  { id: 1, name: 'Premium Widget Pro', price: 49.99, vendor: 'TechCo', rating: 4.8, category: 'Software', sales: 234 },
+  { id: 2, name: 'Developer Toolkit', price: 129.99, vendor: 'DevTools', rating: 4.9, category: 'Software', sales: 156 },
+  { id: 3, name: 'UI Design Pack', price: 79.99, vendor: 'CreativeStudio', rating: 4.7, category: 'Templates', sales: 89 },
+  { id: 4, name: 'Analytics Dashboard', price: 199.99, vendor: 'DataCorp', rating: 4.6, category: 'Software', sales: 67 },
+  { id: 5, name: 'Marketing Templates', price: 39.99, vendor: 'GrowthLab', rating: 4.5, category: 'Templates', sales: 312 },
+  { id: 6, name: 'API Integration Kit', price: 149.99, vendor: 'APIExperts', rating: 4.8, category: 'Software', sales: 178 },
+  { id: 7, name: 'SEO Course Bundle', price: 99.99, vendor: 'SEOMasters', rating: 4.9, category: 'Courses', sales: 245 },
+  { id: 8, name: 'Cloud Consulting', price: 299.99, vendor: 'CloudPros', rating: 4.7, category: 'Services', sales: 45 },
+]
+
+const CATEGORIES = ['All', 'Software', 'Templates', 'Courses', 'Services']
+
+export default function ProductsPage() {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState('All')
+  const [sortBy, setSortBy] = useState('popular')
+
+  const filteredProducts = PRODUCTS
+    .filter(p => selectedCategory === 'All' || p.category === selectedCategory)
+    .filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase()))
+    .sort((a, b) => {
+      if (sortBy === 'popular') return b.sales - a.sales
+      if (sortBy === 'price-low') return a.price - b.price
+      if (sortBy === 'price-high') return b.price - a.price
+      if (sortBy === 'rating') return b.rating - a.rating
+      return 0
+    })
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <div className="bg-card border-b border-border">
+        <div className="max-w-7xl mx-auto px-4 py-6">
+          <h1 className="text-3xl font-bold text-foreground mb-4">Products</h1>
+
+          {/* Search and Filters */}
+          <div className="flex flex-col md:flex-row gap-4">
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
+              <input
+                type="text"
+                placeholder="Search products..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 border border-input rounded-lg focus:ring-2 focus:ring-ring bg-background text-foreground"
+              />
+            </div>
+
+            <div className="flex gap-2">
+              <select
+                value={sortBy}
+                onChange={(e) => setSortBy(e.target.value)}
+                className="px-4 py-2 border border-input rounded-lg focus:ring-2 focus:ring-ring bg-background text-foreground"
+              >
+                <option value="popular">Most Popular</option>
+                <option value="rating">Highest Rated</option>
+                <option value="price-low">Price: Low to High</option>
+                <option value="price-high">Price: High to Low</option>
+              </select>
+            </div>
+          </div>
+
+          {/* Categories */}
+          <div className="flex gap-2 mt-4 overflow-x-auto pb-2">
+            {CATEGORIES.map((category) => (
+              <Button
+                key={category}
+                variant={selectedCategory === category ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setSelectedCategory(category)}
+              >
+                {category}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Products Grid */}
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        <div className="flex items-center justify-between mb-6">
+          <p className="text-muted-foreground">
+            {filteredProducts.length} products found
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {filteredProducts.map((product) => (
+            <Card key={product.id} className="overflow-hidden hover:shadow-lg transition-shadow">
+              <div className="aspect-square bg-muted relative">
+                <span className="absolute top-2 left-2 bg-primary text-primary-foreground text-xs px-2 py-1 rounded">
+                  {product.category}
+                </span>
+              </div>
+              <div className="p-4">
+                <h3 className="font-semibold text-foreground mb-1">{product.name}</h3>
+                <p className="text-sm text-muted-foreground mb-2">by {product.vendor}</p>
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-lg font-bold text-primary">${product.price}</span>
+                  <div className="flex items-center text-amber-500">
+                    <Star className="w-4 h-4 fill-current" />
+                    <span className="text-sm ml-1">{product.rating}</span>
+                  </div>
+                </div>
+                <div className="flex gap-2">
+                  <Button className="flex-1" size="sm">
+                    <ShoppingCart className="w-4 h-4 mr-1" />
+                    Add
+                  </Button>
+                  <Link href={`/products/${product.id}`} className="flex-1">
+                    <Button variant="outline" size="sm" className="w-full">View</Button>
+                  </Link>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/templates/web/marketplace/template/src/app/settings/page.tsx

@@ -0,0 +1,150 @@
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { User, Bell, CreditCard } from 'lucide-react'
+import { requireAuth } from '@/lib/auth-server'
+
+function ToggleSwitch({ defaultChecked = false }: { defaultChecked?: boolean }) {
+  return (
+    <label className="relative inline-flex items-center cursor-pointer">
+      <input type="checkbox" className="sr-only peer" defaultChecked={defaultChecked} />
+      <div className="w-11 h-6 bg-muted rounded-full peer peer-checked:bg-primary peer-focus:ring-2 peer-focus:ring-ring after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-background after:border after:border-border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full" />
+    </label>
+  )
+}
+
+export default async function SettingsPage() {
+  const user = await requireAuth()
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-3xl mx-auto px-4 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-foreground">Settings</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage your account preferences
+          </p>
+        </div>
+
+        <div className="space-y-6">
+          {/* Profile Section */}
+          <Card className="p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <User className="w-5 h-5 text-primary" />
+              <h2 className="text-lg font-semibold text-foreground">Profile</h2>
+            </div>
+
+            <div className="space-y-4">
+              {/* Avatar */}
+              <div className="flex items-center gap-4 mb-6">
+                <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center border border-border">
+                  <User className="w-8 h-8 text-muted-foreground" />
+                </div>
+                <Button variant="outline" size="sm">Change Avatar</Button>
+              </div>
+
+              {/* Name */}
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-foreground mb-1.5">
+                  Display Name
+                </label>
+                <input
+                  id="name"
+                  type="text"
+                  defaultValue={user.name || ''}
+                  placeholder="Your name"
+                  className="w-full px-4 py-2 border border-input rounded-lg focus:ring-2 focus:ring-ring bg-background text-foreground"
+                />
+              </div>
+
+              {/* Email (read-only) */}
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-1.5">
+                  Email Address
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={user.email || ''}
+                  readOnly
+                  className="w-full px-4 py-2 border border-input rounded-lg bg-muted text-muted-foreground cursor-not-allowed"
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  Email cannot be changed. Contact support if you need to update it.
+                </p>
+              </div>
+            </div>
+          </Card>
+
+          {/* Notification Preferences */}
+          <Card className="p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <Bell className="w-5 h-5 text-primary" />
+              <h2 className="text-lg font-semibold text-foreground">Notifications</h2>
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center justify-between py-2">
+                <div>
+                  <p className="font-medium text-foreground">Order Updates</p>
+                  <p className="text-sm text-muted-foreground">
+                    Get notified when your order status changes
+                  </p>
+                </div>
+                <ToggleSwitch defaultChecked />
+              </div>
+
+              <div className="border-t border-border" />
+
+              <div className="flex items-center justify-between py-2">
+                <div>
+                  <p className="font-medium text-foreground">Marketing Emails</p>
+                  <p className="text-sm text-muted-foreground">
+                    Receive deals, promotions, and product recommendations
+                  </p>
+                </div>
+                <ToggleSwitch />
+              </div>
+
+              <div className="border-t border-border" />
+
+              <div className="flex items-center justify-between py-2">
+                <div>
+                  <p className="font-medium text-foreground">Vendor Messages</p>
+                  <p className="text-sm text-muted-foreground">
+                    Get notified when a vendor replies to your message
+                  </p>
+                </div>
+                <ToggleSwitch defaultChecked />
+              </div>
+            </div>
+          </Card>
+
+          {/* Payment Methods */}
+          <Card className="p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <CreditCard className="w-5 h-5 text-primary" />
+              <h2 className="text-lg font-semibold text-foreground">Payment Methods</h2>
+            </div>
+
+            <div className="text-center py-6">
+              <CreditCard className="w-12 h-12 mx-auto mb-3 text-muted-foreground/50" />
+              <p className="text-muted-foreground mb-4">
+                No payment methods saved yet
+              </p>
+              <Button variant="outline">
+                Add Payment Method
+              </Button>
+            </div>
+          </Card>
+
+          {/* Save Button */}
+          <div className="flex justify-end">
+            <Button size="lg">
+              Save Changes
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}