created cards

app/components/cards.hbs

@@ -0,0 +1,38 @@
+<section class='joining'>
+  <h2 class='joining__title'>Why you should consider joining?</h2>
+  <div class='joining__content'>
+    <ul class='cards'>
+      <div class='body-blackout {{if this.showModal "is-blacked-out" ""}}'></div>
+      {{! Cards }}
+      {{#each this.CARDS_MAPPING as |card|}}
+      <div class='card popup-trigger' {{on "click" (fn this.toggleModal card.id)}}>
+        <h3 class='title-bullet-points'>{{card.title}}</h3>
+        <img src={{card.image}} alt='real-dev' height='220px' width='280px' />
+        <p>
+          {{{card.content}}}
+        </p>
+        <button type='button' class='popup-trigger read-more'>
+          Read More
+        </button>
+      </div>
+      {{/each}}
+
+      {{! Modals }}
+      {{#each this.CARDS_MAPPING as |card|}}
+      {{#if (eq card.id this.clickedModal.id)}}
+        <div class='popup-modal {{if this.showModal "is--visible" ""}} shadow modal-card' {{on-click-outside
+          this.closeModal}}>
+          <button class='popup-modal__close' {{on "click" this.closeModal}}>&times;</button>
+          <h2 class='modal-title-bullet-points'>{{card.title}}</h2>
+          <div>
+            <img src={{card.image}} alt='real-dev' />
+            <p>
+              {{{card.fullContent}}}
+            </p>
+          </div>
+        </div>
+      {{/if}}
+      {{/each}}
+    </ul>
+  </div>
+</section>

app/components/cards.js

@@ -0,0 +1,136 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class CardsComponent extends Component {
+  @tracked showModal = false;
+  @tracked clickedModal;
+
+  CARDS_MAPPING = [
+    {
+      id: 1,
+      title: 'Real Development',
+      content: `It’s in the name. We do real development to solve real challenges.
+            This isn’t a tutorial hell workshop, where you constantly watch a
+            bunch of videos all the time and label yourself a developer on
+            LinkedIn.`,
+      fullContent: `It’s in the name. We do real development to solve real challenges.
+            This isn’t a tutorial hell workshop, where you constantly watch a
+            bunch of videos all the time and label yourself a developer on
+            LinkedIn.
+            <br />
+            We don’t do unfinished hobby projects here. Our code is peer
+            reviewed, improved and the open source work that you do here is
+            displayed on your member’s profile.
+            <br />
+            You are encouraged to show this profile to your potential
+            recruiters, and this work is more credible because it’s deployed on
+            production and has real users. You will learn debugging skills and
+            improving performance and reliability of the products you make here.
+            <br />
+            You will be given real challenges, which are always slightly outside
+            your comfort zone and current skills, so that you keep getting
+            better.`,
+      image: 'assets/images/cards/real-development.png',
+    },
+    {
+      id: 2,
+      title: 'Constant coaching and mentoring',
+      content: `Our main mentor and coach,
+          <strong>Ankush Dharkar</strong>, has been teaching people to solve
+          engineering challenges and code for a long time. He is himself a
+          full-stack developer, with heavy expertise on Frontend UI engineering.
+        `,
+      fullContent: `Our main mentor and coach,
+            <strong>Ankush Dharkar</strong>, has been teaching people to solve engineering
+            challenges and code for a long time. He is himself a full-stack
+            developer, with heavy expertise on Frontend UI engineering. He was
+            involved with his own startup for more than 7 years, then worked at
+            Disney+ Hotstar, was an instructor at career accelerator at Pesto
+            Tech, and currently working at CrowdStrike.
+            <br />
+            You will always be tracked for updates on our
+            <strong>status site</strong>, and we periodically remove our inactive
+            participants. So, rest assured, there’s no dead-weight.
+            <br />
+            You will always have direction and goals on how to improve. You
+            won’t be wasting time deciding what to build -- this is often a
+            problem people don’t realize. People choose hobby projects they
+            already know how to do. In real life, quite often you get new
+            unforseen challenges. We prepare you to tackle them head-on.`,
+      image: 'assets/images/cards/constant-coaching.png',
+    },
+    {
+      id: 3,
+      title: 'Smart squad members',
+      content: `All the members who you would work with, our highly active motivated
+            and driven peer group that you can ask for. You may or may not have
+            such a group at your workplace :)`,
+      fullContent: `You will work with other smart developers, some of them who started
+            with almost no knowledge of coding or development. The only thing
+            that makes them successful is commitment, persistence and
+            willingness to admit things they do not know and do something about
+            it. If you stay shy and don’t participate, you will be the one at
+            loss.
+            <br />
+            All the members who you would work with, our highly active motivated
+            and driven peer group that you can ask for. You may or may not have
+            such a group at your workplace :)`,
+      image: 'assets/images/cards/smart-squad-members.png',
+    },
+    {
+      id: 4,
+      title: 'Learning and Collaboration',
+      content: `We share our experiences and knowledge, so you will learn far more
+            and sooner than on your own. We pool and share our resources to
+            ensure we are some of the best employees companies will come across.`,
+      fullContent: `We share our experiences and knowledge, so you will learn far more
+            and sooner than on your own. We pool and share our resources to
+            ensure we are some of the best employees companies will come across.`,
+      image: 'assets/images/cards/learning.png',
+    },
+    {
+      id: 5,
+      title: 'Engineering for evolution',
+      content: `We are not a one-trick pony. We do projects in a lot of
+            technologies, including standard web technologies like HTML, CSS,
+            JavaScript, React, Ember, Vue, Node, Go, Rust, and more.`,
+      fullContent: `We are not a one-trick pony. We do projects in a lot of
+            technologies, including standard web technologies like HTML, CSS,
+            JavaScript, React, Ember, Vue, Node, Go, Rust, and more.
+            <br />
+            We don’t limit ourselves to one thing. We focus on building amazing
+            basic foundations and then adapting and learning whatever tech or
+            tool we have to in order to engineer the best solutions to problems.
+            <br />
+            We are engineers and problem solvers, not the kind of people who
+            will become outdated with time.`,
+      image: 'assets/images/cards/engineering-for-evolution.png',
+    },
+    {
+      id: 6,
+      title: 'Soft Skills',
+      content: `Being successful in career is much more than just knowing how to
+            push keys and click around. We ensure that you are the kind of
+            person who is great at communitcation skills: Both Written and
+            Spoken.`,
+      fullContent: `Being successful in career is much more than just knowing how to
+            push keys and click around. We ensure that you are the kind of
+            person who is great at communitcation skills: Both Written and
+            Spoken.
+            <br />
+            We are ourselves a fun group, who believe in helping each other. You
+            will have a good time!`,
+      image: 'assets/images/cards/soft-skills.png',
+    },
+  ];
+
+  @action toggleModal(id) {
+    this.clickedModal = this.CARDS_MAPPING.find((card) => card.id === id);
+    this.showModal = !this.showModal;
+  }
+
+  @action closeModal() {
+    this.showModal = false;
+  }
+}

app/styles/app.css

@@ -1,6 +1,7 @@
 @import 'navbar.module.css';
 @import 'header.module.css';
 @import 'description.module.css';
+@import 'cards.module.css';
 
 * {
   margin: 0px;

app/styles/cards.module.css

@@ -0,0 +1,156 @@
+.joining__title {
+  text-align: center;
+  color: var(--color-darkblack);
+  margin: 100px 0px 40px;
+}
+
+.joining__content {
+  font-weight: 400;
+  font-size: 1.1rem;
+  color: var(--color-darkblack);
+  line-height: 175%;
+  text-align: justify;
+}
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(2, 2fr);
+  grid-auto-rows: auto;
+  grid-gap: 5rem;
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 50px;
+}
+
+.body-blackout {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: var(--color-backdrop);
+}
+
+.body-blackout.is-blacked-out {
+  display: block;
+}
+
+.card,
+.modal-card {
+  overflow: hidden;
+  border-radius: 20px;
+  padding: 2rem;
+  text-align: center;
+  box-shadow: 0 10px 10px var(--color-darkblack-low-opacity);
+}
+
+.card:hover {
+  cursor: pointer;
+  transform: scale(1.02);
+  transition: all 250ms linear;
+}
+
+.popup-trigger {
+  display: inline-block;
+}
+
+.read-more {
+  border-radius: 10px;
+  outline: none;
+  background: var(--color-lightgrey);
+  border: none;
+  padding: 6px 14px;
+  cursor: pointer;
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.popup-modal {
+  height: 90vh;
+  border-radius: 20px;
+  background-color: var(--color-white);
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: 10px 45px;
+  opacity: 0;
+  pointer-events: none;
+  transition: all 300ms ease-in-out;
+  z-index: 1;
+  overflow: scroll;
+  scrollbar-width: 20;
+}
+
+.popup-modal.is--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.popup-modal__close {
+  padding: 2px 2px;
+  cursor: pointer;
+  color: var(--color-darkblack);
+  border: none;
+  background-color: transparent;
+  font-size: 3rem;
+  font-weight: 900;
+  text-align: right;
+}
+
+.modal-title-bullet-points {
+  font-size: 45px;
+  margin: 2px 2px;
+  text-align: center;
+}
+
+.title-bullet-points {
+  font-size: 36px;
+  margin: 30px 2px;
+  text-align: center;
+}
+
+@media (max-width: 1024px) {
+  .joining__title {
+    font-size: 2.8rem;
+    margin-top: 150px;
+    margin-bottom: 75px;
+  }
+
+  .joining__content {
+    font-size: 1.25rem;
+    padding: 0px;
+  }
+
+  .cards {
+    grid-template-columns: repeat(1, 2fr);
+    max-width: 960px;
+    margin: auto;
+  }
+
+  .card:hover {
+    transform: scale(1);
+  }
+
+  .modal-title-bullet-points {
+    font-size: 2rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .popup-modal {
+    height: 75vh;
+    overflow: scroll;
+  }
+}
+
+@media (max-width: 425px) {
+  .card {
+    padding: 20px 10px;
+  }
+}

app/styles/variables.css

@@ -9,6 +9,7 @@
   --color-darkblack-low-opacity: #09113355;
   --color-blackshadow: #3c40434d;
   --color-blackshadow2: #3c404326;
+  --color-backdrop: #00000066;
 
   --color-navyblue: #1d1283;
   --color-pink: #e30162;

app/templates/index.hbs

@@ -1,2 +1,3 @@
 <Header />
-<Description />
+<Description />
+<Cards />

tests/integration/components/cards-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'website-www/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | cards', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Cards />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Cards>
+        template block text
+      </Cards>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});