Added, product listing , Enhance Product Page with New Components and Improved UI/UX

.gitignore

@@ -63,7 +63,6 @@ dist
 
 # Gatsby files
 .cache/
-public
 
 # Storybook build outputs
 .out

README.md

@@ -22,58 +22,91 @@ AppSutra is a community-driven directory of SaaS products optimized for Indian b
 ### Adding Your Product
 
 1. **Fork this repository**
-2. **Create your listing file** at `listings/<category>/<slug>.md`
+2. **Create your listing file** at `listings/<category-folder>/<your-product>.md`
 3. **Fill in the details** using our template (see example below)
 4. **Open a Pull Request** - our validation will run automatically
 5. **Get reviewed** by maintainers and go live!
 
+> **Note:** Slugs are auto-generated from your `name` and `category` fields in YAML. The filename must match `slugify(name)` and the folder must match `slugify(category)`. Validation runs automatically on PR submission.
+
 ### Example Listing Structure
 
 ```yaml
 ---
-name: "Zoho CRM"
-slug: "zoho-crm"
-category: "crm"
-website: "https://www.zoho.com/crm/"
-logo: "https://example.com/logo.png"
-pricing: "Free + Paid from ₹900/mo"
-locations: ["India", "Global"]
-use_cases: ["SMB", "Sales Automation", "Lead Management"]
-keywords: ["crm", "sales", "automation"]
-trial: true
-integrations: ["Gmail", "WhatsApp", "Zapier"]
-contact_email: "partners@zoho.com"
-listing_owner_github: "@zohocrm"
-verified: false
-updated_at: "2025-09-15"
+icon: "https://example.com/logo.png"
+name: "Razorpay"
+company: "Razorpay Software Private Limited"
+trialPlan: true
+trialPlanPricing: "Free"
+category: "Finance"
+# IMPORTANT: Do NOT add 'slug' or 'categorySlug' fields
+# They are auto-generated during validation and build from 'name' and 'category'
+# - Filename must be: slugify("Razorpay") = "razorpay.md"
+# - Folder must be: slugify("Finance") = "finance/"
+#  - Location: listings/finance/razorpay.md
+useCases:
+  - "Online Payments"
+  - "E-commerce"
+  - "Subscription Billing"
+keywords:
+  - "payment gateway"
+  - "online payments"
+  - "e-commerce"
+integration:
+  - title: "Shopify"
+  - title: "WooCommerce"
+  - title: "Zapier"
+description: |
+  Razorpay is a comprehensive payment gateway platform designed to empower businesses...
+
+  **Key Highlights**
+  - Comprehensive payment processing platform
+  - Accept payments globally through multiple channels
+  - Simple API integrations for developers
+locations:
+  - "India"
+  - "Global"
+website: "https://razorpay.com/"
+updated_at: "2025-01-18"
+keyFeatures:
+  description: "Razorpay offers a full range of payment tools..."
+  features:
+    - title: "Payment Gateway"
+      desc: "Accept payments via credit cards, debit cards, UPI, wallets."
+    - title: "Subscription Management"
+      desc: "Create and manage recurring billing for subscription-based businesses."
+    # Maximum 8 features
+buyingGuide:
+  - question: "1. What's your business model?"
+    why: "Helps determine the payment features you need"
+    answer: "E-commerce, subscription-based, service-based, or other?"
+  # Maximum 8 questions
+pricing:
+  desc: "Razorpay offers flexible pricing plans..."
+  plans:
+    - name: "Basic Plan"
+      pricing:
+        amount: 0
+        currency: "INR"
+        currencySymbol: "₹"
+        period: "month"
+        perUnit: null
+      description: "Free plan with all essential features."
+    # Maximum 4 plans
 ---
-
-**About**
-
-Zoho CRM is a comprehensive customer relationship management platform designed for businesses of all sizes...
-
-**Highlights**
-- Advanced pipeline management
-- WhatsApp integration for India
-- Mobile apps for field sales
-
-**Pricing**
-- Free: Up to 3 users
-- Standard: ₹900/user/month
-- Professional: ₹1,600/user/month
 ```
 
 ## 📂 Categories
 
 - **CRM** - Customer relationship management
-- **HR** - Human resources and recruitment
+- **Human Resource** - HR software and recruitment
+- **Payment Gateway** - Payment processing and merchant services
 - **Marketing** - Digital marketing and automation
-- **Finance** - Accounting and financial management
+- **Finance** - Financial management tools
 - **Support** - Customer support and helpdesk
 - **Analytics** - Business intelligence and analytics
 - **Security** - Cybersecurity and compliance
 - **DevTools** - Development and technical tools
-- **Accounting** - Accounting and bookkeeping
 
 ## 🔍 Writing Reviews
 
