Okay, I can help you structure the upgraded website with HTML, CSS, and basic JavaScript placeholders based on your requirements. This setup provides the basic file structure and styling foundation. You'll need to replace the placeholder text and image URLs with your actual content. Beamaq Global Solutions - Home

Driving Innovation, Delivering Results

Your concise elevator pitch about Beamaq's value proposition goes here. Focus on the core benefit you provide.

Request a Quote

Welcome to Beamaq Global Solutions

Brief introduction to the company. Keep it clean and modern.

Our Core Services

Service One

Brief description of the first core service.

Learn More

Service Two

Brief description of the second core service.

Learn More

Service Three

Brief description of the third core service.

Learn More

What Our Clients Say

"Client testimonial text goes here. Highly recommended!"

- Satisfied Client A, Company A

"Another client testimonial highlighting versatility."

- Satisfied Client B, Company B (Different Industry)

About Us - Beamaq Global Solutions

About Beamaq Global Solutions

Our Story

Incorporate a deeper narrative about the company's history here. Talk about the founding, key milestones, and the journey.

Share your mission and vision. What drives your company?

Meet the Team

Humanize your brand. Add photos and brief bios of key team members.

Name 1

Role/Title

Name 2

Role/Title

Consider adding a team introduction video here.

Our Credentials

Awards & Certifications

Placeholder for awards and certifications.

Client Testimonials

"Specific testimonial relevant to the company's values or history."

- Client C, Company C

Our Services - Beamaq Global Solutions

Our Services

Discover how Beamaq Global Solutions can help your business thrive.

Service One Title

Concise, outcome-focused description of Service One. What results can clients expect?

Case Study: How we helped [Client Name] achieve [Result].

Learn More

Service Two Title

Concise, outcome-focused description of Service Two. Highlight the benefits.

Case Study: Example project demonstrating Service Two.

Learn More

Service Three Title

Concise, outcome-focused description of Service Three. Focus on value.

Case Study: Showcasing results from Service Three.

Learn More

Service Four Title

Concise, outcome-focused description of Service Four.

Case Study: Relevant example for Service Four.

Learn More

Contact Us

Get in touch with Beamaq Global Solutions today. We're here to help.

Send Us a Message

Contact Information

Address: [Your Full Office Address Here]

Phone: [Your Phone Number]

Email: info@beamaqglobalsolutions.co.za

Our Location:

Ready to Start?

Schedule a Consultation

Trusted By

