created more about component

app/components/more-about.hbs

@@ -0,0 +1,29 @@
+<section class='info-video'>
+  <section class='info__section'>
+    <span class='info__note'>
+      To know how this page is getting developed, join our Discord Channel.
+      Contact one of our existing
+      <a class='info__note__link' href={{this.MEMBERS_URL}}>members</a>
+      for the invitation link or check our
+      <a class='info__note__link' href={{this.FAQ_URL}}>FAQ</a>
+      section.
+    </span>
+    <span class='info__img'>
+      <img
+        class='info__img-market'
+        src='assets/images/mobile-marketing.png'
+        alt='infoNoteImg'
+      />
+    </span>
+  </section>
+  <section class='video__section'>
+    <h1 class='video__heading'>Check out what Real Dev Squad is :</h1>
+    <iframe
+      src='https://www.youtube.com/embed/8UPjK1wLnTk?controls=0'
+      frameborder='0'
+      allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+      allowfullscreen
+    >
+    </iframe>
+  </section>
+</section>

app/components/more-about.js

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+import { APPS } from '../constants/urls';
+
+export default class MoreAboutComponent extends Component {
+  MEMBERS_URL = APPS.MEMBERS;
+  FAQ_URL = APPS.FAQ;
+}

app/constants/urls.js

@@ -6,6 +6,7 @@ export const APPS = {
   CRYPTO: 'https://crypto.realdevsquad.com/',
   STATUS: 'https://status.realdevsquad.com/',
   PROFILE: 'https://my.realdevsquad.com/',
+  FAQ: 'https://welcome.realdevsquad.com/faq.html',
 };
 
 export const AUTH = {

app/styles/app.css

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

app/styles/more-about.module.css

@@ -0,0 +1,111 @@
+.info-video {
+  width: 100%;
+  margin: 30px 0px;
+}
+
+.info__section {
+  margin: 40px 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.info__note {
+  width: 40%;
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 3rem;
+  text-align: left;
+  color: var(--color-darkblack);
+}
+
+.info__note__link {
+  color: var(--color-pink);
+  text-decoration: none;
+}
+
+.info__img {
+  width: 40%;
+}
+
+.info__img-market {
+  width: 90%;
+}
+
+.video__section {
+  text-align: center;
+  width: 95%;
+  margin: auto;
+}
+
+.video__heading {
+  color: var(--color-darkblack);
+  font-weight: 700;
+  font-size: 2.5rem;
+  padding: 40px 0px;
+}
+
+iframe {
+  width: 700px;
+  height: 350px;
+}
+
+@media (max-width: 1024px) {
+  .info__section {
+    margin: 20px 0px;
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  .info__note {
+    padding: 30px 0px;
+    width: 70%;
+    text-align: center;
+  }
+
+  .info__img {
+    width: 70%;
+  }
+
+  .info__img-market {
+    width: 100%;
+  }
+
+  iframe {
+    width: 70%;
+    height: 250px;
+  }
+}
+
+@media (max-width: 768px) {
+  .info__note {
+    font-size: 1.5rem;
+    line-height: 2rem;
+      text-align: justify;
+  }
+
+  .video__heading {
+    font-size: 2rem;
+  }
+
+  iframe {
+    width: 90%;
+  }
+}
+
+@media (max-width: 425px) {
+  .info-video {
+    margin: 20px 0px;
+  }
+
+  .info__note,
+  .info__img {
+    line-height: 2rem;
+    text-align: justify;
+    width: 90%;
+  }
+
+  iframe {
+    height: 200px;
+  }
+}

app/templates/index.hbs

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

tests/integration/components/more-about-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 | more-about', 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`<MoreAbout />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <MoreAbout>
+        template block text
+      </MoreAbout>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});