export default function Digital() {
    return (
        <>
        <section className="ux-project-hero ux-project-heropad">
          <div className="container">
            {/* center content */}
            <div className="ux-project-content text-center">
              <h1 className="ux-project-title">
                Digital Platforms Built <br /> to Scale
              </h1>
              <p className="ux-project-subtitle">
                Web architecture designed for growth, integration, and performance —
                not just design awards.
              </p>
            </div>
            <div className="ux-hero-actions">
              <a href="#" className="btn ux-btn-primary">
                Start a Project{" "}
                <span className="ux-btn-icon">
                  <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                </span>
              </a>
              <a href="#" className="btn ux-btn-secondary">
                View Case Studies
              </a>
            </div>
            <div className="row align-items-center g-5 ux-growth-section">
              {/* Left Content */}
              <div className="col-lg-7">
                <span className="ux-growth-label">Philosophy</span>
                <h2 className="ux-growth-title">Most Websites Break Under Growth</h2>
                <p className="ux-growth-subtitle">
                  Most websites look polished at launch — and collapse under growth.
                </p>
                <p className="ux-growth-small">They aren't structured for:</p>
                <div className="row">
                  <div className="col-md-6">
                    <ul className="ux-growth-list">
                      <li>Traffic spikes</li>
                      <li>Campaign scale</li>
                      <li>Data flow</li>
                    </ul>
                  </div>
                  <div className="col-md-6">
                    <ul className="ux-growth-list">
                      <li>CRM integrations</li>
                      <li>Multi-region expansion</li>
                    </ul>
                  </div>
                </div>
                <p className="ux-growth-bottom">
                  Design without architecture becomes technical debt.
                  <br />
                  Growth exposes weak foundations.
                </p>
              </div>
              {/* Right Image */}
              <div className="col-lg-5">
                <div className="ux-growth-image-box">
                  <img src="assets/images/Philosophy.png" alt="UI Design" />
                </div>
              </div>
            </div>
          </div>
        </section>
        {/* ===========================
         APPROACH SECTION
      =========================== */}
        <section className="ux-approach-section">
          <div className="container">
            <div className="row align-items-end mb-3">
              <div className="col-lg-6">
                <span className="ux-label">Our Approach</span>
                <h2 className="ux-section-title">
                  We don't design pages.
                  <br />
                  We design digital infrastructure.
                </h2>
              </div>
              <div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
                <p className="ux-section-desc">
                  The Result Is A Platform That Evolves With The Business.
                </p>
              </div>
            </div>
            <div className="row g-4">
              {/* Card 1 */}
              <div className="col-lg-4 col-md-6">
                <div className="ux-card">
                  <div className="ux-card-top">
                    <span className="ux-icon">
                      <img src="assets/images/Architecture.svg" alt="" />
                    </span>
                    <span className="ux-num">01</span>
                  </div>
                  <h4>Architecture First</h4>
                  <p>
                    We map user journeys, conversion paths, and information
                    hierarchies before visual design begins.
                  </p>
                </div>
              </div>
              {/* Card 2 */}
              <div className="col-lg-4 col-md-6">
                <div className="ux-card">
                  <div className="ux-card-top">
                    <span className="ux-icon">
                      <img src="assets/images/Built.svg" alt="" />
                    </span>
                    <span className="ux-num">02</span>
                  </div>
                  <h4>Built for Integration</h4>
                  <p>
                    CRM, automation, analytics, payment systems — all planned into the
                    structure.
                  </p>
                </div>
              </div>
              {/* Card 3 */}
              <div className="col-lg-4 col-md-6">
                <div className="ux-card">
                  <div className="ux-card-top">
                    <span className="ux-icon">
                      <img src="assets/images/Designed.svg" alt="" />
                    </span>
                    <span className="ux-num">03</span>
                  </div>
                  <h4>Designed for Scale</h4>
                  <p>Modular components, flexible CMS logic, multi-site readiness.</p>
                </div>
              </div>
            </div>
          </div>
        </section>
        {/* ===========================
         DELIVER SECTION
      =========================== */}
        <section className="ux-deliver-section">
          <div className="container">
            <h2 className="ux-deliver-title">What We Deliver</h2>
            <div className="row g-5">
              {/* Left List */}
              <div className="col-lg-7">
                <div className="ux-deliver-list active">
                  <span>01</span>
                  UX strategy and journey mapping
                </div>
                <div className="ux-deliver-list">
                  <span>02</span>
                  Wireframes and structural prototypes
                </div>
                <div className="ux-deliver-list">
                  <span>03</span>
                  Design systems (tokens, components, patterns)
                </div>
                <div className="ux-deliver-list">
                  <span>04</span>
                  Development-ready UI
                </div>
                <div className="ux-deliver-list">
                  <span>05</span>
                  Headless or CMS implementation
                </div>
                <div className="ux-deliver-list">
                  <span>06</span>
                  Performance optimization
                </div>
                <div className="ux-deliver-list">
                  <span>07</span>
                  Technical documentation
                </div>
              </div>
              {/* Right Snapshot */}
              <div className="col-lg-5">
                <div className="ux-snapshot-box">
                  <small>CASE SNAPSHOT</small>
                  <hr />
                  <span className="ux-mini-title">CHALLENGE</span>
                  <h4>Disconnected marketing + outdated web structure</h4>
                  <span className="ux-mini-title mt-4 d-block">OUTCOME</span>
                  <h2>42% increase</h2>
                  <p>in qualified conversions within 90 days</p>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section className="connect-section">
          <div className="container">
            {/* HEADING */}
            <h2>How We Work</h2>
            <p className="subtitle">
              We design and build high-performance digital platforms structured for
              conversion, scale, and integration.
            </p>
            {/* FLOW */}
            <div className="connect-flow">
              <div className="flow-item">
                <div className="icon">
                  <img src="assets/images/Brand1.png" alt="" />
                </div>
                <span>Discovery</span>
              </div>
              <div className="arrow">
                <img src="assets/images/Everything.svg" alt="" />
              </div>
              <div className="flow-item">
                <div className="icon">
                  <img src="assets/images/Platform.svg" alt="" />
                </div>
                <span>Architecture</span>
              </div>
              <div className="arrow">
                <img src="assets/images/Everything.svg" alt="" />
              </div>
              <div className="flow-item">
                <div className="icon">
                  <img src="assets/images/Campaign1.svg" alt="" />
                </div>
                <span>Design</span>
              </div>
              <div className="arrow">
                <img src="assets/images/Everything.svg" alt="" />
              </div>
              <div className="flow-item">
                <div className="icon">
                  <img src="assets/images/content1.svg" alt="" />
                </div>
                <span>Build</span>
              </div>
              <div className="arrow">
                <img src="assets/images/Everything.svg" alt="" />
              </div>
              <div className="flow-item">
                <div className="icon">
                  <img src="assets/images/Automation.png" alt="" />
                </div>
                <span>Optimize</span>
              </div>
            </div>
            {/* BOTTOM TEXT */}
            <p className="bottom-text">
              No rushed mockups. No disconnected freelancers. Everything is structured
              from day one.
            </p>
          </div>
        </section>
        {/* TOP CTA */}
        <div className="ux-footer-hero">
          <div className="container">
            <div className="ux-footer-hero-content text-center">
              <p className="ux-section-label">AAideA</p>
              <h2 className="ux-footer-title">
                If the idea is strong, we'll scale it.
              </h2>
              <div className="ux-hero-actions">
                <a href="#" className="btn ux-btn-primary">
                  Start a Project{" "}
                  <span className="ux-btn-icon">
                    <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                  </span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </>
      
    );
  }