<?php
session_start();
?>
<html>
<html lang="en">
<head>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-FEM3Q0G7NZ"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-FEM3Q0G7NZ');
    </script>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>How It Works • USC Student Marketplace</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>

<body>

<?php include 'nav.php'; ?>

<main class="wrap">

    <!-- ABOUT SECTION -->
    <section id="about" class="section">
        <h1>About the USC Student Marketplace</h1>
        <p>
            The USC Student Marketplace is a student-verified platform designed to help Trojans
            buy, sell, and trade everyday essentials safely, conveniently, and sustainably —
            while keeping exchanges within the USC community.
        </p>
    </section>

    <section id="how" class="section">
        <h2>How It Works</h2>

        <div class="grid">
            <article class="card">
                <span class="thumb" style="background-image:url('https://valyoufurniture.com/cdn/shop/articles/c_d2ef99c1-0449-4a07-a66e-aaa4c2aea126.jpg?v=1747679399&width=2048')"></span>
                <div class="meta">
                    <h3 class="title">1. Upload Your Item</h3>
                    <p>Snap a few photos, write a clear description, and set a fair price.</p>
                </div>
            </article>

            <article class="card">
                <span class="thumb" style="background-image:url('https://accidentallywesanderson.com/wp-content/uploads/2024/08/IMG_4623-scaled-3.jpeg')"></span>
                <div class="meta">
                    <h3 class="title">2. Connect With Buyers</h3>
                    <p>Browse offers, message verified USC students, and coordinate a meetup.</p>
                </div>
            </article>

            <article class="card">
                <span class="thumb" style="background-image:url('https://www.contradealer.co.uk/wp-content/uploads/2018/03/Online-Trading-contra-dealing.jpeg')"></span>
                <div class="meta">
                    <h3 class="title">3. Meet & Trade</h3>
                    <p>Exchange your item in a convenient campus location — quick and simple.</p>
                </div>
            </article>
        </div>
    </section>

</main>

<footer>
    © 2025 USC Student Marketplace · Built by Trojans for Trojans
</footer>

</body>
</html>
