```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechUp Laptops - About Us</title>
    <style>
        /* CSS Variables */
        :root {
            --primary: #0056b3;
            --secondary: #333752;
            --accent: #ff6a00;
            --light: #f2f6fc;
            --dark: #1d2330;
            --text: #2d3748;
            --white: #ffffff;
            --gray: #718096;
            --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            --transition: all 0.3s ease;
            --shadow: 0 4px 12px rgba(0,0,0,0.08);
            --border-radius: 8px;
        }

        /* Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-main);
            line-height: 1.6;
            color: var(--text);
            background-color: var(--white);
        }

        h1, h2, h3, h4 {
            margin-bottom: 1rem;
            line-height: 1.2;
            color: var(--secondary);
        }

        h1 { font-size: 2.5rem; }
        h2 { font-size: 2rem; }
        h3 { font-size: 1.5rem; }

        p { margin-bottom: 1rem; }

        img { max-width: 100%; }

        a {
            text-decoration: none;
            color: var(--primary);
            transition: var(--transition);
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .btn {
            display: inline-block;
            padding: 12px 28px;
            background: var(--accent);
            color: var(--white);
            border: none;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

        .btn:hover {
            background: #e05e00;
            transform: translateY(-3px);
        }

        /* Layout */
        header {
            background-color: var(--secondary);
            padding: 1.2rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow);
        }

        footer {
            background: var(--dark);
            color: var(--white);
            padding: 3rem 0;
        }

        section {
            padding: 5rem 0;
        }

        section:nth-child(even) {
            background-color: var(--light);
        }

        /* Header Component */
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            color: var(--white);
            font-size: 1.8rem;
            font-weight: 700;
            display: flex;
            align-items: center;
        }

        .logo i {
            color: var(--accent);
            margin-right: 8px;
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        nav a {
            color: var(--white);
            font-weight: 500;
            position: relative;
            padding-bottom: 5px;
        }

        nav a:hover, nav a.active {
            color: var(--accent);
        }

        nav a.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--accent);
        }

        /* Hero Component */
        .hero {
            text-align: center;
            padding: 6rem 0;
            position: relative;
            overflow: hidden;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            margin: 0 auto;
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            color: var(--white);
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }

        .hero p {
            font-size: 1.3rem;
            margin-bottom: 2.5rem;
            color: rgba(255,255,255,0.9);
        }

        .hero-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            filter: brightness(0.7);
        }

        /* About Component */
        .about-content p {
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }

        /* Highlights Component */
        .highlights {
            text-align: center;
        }

        .highlights h2 {
            margin-bottom: 3.5rem;
            text-align: center;
        }

        .cards {
            display: grid;
            gap: 2rem;
        }

        .card {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 2.5rem;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.1);
        }

        .card h3 {
            color: var(--primary);
            margin-bottom: 1rem;
        }

        .card p {
            color: var(--gray);
        }

        .card-icon {
            font-size: 2.5rem;
            color: var(--accent);
            margin-bottom: 1.5rem;
        }

        /* Showcase Component */
        .showcase h2 {
            text-align: center;
            margin-bottom: 3.5rem;
        }

        .gallery {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        }

        .gallery img {
            border-radius: var(--border-radius);
            height: 260px;
            width: 100%;
            object-fit: cover;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .gallery img:hover {
            transform: scale(1.03);
        }

        /* Contact Component */
        .contact-form {
            background: var(--white);
            padding: 3rem;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            max-width: 800px;
            margin: 0 auto;
        }

        .contact-form h2 {
            text-align: center;
            margin-bottom: 2.5rem;
        }

        .form-group {
            margin-bottom: 1.8rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.6rem;
            font-weight: 600;
        }

        .form-control {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            font-family: var(--font-main);
            font-size: 1rem;
            transition: var(--transition);
        }

        .form-control:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(0,86,179,0.1);
        }

        textarea.form-control {
            min-height: 160px;
            resize: vertical;
        }

        .submit-wrap {
            text-align: center;
            margin-top: 2rem;
        }

        /* Footer Component */
        .footer-content {
            display: grid;
            gap: 2rem;
        }

        .footer-about {
            max-width: 500px;
        }

        .footer-about p {
            font-size: 1.1rem;
            margin-bottom: 1.5rem;
        }

        .social-links {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .social-icon {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

        .social-icon:hover {
            background: var(--accent);
            transform: translateY(-3px);
        }

        .social-icon i {
            font-size: 1.3rem;
        }

        .copyright {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 1.5rem;
            text-align: center;
            font-size: 0.95rem;
            opacity: 0.8;
        }

        /* Responsive Design */
        @media (min-width: 768px) {
            h1 { font-size: 3rem; }

            .logo { font-size: 2rem; }

            .cards { grid-template-columns: repeat(3, 1fr); }

            .hero h1 { font-size: 4rem; }

            .footer-content {
                grid-template-columns: 2fr 1fr;
                align-items: center;
            }
        }

        @media (min-width: 992px) {
            .header-content, .footer-content {
                grid-template-columns: 1fr 2fr;
            }

            .hero-content {
                padding: 2rem;
            }
            
            .hero h1 { font-size: 4.5rem; }
            .hero p { font-size: 1.5rem; }
            
            .about-content { 
                max-width: 800px;
                margin: 0 auto;
            }
        }

        /* Icons using pseudo-elements */
        .icon:before {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            display: inline-block;
        }

        .icon-logo:before { content: "\f109"; }
        .icon-chip:before { content: "\f2db"; }
        .icon-support:before { content: "\f059"; }
        .icon-innovation:before { content: "\f0eb"; }
        .icon-clock:before { content: "\f017"; }
        .icon-design:before { content: "\f108"; }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
        <div class="container header-content">
            <div class="logo">
                <span class="icon icon-logo"></span>
                TechUp Laptops
            </div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#" class="active">About Us</a></li>
                    <li><a href="#">Laptops</a></li>
                    <li><a href="#">Reviews</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Main Content -->
    <main>
        <!-- Hero Section -->
        <section class="hero">
            <img 
                src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" 
                alt="Modern laptop workspace setup showcasing our products" 
                class="hero-image"
            >
            <div class="container hero-content">
                <h1>About TechUp Laptops</h1>
                <p>We're revolutionizing the laptop industry with cutting-edge technology and customer-focused innovation</p>
                <a href="#contact" class="btn">Get In Touch</a>
            </div>
        </section>

        <!-- About Section -->
        <section class="about">
            <div class="container about-content">
                <h2>Our Journey in Laptop Technology</h2>
                <p>Founded in 2010, TechUp Laptops began as a passion project between two engineers who believed laptops could be both powerful and accessible. What started in a small garage has evolved into an industry-leading company with a singular mission: to design exceptional computing devices that empower people to create, connect, and accomplish more.</p>
                
                <p>Over the last decade, we've pioneered numerous innovations in portable computing, including our revolutionary cooling systems that enable unprecedented performance in slim form factors. We personally test every component and meticulously design each aspect of our laptops to ensure maximum reliability, performance, and user satisfaction.</p>
                
                <p>Our commitment extends beyond hardware. We believe in building long-term relationships with our customers through exceptional support and continuous software improvements. With a global team of over 300 specialists across 15 countries, we're constantly pushing technological boundaries while staying true to our core values of innovation, quality, and exceptional service.</p>
            </div>
        </section>

        <!-- Highlights -->
        <section class="highlights">
            <div class="container">
                <h2>Why Choose TechUp Laptops</h2>
                <div class="cards">
                    <div class="card">
                        <div class="card-icon icon icon-chip"></div>
                        <h3>Premium Components</h3>
                        <p>We use only the highest quality processors, displays, and components selected after rigorous testing for durability and performance.</p>
                    </div>
                    
                    <div class="card">
                        <div class="card-icon icon icon-support"></div>
                        <h3>Expert Support</h3>
                        <p>Our specialized technicians provide unrivaled 24/7 customer support with rapid response times and personalized solutions.</p>
                    </div>
                    
                    <div class="card">
                        <div class="card-icon icon icon-innovation"></div>
                        <h3>Innovative Design</h3>
                        <p>Continuous refinement and engineering breakthroughs result in the most durable yet lightweight laptop designs on the market.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Image Showcase -->
        <section class="showcase">
            <div class="container">
                <h2>Our Commitment to Excellence</h2>
                <div class="gallery">
                    <img 
                        src="https://images.unsplash.com/photo-1547083724-f87b06d01a6c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                        alt="Professional laptop quality testing process at our facility"
                    >
                    <img 
                        src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                        alt="TechUp engineering team developing new laptop prototypes"
                    >
                    <img 
                        src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                        alt="Modern production line manufacturing our premium laptops"
                    >
                    <img 
                        src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                        alt="Certified technicians assembling laptops by hand"
                    >
                    <img 
                        src="https://images.unsplash.com/photo-1531297484001-80022131f5a1?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                        alt="Close-up of customer experiences with TechUp laptops"
                    >
                    <img 
                        src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                        alt="Our commitment to sustainable laptop manufacturing practices"
                    >
                </div>
            </div>
        </section>

        <!-- Contact Section -->
        <section class="contact" id="contact">
            <div class="container">
                <div class="contact-form">
                    <h2>Have Questions About Our Laptops?</h2>
                    <p>Our tech specialists are ready to assist with any inquiries about our products or customization options.</p>
                    
                    <form>
                        <div class="form-group">
                            <label for="name">Full Name</label>
                            <input type="text" id="name" class="form-control" placeholder="Enter your name" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="email">Email Address</label>
                            <input type="email" id="email" class="form-control" placeholder="Enter your email" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="message">Your Message</label>
                            <textarea id="message" class="form-control" placeholder="Tell us about your laptop needs..." required></textarea>
                        </div>
                        
                        <div class="submit-wrap">
                            <button type="submit" class="btn">Send Message</button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer>
        <div class="container footer-content">
            <div class="footer-about">
                <h3>TechUp Laptops</h3>
                <p>Revolutionizing portable computing through premium engineering and customer-focused innovation since 2010.</p>
                
                <div class="social-links">
                    <a href="#" aria-label="Facebook" class="social-icon">
                        <span class="icon">f</span>
                    </a>
                    <a href="#" aria-label="Twitter" class="social-icon">
                        <span class="icon">t</span>
                    </a>
                    <a href="#" aria-label="Instagram" class="social-icon">
                        <span class="icon">i</span>
                    </a>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 2023 TechUp Laptops. All rights reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>
```

This complete HTML file creates a responsive "About Us" page for a laptop company, featuring:

1. Semantic HTML5 structure with clear sections
2. Modern, tech-focused color palette
3. Responsive design with mobile-first approach
4. Hero section with compelling headline and background image
5. Detailed company history and values sections
6. Card highlights showcasing key selling points
7. Image gallery illustrating product and team focus
8. Contact form for laptop inquiries
9. Footer with social links and copyright
10. Accessibility features including descriptive alt text and proper labeling
11. All CSS contained within a <style> tag with organized sections

The solution includes thoughtful content centered specifically around the laptop company's vision, technology, and customer support philosophy while maintaining a professional tech-industry aesthetic.