PC Parts Pro - Bangladesh Spare Parts Website

A premium, bilingual (English & Bangla) single-page website for laptop and desktop spare parts targeting the Bangladesh market. Built with vanilla HTML5, CSS3, and JavaScript with modern animations and responsive design.

Project Overview

Website Purpose:
Market and sell quality laptop and desktop spare parts to customers in Bangladesh with a focus on premium branding, smooth animations, and easy contact integration.

Features:

• ✅ Bilingual content (English + Bangla)
• ✅ Premium dark-gold visual theme
• ✅ Responsive design (mobile-first)
• ✅ Smooth scroll animations
• ✅ Product catalog with 15 items (10 laptop, 5 desktop)
• ✅ Multiple contact methods (Phone, WhatsApp, Email)
• ✅ Contact form with WhatsApp integration
• ✅ Accessibility-first (reduced-motion support)
• ✅ Fast loading (no external dependencies)

File Structure

PC Part Web/
├── index.html                 # Main website (all sections)
├── css/
│   ├── main.css              # Core styling & design tokens
│   └── animations.css        # Keyframes & animation system
├── js/
│   └── main.js               # Interactions & scroll effects
├── assets/
│   └── icons/                # (Reserved for icon assets)
└── README.md                 # This file

Technology Stack

• HTML5 - Semantic markup
• CSS3 - Flexbox, Grid, custom properties, keyframe animations
• Vanilla JavaScript - No frameworks, lightweight (~10KB)
• Responsive Design - Mobile, tablet, desktop optimized

Getting Started

1. Open the Website Locally

Option A: Direct File Open

# Windows: Right-click index.html → Open with → Browser
# Or drag index.html into your browser

Option B: Local Server (Recommended)

# Using Python 3.x
python -m http.server 8000

# Using Node.js (if installed)
npx http-server

# Using PHP
php -S localhost:8000

Then visit http://localhost:8000 in your browser.

2. Customize Content

Edit Business Information

Open index.html and update:

• Contact Phone: 01670204864 (search and replace)
• WhatsApp: 8801670204864 (formatted for WhatsApp API)
• Email: lingkonbindu@gmail.com
• Business Name: Search for "PC Parts Pro"

Change Colors (Dark Gold Theme)

Open css/main.css and modify the :root variables:

--accent-gold: #d4af37;        /* Primary gold */
--accent-gold-light: #e8c547;  /* Lighter gold */
--accent-gold-dark: #b89f2e;   /* Darker gold */
--primary-dark: #1a1410;       /* Dark background */

Edit Product Listings

In index.html, find the .products-grid sections:

• Laptop Parts (10 items with 📡👆⚡ icons)
• Desktop Parts (5 items)

To add/remove items, duplicate/delete .product-card blocks and update the icon emoji and text.

3. Add Images (Optional)

Create an assets/images/ folder and update paths in HTML:

<!-- Replace emoji icons with image backgrounds -->
<div class="product-icon" style="background-image: url('assets/images/wifi-card.jpg')"></div>

Animation System

Scroll Animations

• Hero section slides in from left
• Product cards fade and slide up on scroll
• Staggered reveal effect (each card has slight delay)
• Intersection Observer triggers animations once

Hover Effects

• Product cards lift on hover with gold glow
• Buttons have ripple effect and color transition
• Links have underline animation

Mobile Optimizations

• Reduced animation complexity on small screens
• Touch device support (tap animations)
• Accessibility fallback: Disabled animations for prefers-reduced-motion setting

Customize Animations

Edit css/animations.css to:

• Change animation timing: --transition-base: 0.3s (in main.css)
• Add new keyframes: Search @keyframes in animations.css
• Adjust delays: Product cards use --delay CSS variable

Contact Integration

Phone Call

<a href="tel:01670204864">Call Now</a>

Works on mobile devices; shows notification on desktop.

WhatsApp

<a href="https://wa.me/8801670204864?text=Message">Chat on WhatsApp</a>

Opens WhatsApp Web or app with pre-filled message.

