<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ url_for('static', filename='landing.css') }}">
    <script async src="{{ url_for('static', filename='js/landing.js') }}"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}">
      <link rel="icon" href="{{ url_for('static', filename='social-media.png') }}">
  <!-- <a href="https://www.flaticon.com/free-icons/marketing" title="marketing icons">Marketing icons created by Freepik - Flaticon</a> --->
    <title>Social Media Automation</title>
</head>
<body>
     <nav class="navbar">
        <div class="nav-container">
            <a href="/" class="nav-logo">Social Media Automation</a>
            <ul class="nav-links">
            <li><a href="{{ url_for('home') }}">Home</a></li>
                <li><a href="{{ url_for('instagram_form') }}">Instagram</a></li>
            <li><a href="{{ url_for('tweet_form') }}">Twitter</a></li>
                <li><a href="{{ url_for('email_form') }}">Emails</a></li>
                <li><a href="">My Stats</a></li>
            {% if logged_in %}
                <li><a href="{{ url_for('logout') }}">Log Out</a></li>
            {% else %}
                <li><a href="{{ url_for('login') }}">Login</a></li>
                <li><a href="{{ url_for('register') }}">Register</a></li>
            {% endif %}
            </ul>
        </div>
    </nav>
    <header>
        <div id="header_text_container">
        <h1 id = "header-text">Say hello to the simplest solution to social media</h1>
            </div>
        <button id = "get-started-btn"><a href = {{ url_for("instagram_form") }}>Get started for free. No sign up required</a></button>
    </header>

 <div class="slideshow-container">
    <div class="mySlides fade">
        <img src="/static/landing1.jpg" alt = "social-media-pic1" style="width:100%">
    </div>
    <div class="mySlides fade">
        <img src="/static/landing2.jpg" alt = "social-media-pic1" style="width:100%">
    </div>
    <div class="mySlides fade">
        <img src="/static/landing3.jpg" alt = "social-media-pic1" style="width:100%">
    </div>
    </div>

    <section id="features" class="features-section">
  <div class="container px-4 py-5" id="custom-cards">
    <h2 class="pb-2 border-bottom">Highlights</h2>

    <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
      <div class="col">
        <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg round_corners" style="background-image: url('/static/features1.jpg');">
          <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
            <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Set daily AI generated posts</h2>
            <ul class="d-flex list-unstyled mt-auto">
              <li class="me-auto">
              </li>
              <li class="d-flex align-items-center me-3">
                <svg class="bi me-2" width="1em" height="1em"><use> ""></use></svg>
                <small>Earth</small>
              </li>
              <li class="d-flex align-items-center">
                <svg class="bi me-2" width="1em" height="1em"><use> ""></use></svg>
                <small>3d</small>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg round_corners" style="background-image: url('/static/features2.jpg');">
          <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
            <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Get and post data from your favorite sites</h2>
            <ul class="d-flex list-unstyled mt-auto">
              <li class="me-auto">
              </li>
              <li class="d-flex align-items-center me-3">
                <svg class="bi me-2" width="1em" height="1em"><use> ""></use></svg>
                <small>Pakistan</small>
              </li>
              <li class="d-flex align-items-center">
                <svg class="bi me-2" width="1em" height="1em"><use> ""></use></svg>
                <small>4d</small>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg round_corners" style="background-image: url('/static/features3.jpg');">
          <div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
            <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Create custom auto-post schedules</h2>
            <ul class="d-flex list-unstyled mt-auto">
              <li class="me-auto">
              </li>
              <li class="d-flex align-items-center me-3">
                <svg class="bi me-2" width="1em" height="1em"><use> ""></use></svg>
                <small>California</small>
              </li>
              <li class="d-flex align-items-center">
                <svg class="bi me-2" width="1em" height="1em"><use> ""></use></svg>
                <small>5d</small>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container px-4 py-5" id="icon-grid">
    <h2 class="pb-2 border-bottom">Features</h2>

    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
      <div class="col d-flex align-items-start">
        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use> ""></use></svg>
        <div>
          <h4 class="fw-bold mb-0">Instagram</h4>
          <p>Upload images, and schedule them for later, or auto post them at regular intervals.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use> ""></use></svg>
        <div>
          <h4 class="fw-bold mb-0">Twitter</h4>
          <p>Write tweets and schedule them for later, or auto-post them at regular intervals.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use> ""></use></svg>
        <div>
          <h4 class="fw-bold mb-0">Emails</h4>
          <p>Create emails and send them at regular intervals to your mailing list.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use> ""></use></svg>
        <div>
          <h4 class="fw-bold mb-0">AI Generated Images</h4>
          <p>Use AI Image Generation to be able to schedule and post AI generated images, with only a prompt.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use> ""></use></svg>
        <div>
          <h4 class="fw-bold mb-0">AI Tweet Generation</h4>
          <p>Use the Tweet and Email generation features to generate text content and automatically post it.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use> ""></use></svg>
        <div>
          <h4 class="fw-bold mb-0">Data based Posts</h4>
          <p>Upload URLs that contain data you want to post about. AI generated posts can be made based on the data.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use> ""></use></svg>
        <div>
          <h4 class="fw-bold mb-0">Included AI Posts</h4>
          <p>Take advantage of built-in AI Post-Bots such as the NewsPoster that creates AI generated posts based on the current news.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use> ""></use></svg>
        <div>
          <h4 class="fw-bold mb-0">Manage</h4>
          <p>Create and manage multiple posting schedules across multiple accounts.</p>
        </div>
      </div>
    </div>
  </div>
    </section>

    <section id="pricing">
        <h2>Pricing</h2>
        <div class="container-fluid" style="background: lightblue">
    <div class="container p-5">
      <div class="row">
        <div class="col-lg-4 col-md-12 mb-4">
          <div class="card h-100 shadow-lg round_corners">
            <div class="card-body">
              <div class="text-center p-3">
                <h5 class="card-title">Free</h5>
                <small>Simple Scheduling. Free.</small>
                <br><br>
                <span class="h2">$0</span>/month
                <br><br>
              </div>
              <p class="card-text">Unlimited scheduling across E-Mail, Twitter, and Instagram. No account needed.</p>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"></path>
              </svg> Unlimited Email Scheduling </li>
              <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"></path>
              </svg> Unlimited Twitter Scheduling</li>
              <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"></path>
              </svg> Unlimited Instagram Scheduling </li>
            </ul>
            <div class="card-body text-center">
              <button class="btn btn-outline-primary btn-lg" style="border-radius:30px">Select</button>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-12 mb-4">
          <div class="card h-100 shadow-lg round_corners">
            <div class="card-body">
              <div class="text-center p-3">
                <h5 class="card-title">Standard</h5>
                <small>Use AI to power your posts</small>
                <br><br>
                <span class="h2">$5</span>/month
                <br><br>
              </div>
              <p class="card-text">Enjoy unlimited post, tweet, and email scheduling, but with 100 AI generated Tweets, 100 AI generated Emails, and 50 AI generated Instagram image posts monthly, automatically posted for you.</p>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"></path>
              </svg> Everything in Free tier</li>
              <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"></path>
              </svg> AI Generated Tweets, Emails and Instagram posts</li>
              <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"></path>
              </svg> Use unlimited social media accounts</li>
            </ul>
            <div class="card-body text-center">
              <button class="btn btn-outline-primary btn-lg" style="border-radius:30px">Select</button>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-12 mb-4">
          <div class="card h-100 shadow-lg round_corners">
            <div class="card-body">
              <div class="text-center p-3">
                <h5 class="card-title">Premium</h5>
                <small>Combine the power of AI with third party integrations</small>
                <br><br>
                <span class="h2">$10</span>/month
                <br><br>
              </div>
              <p class="card-text">Enjoy unlimited scheduling, along with 200 AI generated tweets, 200 AI generated emails, and 100 AI generated Instagram Image posts, along with integration with third party APIs.</p>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"></path>
              </svg> Everything in Standard tier  </li>
              <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"></path>
              </svg> Incorporate third party data into your AI posts</li>
              <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"></path>
              </svg> Create customized AI post bots</li>
            </ul>
            <div class="card-body text-center">
              <button class="btn btn-outline-primary btn-lg" style="border-radius:30px">Select</button>
            </div>
          </div>
        </div>
      </div>
    </div>
        </div>
    </section>

    <section id="faq">
        <h2>FAQs</h2>
    </section>
  <footer>
        <p><a href="#"><span>Contact Us</span></a> | <a href="#"><span>Terms of Service</span></a> | <a href="#"><span>Privacy Policy</span></a></p>
    </footer>
</body>
</html>