A modern, bilingual banking website built with Nuxt 3, featuring comprehensive banking services, interactive calculators, and a responsive design.

• Homepage - Hero section with quick services and news updates
• Deposit Schemes - Various deposit products with interest rate comparison
• Loan Schemes - Comprehensive loan products with eligibility criteria
• EMI Calculator - Interactive loan and deposit calculators
• Branch Locator - Interactive map with branch details and services
• Interest Rates - Current rates for all products
• Service Charges - Transparent fee structure

• 🌐 Bilingual Support - English and Marathi language support
• 📱 Responsive Design - Mobile-first responsive layout
• 🔄 Interactive Calculators - EMI and deposit return calculators
• 🗺️ Branch Locator - Map integration for finding branches
• 🎨 Modern UI/UX - Clean, professional design
• ⚡ Fast Performance - Optimized for speed and SEO

• Node.js 18+
• npm or yarn

# Clone the repository
git clone <repository-url>
cd bank

# Install dependencies
npm install

# Start development server
npm run dev

# Open browser to http://localhost:3000

# Build the application
npm run build

# Preview production build
npm run preview

# Generate static site
npm run generate

bank/
├── app/
│   ├── assets/
│   │   └── css/
│   │       └── main.css           # Main CSS with Tailwind
│   ├── components/                # Vue components
│   ├── composables/
│   │   └── useI18n.js            # Internationalization
│   ├── layouts/
│   │   └── default.vue           # Main layout with navigation
│   └── pages/
│       ├── index.vue             # Homepage
│       ├── deposit-schemes.vue   # Deposit products
│       ├── loan-schemes.vue      # Loan products
│       ├── emi-calculator.vue    # EMI & deposit calculator
│       └── branch-locator.vue    # Branch finder
├── public/                       # Static assets
├── nuxt.config.ts               # Nuxt configuration
└── package.json                 # Dependencies

• Primary Blue: #1e40af (blue-800)
• Secondary Green: #059669 (emerald-600)
• Accent Purple: #7c3aed (violet-600)
• Warning Yellow: #d97706 (amber-600)
• Success Green: #10b981 (emerald-500)
• Gray Scale: #374151 to #f9fafb

• Font Family: Inter (Google Fonts)
• Headings: Bold weights (700-900)
• Body Text: Regular (400) and Medium (500)
• Small Text: Light (300) for secondary info

The website supports English and Marathi languages:

// Usage in components
const { t } = useI18n()

// Example translations
t('depositSchemes')     // "Deposit Schemes" | "ठेव योजना"
t('loanSchemes')       // "Loan Schemes" | "कर्ज योजना"
t('emiCalculator')     // "EMI Calculator" | "EMI कॅल्क्युलेटर"

Edit app/composables/useI18n.js to add new translation keys.

• Navigation - Multi-level dropdown navigation
• Footer - Links, contact info, newsletter signup
• Flash Banner - Important announcements

• Hero Sections - Page headers with gradients
• Service Cards - Interactive feature cards
• Calculator Forms - EMI and deposit calculators
• Branch Cards - Branch information display
• Interest Rate Tables - Comparative rate displays

• Frontend: Nuxt 3, Vue 3, TypeScript
• Styling: Tailwind CSS
• Icons: Nuxt Icon (Heroicons)
• Build Tool: Vite
• Package Manager: npm

• Loan Calculator: Principal, rate, tenure inputs with real-time EMI calculation
• Deposit Calculator: FD, RD, and savings calculators
• Visual Breakdown: Charts showing principal vs interest
• Export Feature: Download calculation reports

• Interactive Map: Visual branch locations (Google Maps integration ready)
• Search & Filter: By location, services, city
• Branch Details: Contact info, hours, available services
• Distance Calculation: Shows nearest branches first

• Mobile First: Optimized for mobile devices
• Tablet Support: Adapted layouts for tablets
• Desktop Enhanced: Full desktop experience
• Touch Friendly: Large touch targets on mobile

Create a .env file:

NUXT_PUBLIC_SITE_URL=https://your-domain.com
NUXT_PUBLIC_GOOGLE_MAPS_API_KEY=your-maps-api-key

The project uses a custom Tailwind configuration with:

• Extended color palette for banking theme
• Custom components and utilities
• Responsive breakpoints
• Animation classes

• Image Optimization: Responsive images with proper sizing
• Code Splitting: Automatic route-based code splitting
• CSS Purging: Unused CSS removal in production
• Prerendering: Static generation for better SEO
• Compression: Gzip compression enabled

• Input Validation: All form inputs validated
• XSS Protection: Sanitized user inputs
• HTTPS Ready: SSL configuration ready
• CSRF Protection: Cross-site request forgery protection

• Touch Gestures: Swipe navigation where appropriate
• Mobile Menu: Collapsible navigation
• Mobile Calculators: Touch-friendly sliders and inputs
• Responsive Tables: Horizontal scroll for data tables

npm run generate
# Deploy contents of .output/public/ to your hosting provider

npm run build
npm run preview
# Deploy .output/ directory to your Node.js server

The project includes configuration for easy deployment to:

• Netlify
• Vercel
• GitHub Pages
• AWS S3

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

For support and questions:

• 📧 Email: [email protected]
• 📞 Phone: +91 22 XXXX XXXX
• 🌐 Website: https://societybank.com

• Admin panel for content management
• Online account opening
• Digital loan applications
• Customer portal
• Mobile app
• Advanced analytics
• Chatbot integration
• Progressive Web App (PWA)

The price for a project like this can vary widely depending on several factors. To help you decide how much to charge, let's break it down into:

You're delivering a full-featured bilingual website with:

• 25–30+ pages (static + dynamic)
• Admin panel for content management
• Multiple integrated forms (loan, deposit, complaints)
• Social media integration
• Flash banner
• SSL & hosting
• Maintenance
• Google Maps & EMI calculator
• User role system (Super admin, department-wise access)
• Two languages (Marathi + English)

Estimate how long it will take you or your team:

• Planning, meetings, wireframes: 8–10 hours
• UI/UX Design: 20–30 hours
• Frontend Development: 30–40 hours
• Backend/Admin Panel: 40–60 hours
• Form handling + database: 15–20 hours
• Testing + Revisions: 10–20 hours
• Multilingual setup: 10–15 hours
• Total: 130–190 hours

Decide your hourly rate (based on your experience and market):

• Freelancer: ₹800–₹2,000/hour ($10–$25)
• Small agency: ₹1,500–₹3,500/hour ($20–$45)

• Annual Maintenance: ₹10,000 – ₹30,000/year
• Content Writing: ₹5,000 – ₹20,000
• SSL Certificate: ₹1,000 – ₹5,000 (or include if free with hosting)
• Hosting & Domain: ₹2,000 – ₹10,000/year
• Ongoing SEO: ₹5,000 – ₹15,000/month
• Admin Panel Training: ₹2,000 – ₹10,000 (one-time)

• For a project this size, don’t charge below ₹1,00,000 unless it’s your first or a portfolio project.
• Have a contract that outlines scope, payment schedule (e.g., 40% upfront, 30% mid, 30% on delivery), timelines, and maintenance terms.
• Clarify whether content entry for both languages is your responsibility or theirs.

Would you like a quote template or invoice breakdown format to send to your client?