Aaidea/app/linkedin_uppro/page.tsx

import Link from "next/link";

export default function linkedin_uppro() {
  return (
<>
  <section className="ux-project-hero">
    <div className="container">
      {/* center content */}
      <div className="ux-project-content text-center">
        <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">LynkedUp Pro</h1>
        <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">Trust vs. Scale.</p>
      </div>
      <div className="breacampoffline" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
        <p style={{ textAlign: "right" }}>
          The market lacked a structured bridge between vetted talent and field
          execution. Trust and scale needed to coexist.
        </p>
        <p>
          Design a platform that manages high-level talent while remaining
          accessible for enterprise scale with seamless global collaboration
          infrastructure.
        </p>
      </div>
    </div>
  </section>
  {/* ===========================
   CASE RESULT SECTION
=========================== */}
  <section className="ux-result-section">
    <div className="container">
      {/* TOP BOX */}
      <div className="ux-result-box">
        {/* LEFT */}
        <div className="ux-result-left" data-aos="fade-right" data-aos-duration="1000">
          <p className="ux-step-label">Amplify</p>
          <h3 className="ux-result-heading">WE BUILT:</h3>
          <div className="ux-build-grid">
            <div className="ux-mini-card active" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
              <span>01</span>
              <p>Product UX architecture</p>
            </div>
            <div className="ux-mini-card active" data-aos="fade-up" data-aos-delay="200" data-aos-duration="900">
              <span>02</span>
              <p>Modular UI system</p>
            </div>
            <div className="ux-mini-card active" data-aos="fade-up" data-aos-delay="300" data-aos-duration="900">
              <span>03</span>
              <p>Marketing website</p>
            </div>
            <div className="ux-mini-card active" data-aos="fade-up" data-aos-delay="400" data-aos-duration="900">
              <span>04</span>
              <p>Onboarding flows</p>
            </div>
          </div>
        </div>
        {/* RIGHT */}
        <div className="ux-result-right" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
          <p className="ux-step-label">Amplify</p>
          <h3 className="ux-result-heading">AI WAS USED TO:</h3>
          <div className="ux-ai-grid">
            <div className="ux-mini-card" data-aos="fade-up" data-aos-delay="200" data-aos-duration="900">
              <span>01</span>
              <p>UI variation testing</p>
            </div>
            <div className="ux-mini-card" data-aos="fade-up" data-aos-delay="300" data-aos-duration="900">
              <span>02</span>
              <p>Content system expansion</p>
            </div>
            <div className="ux-mini-card" data-aos="fade-up" data-aos-delay="400" data-aos-duration="900">
              <span>03</span>
              <p>Workflow acceleration</p>
            </div>
          </div>
        </div>
      </div>
      {/* BOTTOM BOX */}
      <div className="ux-deliver-box">
        {/* LEFT */}
        <div className="ux-deliver-left" data-aos="fade-right" data-aos-duration="1000">
          <p className="ux-step-label">Activate</p>
          <h3 className="ux-result-heading">DELIVERED:</h3>
          <ul className="ux-deliver-list">
            <li>SaaS Interface</li>
            <li>Marketing Site</li>
            <li>Demo Video</li>
            <li>System UI Kit</li>
          </ul>
        </div>
        {/* CENTER */}
        <div className="ux-deliver-center" data-aos="zoom-in" data-aos-delay="200" data-aos-duration="1000">
          <img src="assets/images/Delivered.png" alt="" />
        </div>
        {/* RIGHT */}
        <div className="ux-deliver-right" data-aos="fade-left" data-aos-delay="300" data-aos-duration="1000">
          <h3 className="ux-result-heading">RESULT: </h3>
          <p>
            Professional-grade platform. Structured user journey. Scalable
            product foundation.
          </p>
          <Link href="/start_project" className="ux-result-btn">
            Design your platform
          </Link>
        </div>
      </div>
    </div>
  </section>
  {/* TOP CTA */}
  <div className="ux-footer-hero">
    <div className="container">
      <div className="ux-footer-hero-content text-center" data-aos="zoom-in" data-aos-duration="1000">
        <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">
          <Link href="/start_project" className="btn ux-btn-primary">
            Start a Project{" "}
            <span className="ux-btn-icon">
              <img src="assets/images/arrowbuttonwhite.svg" alt="" />
            </span>
          </Link>
        </div>
      </div>
    </div>
  </div>
</>

  );
}