Astrus - Web Development Business Landing Page

A professional landing page for Astrus web development business, built with the same beautiful design system as your portfolio.

🎨 Features

• Hero Section - Welcoming introduction with call-to-action buttons
• Services Section - Showcasing 6 core services with interactive cards
• Portfolio Section - Highlighting recent projects and work
• Contact Section - Professional contact form with business details
• Responsive Design - Mobile-first, works seamlessly on all devices
• Dark/Light Theme - Toggle between dark and light modes
• Smooth Animations - Custom cursor and scroll effects
• Interactive UI - Hover effects and transitions

📁 Project Structure

astrus/
├── index.html          # Main HTML file
├── style/
│   └── index.css      # Minimalist styling with dark/light themes
├── js/
│   ├── index.js       # Main JavaScript functionality
│   ├── email.js       # Contact form AJAX submission
│   └── particles.js   # NASA-style particle background
├── php/
│   └── contact_handler.php  # Email backend handler
├── assets/
│   └── img/           # Images and logos
├── logs/
│   └── .gitignore     # Contact form submission logs
└── README.md          # This file

🚀 Quick Start

1. Add Your Logo Images Place the following images in assets/img/:

   • logo-small-light.png - Logo for dark theme
   • logo-small-dark.png - Logo for light theme
   • favicon.ico - Browser favicon

   You can copy these from your portfolio folder:

   copy "c:\xampp\htdocs\portfolio-v1\assets\img\logo-small-light.png" "c:\xampp\htdocs\astrus\assets\img\"
   copy "c:\xampp\htdocs\portfolio-v1\assets\img\logo-small-dark.png" "c:\xampp\htdocs\astrus\assets\img\"
   copy "c:\xampp\htdocs\portfolio-v1\assets\img\favicon.ico" "c:\xampp\htdocs\astrus\assets\img\"

2. Open in Browser Navigate to: http://localhost/astrus/

3. Customize Content

   • Update company name, tagline, and descriptions in index.html
   • Modify services offerings in the Services section
   • Add your actual project images and details in Portfolio section
   • Update contact information (email, phone, location)
   • Update social media links at the bottom

📧 Contact Form - PHPMailer Integration ✅

The contact form uses PHPMailer with SMTP for reliable email delivery to hello@astrus.my.

Features:

• ✅ PHPMailer 6.11+ with SMTP authentication
• ✅ AJAX form submission (no page reload)
• ✅ Loading spinner during submission
• ✅ Form validation (client & server-side)
• ✅ HTML formatted emails with beautiful template
• ✅ Automatic reply-to user's email
• ✅ Submission logging with success/error tracking
• ✅ Success/error alerts with friendly messages
• ✅ Conversational form labels

Quick Setup (3 Steps):

Step 1: Install Dependencies (Already done!)

composer install

Step 2: Configure SMTP Settings

Copy and edit the email configuration:

copy php\email_config.example.php php\email_config.php

Then update php/email_config.php with your SMTP credentials:

'smtp_host' => 'smtp.gmail.com',           // Your SMTP server
'smtp_port' => 587,                         // Port (587 for TLS)
'smtp_username' => 'your-email@gmail.com',  // Your email
'smtp_password' => 'your-app-password',     // App password

Step 3: Test Configuration

Open the test page: http://localhost/astrus/php/test_phpmailer.php

• View your SMTP configuration
• Send test email
• Verify everything works

SMTP Provider Setup:

Gmail (Recommended):

1. Enable 2-Factor Authentication on your Google Account
2. Create App Password: myaccount.google.com/apppasswords
3. Use the 16-character app password in config

'smtp_host' => 'smtp.gmail.com',
'smtp_port' => 587,
'smtp_secure' => 'tls',
'smtp_username' => 'your-email@gmail.com',
'smtp_password' => 'your-16-char-app-password',

Other Providers:

• Outlook/Office365: smtp.office365.com:587
• SendGrid: smtp.sendgrid.net:587
• Mailgun: smtp.mailgun.org:587

Files Structure:

php/
├── contact_handler.php          # Main email handler (uses PHPMailer)
├── email_config.php            # Your SMTP credentials (gitignored)
├── email_config.example.php    # Example config template
├── test_phpmailer.php          # PHPMailer test page
└── test_email.php              # Legacy PHP mail() test

vendor/
└── phpmailer/                  # PHPMailer library

Testing the Form:

1. Fill out all required fields
2. Click "Let's Talk!" button
3. Watch the spinner animation during submission
4. Check logs/contact_submissions.log for successful submissions
5. Check hello@astrus.my inbox for the email

🎨 Customization Tips

Colors

Edit CSS variables in style/index.css (lines 5-40):

:root {
  --text-accent-dark: #faf0ca; /* Your brand color */
  --text-accent-light: #2a9d8f; /* Light theme accent */
}

Services

Modify the services cards in index.html (around line 93):

• Update service icons using Font Awesome icons
• Change service titles and descriptions
• Add/remove service cards as needed

Portfolio Projects

Replace placeholder portfolio items (around line 145):

• Add actual project images
• Update project descriptions
• Link to live project URLs

Social Media

Update social links (around line 271):

• Change URLs to your actual social media profiles
• Add/remove social platforms as needed

📱 Mobile Responsive

The site is fully responsive with breakpoints at:

• Desktop: > 768px
• Tablet: 768px - 900px
• Mobile: < 768px
• Small Mobile: < 480px

🎯 Browser Compatibility

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

📝 To-Do

• Add your logo images
• Customize business name and tagline
• Update services offerings
• Add real project images and details
• Update contact information
• Connect contact form to email service
• Update social media links
• Add your brand colors
• Test on mobile devices

🔧 Technologies Used

• HTML5
• CSS3 (Custom Properties, Grid, Flexbox)
• JavaScript (Vanilla)
• Bootstrap 5 (Grid & Utilities)
• Font Awesome Icons
• Google Fonts (Quicksand)

📞 Support

For questions or issues, feel free to reach out!

---