Email

<a href="mailto:lingkonbindu@gmail.com?subject=Inquiry">Send Email</a>

Opens email client with pre-filled subject.

Contact Form

The contact form in the HTML sends messages via WhatsApp (no backend required).

Responsive Breakpoints

Device	Width	Optimizations
Mobile	< 480px	Single column, larger touch targets
Tablet	480-768px	2-column layout, adjusted spacing
Desktop	> 768px	3-4 column grid, full animations

Performance Tips

1. Minimize HTTP Requests

   • All CSS/JS inline or single files
   • No external CDN dependencies

2. Optimize Images (When Added)

   • Use WebP format with JPG fallback
   • Lazy load with data-src attribute

3. Browser Caching

   • Set expires headers on hosting platform
   • CSS/JS files rarely change

4. Accessibility

   • Test with screen readers
   • Keyboard navigation supported
   • Reduced-motion fallback included

Deployment Options

1. Free Static Hosting

• Netlify: Drag & drop folder, auto-deploys
• GitHub Pages: Push to gh-pages branch
• Vercel: Similar to Netlify, optimized for speed
• Firebase Hosting: Google's static host

2. Traditional Web Hosting

• Upload files via FTP to public_html folder
• Ensure .htaccess allows .html files (usually default)

3. Local/Intranet

• Run from local server for Bangladesh office network
• Use python -m http.server for quick setup

Maintenance

Monthly Checks

• Test all contact links (phone, WhatsApp, email)
• Verify responsive layout on mobile browser
• Check animation smoothness in Chrome and Firefox
• Update business info if changed

Adding New Products

1. Duplicate a .product-card in the grid
2. Change icon emoji and text
3. Update Bangla translation
4. Reload browser to see new item

Updating Colors

1. Edit 6 CSS variables in css/main.css :root section
2. All elements inherit the new theme automatically
3. No need to edit individual files

Browser Support

Browser	Support	Notes
Chrome	✅ Full	Latest 2 versions
Firefox	✅ Full	Latest 2 versions
Safari	✅ Full	Latest 2 versions
Edge	✅ Full	Latest 2 versions
IE 11	⚠️ Limited	Some animations won't work

Troubleshooting

Animations Not Playing

• Check: CSS file is linked correctly in index.html
• Fix: Verify <link rel="stylesheet" href="css/animations.css">
• Browser: Disable browser extensions blocking CSS

Contact Links Not Working

• Phone: Only works on mobile devices
• WhatsApp: Ensure browser allows popups
• Email: Requires email client installed

Layout Breaking on Mobile

• Check: Meta viewport tag in <head>
• Fix: Ensure <meta name="viewport" content="width=device-width, initial-scale=1.0">
• Clear: Browser cache (Ctrl+Shift+Del)

Slow Loading

• Check file sizes: css/main.css (~15KB), js/main.js (~8KB)
• Disable browser extensions
• Use Chrome DevTools → Performance tab

Future Enhancements

• Add image gallery for products
• Integrate live chat widget (Crisp, Drift)
• Add order tracking system
• Email newsletter signup
• Google Maps integration for office location
• Product comparison tool
• Customer testimonials section
• Blog for PC maintenance tips
• Multi-language support (Urdu, Hindi)
• Dark mode toggle

Legal & Privacy

• Contact Data: Form submissions go directly to WhatsApp (no server storage)
• Cookies: Website uses no tracking or analytics (GDPR compliant)
• Links: External links (WhatsApp, email) open in new tabs

Support & Questions

For help maintaining or updating this website:

1. Backup: Always backup index.html before major changes
2. Test Locally: Use local server to test changes before upload
3. Version Control: Consider using Git for version tracking (if technical)
4. Contact Info: Keep all business contact details in one place for easy updates

License

This website is created for PC Parts Pro and is proprietary. Use and modify freely for your business needs.

---

Created: June 2026
Last Updated: June 13, 2026
Status: Ready for Production

For questions or updates, contact: 01670204864 or lingkonbindu@gmail.com