/* --- Global Styles --- */ :root { --primary-color: #0056b3; /* Example primary color - Adjust to your brand */ --secondary-color: #f8f9fa; /* Light background */ --text-color: #333; --heading-font: 'Arial', sans-serif; /* Choose appropriate fonts */ --body-font: 'Arial', sans-serif; --container-width: 1140px; --breakpoint-md: 768px; --breakpoint-lg: 992px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--body-font); line-height: 1.6; color: var(--text-color); background-color: #fff; } .container { max-width: var(--container-width); margin: 0 auto; padding: 0 15px; } h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); margin-bottom: 0.75em; line-height: 1.3; } a { color: var(--primary-color); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; /* Prevents bottom space */ } section { padding: 40px 0; } /* --- Header & Navigation --- */ header { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 15px 0; position: sticky; top: 0; z-index: 1000; } header .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5em; font-weight: bold; color: var(--text-color); } .logo:hover { text-decoration: none; } nav ul { list-style: none; display: flex; } nav ul li { margin-left: 20px; } nav ul li a { color: var(--text-color); font-weight: 500; padding: 5px 0; position: relative; } nav ul li a.active, nav ul li a:hover { color: var(--primary-color); text-decoration: none; } nav ul li a.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background-color: var(--primary-color); } .menu-toggle { display: none; /* Hidden by default */ background: none; border: none; font-size: 1.8em; cursor: pointer; } /* --- Footer --- */ footer { background-color: #333; color: #fff; text-align: center; padding: 20px 0; margin-top: 40px; } footer p { margin: 0; } /* --- Buttons --- */ .cta-button { display: inline-block; background-color: var(--primary-color); color: #fff; padding: 12px 25px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: background-color 0.3s ease; border: none; cursor: pointer; } .cta-button:hover { background-color: #004494; /* Darker shade */ color: #fff; text-decoration: none; } .cta-button.secondary { background-color: #6c757d; /* Example secondary color */ } .cta-button.secondary:hover { background-color: #5a6268; } /* --- Homepage Specific --- */ .hero { background-color: var(--secondary-color); text-align: center; padding: 60px 0; } .hero .hero-image { margin: 0 auto 30px auto; max-height: 400px; /* Adjust as needed */ width: auto; /* Maintain aspect ratio */ object-fit: cover; /* Cover the area nicely */ } .hero h1 { font-size: 2.8em; margin-bottom: 0.5em; } .hero p { font-size: 1.2em; margin-bottom: 1.5em; max-width: 700px; margin-left: auto; margin-right: auto; } .intro { text-align: center; padding-top: 50px; padding-bottom: 30px; } .featured-services { background-color: var(--secondary-color); text-align: center; } .service-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 30px; } .service-item { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .service-item img { max-width: 60px; /* Smaller icons */ margin: 0 auto 15px auto; } .service-item h3 { margin-bottom: 10px; color: var(--primary-color); } .testimonials-preview { text-align: center; } .testimonial-carousel { /* Basic styling - enhance with JS for carousel */ margin-top: 20px; } .testimonial { background: var(--secondary-color); padding: 20px; margin-bottom: 15px; border-left: 4px solid var(--primary-color); border-radius: 4px; max-width: 600px; margin-left: auto; margin-right: auto; } .testimonial cite { display: block; margin-top: 10px; font-style: normal; font-weight: bold; } /* --- About Page Specific --- */ .team-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-top: 20px; text-align: center; } .team-member img { border-radius: 50%; margin-bottom: 10px; width: 120px; /* Fixed size */ height: 120px; object-fit: cover; margin-left: auto; margin-right: auto; } .team-video { margin-top: 30px; text-align: center; } .credibility { margin-top: 40px; background-color: var(--secondary-color); padding: 30px; border-radius: 8px; } .testimonials-about .testimonial { background: #fff; /* Different background */ } /* --- Services Page Specific --- */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 30px; } .service-card { background-color: var(--secondary-color); padding: 25px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; flex-direction: column; } .service-card .service-icon { max-width: 50px; margin-bottom: 15px; } .service-card h2 { color: var(--primary-color); font-size: 1.4em; } .service-card p { flex-grow: 1; /* Makes description take available space */ margin-bottom: 15px; } .service-card em { /* Style for case study hint */ font-size: 0.9em; color: #555; display: block; margin-bottom: 15px; } .service-card .learn-more { margin-top: auto; /* Pushes button to bottom */ font-weight: bold; } .service-detail { display: none; /* Hide details initially, show via link/JS if needed */ margin-top: 30px; padding: 20px; background: #e9ecef; border-radius: 5px; } /* --- Contact Page Specific --- */ .contact-layout { display: grid; grid-template-columns: 1fr; /* Default single column */ gap: 40px; margin-top: 30px; } @media (min-width: var(--breakpoint-lg)) { .contact-layout { grid-template-columns: 2fr 1fr; /* Two columns on larger screens */ } } .contact-form-section form { display: flex; flex-direction: column; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-weight: bold; } .form-group input[type="text"], .form-group input[type="email"], .form-group textarea, .form-group select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1em; } .form-group textarea { resize: vertical; } #form-status { margin-top: 15px; font-weight: bold; } .contact-info-section p { margin-bottom: 10px; } .map-placeholder { margin-top: 20px; border: 1px solid #ccc; text-align: center; padding: 10px; } .map-placeholder img { margin-top: 10px; max-width: 100%; } .secondary-cta { margin-top: 30px; padding: 20px; background-color: var(--secondary-color); border-radius: 5px; text-align: center; } .client-logos { text-align: center; margin-top: 50px; padding-top: 30px; border-top: 1px solid #eee; } .logos-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px; margin-top: 20px; } .logos-container img { max-height: 50px; width: auto; filter: grayscale(100%); opacity: 0.7; transition: filter 0.3s ease, opacity 0.3s ease; } .logos-container img:hover { filter: grayscale(0%); opacity: 1; } /* --- Responsive Design --- */ @media (max-width: ${parseInt(var(--breakpoint-lg)) - 1}px) { .container { max-width: 960px; } } @media (max-width: ${parseInt(var(--breakpoint-md)) - 1}px) { .container { max-width: 720px; } nav ul { display: none; /* Hide nav links */ flex-direction: column; position: absolute; top: 60px; /* Adjust based on header height */ left: 0; width: 100%; background-color: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 0; } nav ul.active { display: flex; /* Show when active */ } nav ul li { margin: 10px 20px; text-align: center; } .menu-toggle { display: block; /* Show hamburger menu */ } .hero h1 { font-size: 2.2em; } .hero p { font-size: 1.1em; } .service-highlights, .services-grid, .team-gallery { grid-template-columns: 1fr; /* Stack items */ } .contact-layout { grid-template-columns: 1fr; /* Ensure single column */ } } document.addEventListener('DOMContentLoaded', function() { // --- Mobile Navigation Toggle --- const menuToggle = document.querySelector('.menu-toggle'); const navUl = document.querySelector('nav ul'); if (menuToggle && navUl) { menuToggle.addEventListener('click', () => { navUl.classList.toggle('active'); // Optional: Change toggle icon if (navUl.classList.contains('active')) { menuToggle.innerHTML = '✕'; // Close icon menuToggle.setAttribute('aria-expanded', 'true'); } else { menuToggle.innerHTML = '☰'; // Hamburger icon menuToggle.setAttribute('aria-expanded', 'false'); } }); } // --- Basic Contact Form Handling Placeholder --- const contactForm = document.getElementById('contact-form'); const formStatus = document.getElementById('form-status'); if (contactForm && formStatus) { contactForm.addEventListener('submit', function(event) { event.preventDefault(); // Prevent default form submission // Basic validation example (can be expanded) const name = document.getElementById('name').value; const email = document.getElementById('email').value; const message = document.getElementById('message').value; if (!name || !email || !message) { formStatus.textContent = 'Please fill in all required fields.'; formStatus.style.color = 'red'; return; } // Placeholder for actual form submission (e.g., using fetch to send data to a server) console.log('Form submitted (placeholder)'); console.log('Name:', name); console.log('Email:', email); console.log('Message:', message); console.log('Source:', document.getElementById('source').value); // Display success message (simulation) formStatus.textContent = 'Thank you for your message! We will get back to you soon.'; formStatus.style.color = 'green'; contactForm.reset(); // Clear the form // Hide status message after a few seconds setTimeout(() => { formStatus.textContent = ''; }, 5000); // In a real application, you would use fetch() or XMLHttpRequest // to send the form data to your backend server here. /* const formData = new FormData(contactForm); fetch('/your-backend-endpoint', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { console.log('Success:', data); formStatus.textContent = 'Message sent successfully!'; formStatus.style.color = 'green'; contactForm.reset(); }) .catch((error) => { console.error('Error:', error); formStatus.textContent = 'An error occurred. Please try again.'; formStatus.style.color = 'red'; }); */ }); } // --- Add more JS functionality as needed --- // Example: Testimonial Carousel (requires HTML structure and potentially a library) // Example: Smooth scrolling for internal links // Example: Animations on scroll }); # Beamaq Global Solutions - Website Upgrade This project contains the upgraded website structure for Beamaq Global Solutions, based on modern web design principles and user requirements. ## Structure - `index.html`: Homepage - `about.html`: About Us page - `services.html`: Services page - `contact.html`: Contact Us page - `css/style.css`: Main stylesheet for all pages, including responsive design. - `js/script.js`: JavaScript for interactivity (e.g., mobile menu). - `README.md`: This file. ## Getting Started 1. Open `index.html` in your browser or use a simple web server to view the site. 2. Navigate between pages using the header links. ## Customization - **Content:** Replace all placeholder text (like "[Your Content Here]", "Lorem ipsum...", etc.) and image URLs (`https://via.placeholder.com/...`) in the HTML files with your actual company information, text, images, and videos. - **Styling:** Modify `css/style.css` to adjust colors (see `:root` variables), fonts, layout, and other visual aspects to match the Beamaq brand identity. - **Functionality:** - Update the `action` attribute in the contact form (`contact.html`) to point to your backend endpoint that handles form submissions. - Implement server-side logic to process the contact form data. - Enhance `js/script.js` to add more interactivity like a testimonial carousel, animations, or more complex form validation if needed. - Replace the map placeholder in `contact.html` with an actual embedded map (e.g., Google Maps iframe). - Add real client logos and testimonials. This structure provides a solid starting point. Remember to replace all placeholder content and images with your actual information. You can view the `index.html` file to see the homepage.