export default function Content() {
  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">
            Content Built For <br /> Consistency And Scale
          </h1>
          <p className="ux-project-subtitle">
            Structured storytelling across video, motion, and digital channels.
          </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">Content Often Becomes Reactive</h2>
            <p className="ux-growth-subtitle">Teams struggle with:</p>
            <div className="row">
              <div className="col-md-6">
                <ul className="ux-growth-list">
                  <li>Irregular posting</li>
                  <li>Inconsistent quality</li>
                </ul>
              </div>
              <div className="col-md-6">
                <ul className="ux-growth-list">
                  <li>No narrative cohesion</li>
                  <li>Burnout from constant creation</li>
                </ul>
              </div>
            </div>
            <p className="ux-growth-bottom">
              Without structure, content becomes noise.
            </p>
          </div>
          {/* Right Image */}
          <div className="col-lg-5">
            <div className="ux-growth-image-box">
              <img src="assets/images/Content.png" alt="Content System" />
            </div>
          </div>
        </div>
      </div>
    </section>
    <section className="ux-approach-section">
      <div className="container">
        <div className="row align-items-end mb-5">
          <div className="col-lg-6">
            <span className="ux-label">Our Approach</span>
            <h2 className="ux-section-title">
              We design repeatable content engines.
            </h2>
          </div>
          <div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
            <p className="ux-section-desc">
              We Design Repeatable Content Engines.
            </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>Narrative Framework</h4>
              <p>Define core story themes and recurring pillars.</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>Motion &amp; Visual Identity</h4>
              <p>Create motion language and visual consistency across formats.</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>Production System</h4>
              <p>
                Template-driven design, repeatable workflows, batch production
                models.
              </p>
            </div>
          </div>
        </div>
      </div>
    </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>
              Content strategy framework
            </div>
            <div className="ux-deliver-list">
              <span>02</span>
              Editorial calendar architecture
            </div>
            <div className="ux-deliver-list">
              <span>03</span>
              Video and motion templates
            </div>
            <div className="ux-deliver-list">
              <span>04</span>
              Visual storytelling systems
            </div>
            <div className="ux-deliver-list">
              <span>05</span>
              Social content design patterns
            </div>
            <div className="ux-deliver-list">
              <span>06</span>
              Production workflows
            </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>Inconsistent brand voice on social</h4>
              <span className="ux-mini-title mt-4 d-block">OUTCOME</span>
              <h2>4x Engagement</h2>
              <p>Growth with structured content system</p>
            </div>
          </div>
        </div>
      </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>
  </>
  
  );
}