@@ -114,20 +147,83 @@ npm run linkcheck
 npm test
 ```
 
+### Frontend Development
+
+```bash
+# Navigate to frontend directory
+cd frontend
+
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# The build process will:
+# 1. Read all .md files from ../listings/
+# 2. Auto-generate slugs from name and category
+# 3. Generate static pages for each product
+# 4. Output optimized HTML files
+```
+
 ### File Structure
 
 ```
 appsutra/
-├── listings/           # Product listings organized by category
-│   ├── crm/
-│   ├── hr/
-│   └── ...
-├── schema/            # JSON Schema validation
-├── scripts/           # Validation and utility scripts
-├── .github/          # GitHub templates and workflows
-└── docs/             # Documentation
+├── listings/              # Product listings (organized by category)
+│   ├── hr/               # HR category folder
+│   │   └── keka-services.md
+│   ├── finance/          # Finance category folder
+│   │   └── razorpay.md
+│   └── payment-gateway/  # Payment Gateway category folder
+│       └── ...
+├── frontend/             # Next.js web application
+│   ├── src/
+│   │   ├── app/         # Next.js App Router pages
+│   │   ├── lib/         # Data parsing and utilities
+│   │   │   └── listings.ts  # Markdown parser & slug generator
+│   │   ├── types/       # TypeScript type definitions
+│   │   │   └── product.ts   # Product type interface
+│   │   └── components/  # React components
+│   └── public/          # Static assets
+├── schema/              # JSON Schema validation
+├── scripts/             # Validation and utility scripts
+├── .github/            # GitHub templates and workflows
+└── docs/               # Documentation
 ```
 
+### Architecture: Markdown → Static Site
+
+**How listings become web pages:**
+
+1. **Organize by Category**: Place product in category folder
+   - Example: `listings/finance/razorpay.md`
+
+2. **Define in YAML**: Add YAML front-matter with product details
+   - `name: "Razorpay"`
+   - `category: "Finance"` (display name, can differ from folder)
+
+3. **Auto-Generate Slugs**: Validation and build process generate slugs from YAML fields
+   - `name: "Razorpay"` → `slug: "razorpay"` (validated against filename)
+   - `category: "Finance"` → `categorySlug: "finance"` (validated against folder)
+   - **Validation ensures**: filename = slugify(name), folder = slugify(category)
+
+4. **Parse at Build Time**: `gray-matter` parses YAML → Product type object
+
+5. **Generate Static Pages**: Next.js creates HTML at `/finance/razorpay`
+
+6. **Deploy**: Static HTML files served via CDN
+
+**Key Points:**
+- ✅ **Folder names** = Organizational structure (can be anything)
+- ✅ **YAML category** = Source of truth for categorySlug
+- ✅ **YAML name** = Source of truth for product slug
+- ✅ No database required, fast static HTML
+- ✅ Type-safe with TypeScript
+
 ## 🤝 Contributing
 
 We welcome contributions from the community! Please read our [Contributing Guide](CONTRIBUTING.md) for details on:
@@ -140,10 +236,18 @@ We welcome contributions from the community! Please read our [Contributing Guide
 ## 📜 Guidelines
 
 ### For Vendors
-- Keep descriptions factual and neutral
-- Include India-specific context where relevant
-- Provide accurate pricing in ₹
-- Maintain up-to-date information
+- **Keep descriptions factual and neutral** - No promotional language
+- **Include India-specific context** - ₹ pricing, local integrations
+- **Follow field limits**:
+  - Maximum 8 key features
+  - Maximum 4 pricing plans
+  - Maximum 8 buying guide questions
+  - Maximum 30 keywords
+- **Use proper structure** - Follow the Product type interface exactly
+- **No manual slugs** - Slugs are auto-generated from name and category
+- **File naming**: Filename must match `slugify(name).md`, folder must match `slugify(category)`
+- **Required fields**: All fields in Product schema are required, including `updated_at` (YYYY-MM-DD format)
+- **Maintain up-to-date information** - Update `updated_at` when making changes
 
 ### For Users
 - Write constructive, helpful reviews

frontend/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

frontend/package.json

@@ -9,24 +9,32 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "15.5.3",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "gray-matter": "^4.0.3",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-slot": "^1.2.3",
+    "build": "^0.1.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "fuse.js": "^7.0.0",
+    "gray-matter": "^4.0.3",
     "lucide-react": "^0.468.0",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^2.5.4"
+    "next": "^15.5.5",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-icons": "^5.5.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/node": "^22",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "autoprefixer": "^10",
     "eslint": "^9",
     "eslint-config-next": "15.5.3",
     "postcss": "^8",
-    "autoprefixer": "^10",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
+}