Getting started

Below are the available pre-built Problem Section Components. More components are added overtime.

Problem 1

Link the following stylesheet to your html for this component to display properly:

<link type="text/css" rel="stylesheet" href="css/index.css">

You should also remove any other Problem Sections related stylesheets.


 <!-- PROBLEM SECTION -->
  <section class="section_wrapper" id="challenge">
    <div class="pricing_mini_heading_container">
      <span class="pricing_mini_heading">Challenge</span>
    </div>
    <h1 class="testimonials_section_heading">Here is the headache</h1>
    <p class="testimonials_section_subheading">Experienced Devs will tell you how challenging it can be to work on a full stack saas project while also building your company. Here is a breakdown of the super draining, weeks long process of setting up a saas project from scratch.</p>

    <div class="problems_container">
      <p class="problem_text"><span>12 hrs</span> Building a Node.js server</p>
      <p class="problem_text">+<span> 2 hrs</span> Setting up a database</p>
      <p class="problem_text">+<span> 3 hrs</span> to set up emails</p>
      <p class="problem_text">+<span> 6 hrs</span> designing a landing page</p>
      <p class="problem_text">+<span> 6 hrs</span> to handle Stripe webhooks</p>
      <p class="problem_text">+<span> 2 hrs</span> for SEO tags</p>
      <p class="problem_text">+<span> 4 hrs</span> Building Authentication system</p>
      <p class="problem_text">+<span> 2 hrs</span> setting up Google Oauth</p>
      <p class="problem_text">+<span> 3 hrs</span> for DNS records</p>
      <p class="problem_text">+<span> ∞ hrs</span> overthinking</p>

      <p class="problem_text_large">=<span> 40+ hrs</span> of headaches </p>
    </div>

    <p class="problem_footer_text"><i class="fas fa-arrow-circle-down"></i> There is a better way</p>
    
  </section>