A modern, responsive website built with Next.js showcasing pgElephant's high-performance database solutions including RAM (PostgreSQL clustering), RALE (distributed consensus), and FauxDB (MongoDB-compatible database).
- RAM - Resilient Adaptive Manager for PostgreSQL clustering with automatic failover
- RALE - Resilient Adaptive Leader Election for distributed consensus systems
- FauxDB - MongoDB-compatible document database built in Rust with PostgreSQL backend
- Next.js 15 with App Router for optimal performance
- Tailwind CSS for responsive, modern design
- SEO Optimized with comprehensive meta tags, structured data, and sitemaps
- Mobile-First responsive design
- Static Generation for fast loading and SEO benefits
- Accessibility with proper alt text and semantic HTML
- Analytics Ready with Google Search Console integration
- Framework: Next.js 15.5.4
- Styling: Tailwind CSS
- Icons: Lucide React
- Language: TypeScript
- Deployment: Static site generation
- SEO: Comprehensive meta tags, Open Graph, Twitter Cards
www/
├── app/ # Next.js App Router
│ ├── blog/ # Blog pages
│ │ ├── [slug]/ # Dynamic blog posts
│ │ ├── rale/ # RALE blog post
│ │ ├── ram/ # RAM blog post
│ │ └── page.tsx # Blog listing
│ ├── docs/ # Documentation
│ │ ├── ram/getting-started/ # RAM documentation
│ │ ├── rale/getting-started/# RALE documentation
│ │ ├── fauxdb/getting-started/ # FauxDB documentation
│ │ └── page.tsx # Documentation landing
│ ├── ram/ # RAM product page
│ │ ├── prometheus/ # RAM monitoring page
│ │ └── page.tsx # RAM main page
│ ├── rale/ # RALE product page
│ │ └── page.tsx # RALE main page
│ ├── fauxdb/ # FauxDB product page
│ │ └── page.tsx # FauxDB main page
│ ├── community/ # Community page
│ ├── contact/ # Contact page
│ ├── download/ # Download page
│ ├── layout.tsx # Root layout with SEO
│ └── page.tsx # Homepage
├── components/ # Reusable components
│ ├── Header.tsx # Navigation header
│ ├── Footer.tsx # Site footer
│ ├── Hero.tsx # Homepage hero section
│ └── Community.tsx # Community component
├── public/ # Static assets
│ ├── ico/ # Product icons
│ ├── robots.txt # SEO robots file
│ ├── sitemap.xml # SEO sitemap
│ └── favicon.ico # Site favicon
├── .gitignore # Git ignore rules
├── package.json # Dependencies
├── tailwind.config.js # Tailwind configuration
├── tsconfig.json # TypeScript configuration
└── next.config.js # Next.js configuration
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone <repository-url> cd pge/www
-
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
npm run build
npm start- Hero section with product showcase
- Interactive product tabs (RAM, RALE, FauxDB)
- Feature highlights and call-to-actions
- RAM (
/ram) - PostgreSQL clustering solution - RALE (
/rale) - Distributed consensus system - FauxDB (
/fauxdb) - MongoDB-compatible database
- Getting started guides for all products
- API references and configuration examples
- Best practices and troubleshooting
- Technical articles and insights
- Product updates and announcements
- Community stories and case studies
- Community (
/community) - Discord, GitHub, Forums - Contact (
/contact) - Support and inquiries - Download (
/download) - Installation packages
Based on the pgElephant brand colors:
- Primary Teal:
#025A6B(iconTeal) - Light Teal:
#036B7D(iconTealLight) - Dark Teal:
#054A56(iconTealDark) - Accent Colors: Cyan, Orange, Emerald, Violet, Amber
- Primary Font: Open Sans (Google Fonts)
- Secondary Font: Inter (Google Fonts)
- Font Weights: 300, 400, 500, 600, 700, 800
- Responsive grid layouts
- Gradient backgrounds
- Card-based content sections
- Interactive hover states
- Consistent spacing and typography
- Comprehensive page titles and descriptions
- Open Graph tags for social sharing
- Twitter Card optimization
- Canonical URLs
- Organization schema
- Software application schemas
- Product information markup
- Breadcrumb navigation
- XML sitemap (
/sitemap.xml) - Robots.txt configuration
- Optimized images with alt text
- Clean, semantic HTML structure
- Fast loading with static generation
The website is optimized for static deployment:
npm install -g vercel
vercel --prodnpm run build
# Deploy the .next foldernpm run build
npm run export
# Deploy the out folder- Lighthouse Score: 95+ across all metrics
- Core Web Vitals: Optimized for Google's ranking factors
- Bundle Size: Optimized with code splitting
- Loading Speed: Static generation for instant page loads
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run type-check # Run TypeScript checks- TypeScript for type safety
- ESLint for code quality
- Prettier for code formatting
- Consistent component structure
- Create new file in
app/blog/[slug]/page.tsx - Add to blog listing in
app/blog/page.tsx - Update sitemap.xml if needed
- Edit respective page files in
app/ram/,app/rale/,app/fauxdb/ - Update structured data in layout.tsx
- Refresh sitemap.xml
- Modify meta tags in individual page files
- Update structured data schemas
- Refresh robots.txt and sitemap.xml
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is part of the pgElephant ecosystem. See the main repository for license information.
- Website: https://www.pgelephant.com
- GitHub: https://github.com/pgelephant
- Documentation: https://www.pgelephant.com/docs
- Community: https://www.pgelephant.com/community
Built with care by the pgElephant team