(wip): Foundation and footer

src/app/common/common.module.ts

@@ -109,6 +109,8 @@ import { RouterHistoryService } from './services/router-history.service';
 import { DraggableListComponent } from './components/draggable-list/list.component';
 import { DndModule } from 'ngx-drag-drop';
 import { SiteService } from './services/site.service';
+import { MarketingComponent } from './components/marketing/marketing.component';
+import { MarketingFooterComponent } from './components/marketing/footer.component';
 
 @NgModule({
  imports: [
@@ -207,6 +209,8 @@ import { SiteService } from './services/site.service';
  FeaturedContentComponent,
  PosterDateSelectorComponent,
  DraggableListComponent,
+ MarketingComponent,
+ MarketingFooterComponent,
  ],
  exports: [
  MINDS_PIPES,
@@ -294,6 +298,7 @@ import { SiteService } from './services/site.service';
  PosterDateSelectorComponent,
  ChannelModeSelectorComponent,
  DraggableListComponent,
+ MarketingComponent,
  ],
  providers: [
  SiteService,

src/app/common/components/marketing/footer.component.html

+<div class="m-marketing__footer">
+ <div class="m-grid m-marketingFooter__columns">
+ <div
+ class="m-grid__column-3 m-grid__column-12--mobile m-marketingFooter__column"
+ >
+ <h4 i18n>About</h4>
+
+ <ul>
+ <li>
+ <a href="" i18n>
+ Company
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Mission
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Features
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Mobile
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Careers
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Investors
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Blog
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Whitepaper
+ </a>
+ </li>
+ </ul>
+ </div>
+
+ <div
+ class="m-grid__column-3 m-grid__column-12--mobile m-marketingFooter__column"
+ >
+ <h4 i18n>Business</h4>
+
+ <ul>
+ <li>
+ <a href="" i18n>
+ Upgrade
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Token
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Plus
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Pro
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Nodes
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Ads
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Payments
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Store
+ </a>
+ </li>
+ </ul>
+ </div>
+
+ <div
+ class="m-grid__column-3 m-grid__column-12--mobile m-marketingFooter__column"
+ >
+ <h4>Developers</h4>
+
+ <ul>
+ <li>
+ <a href="" i18n>
+ Documentation
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Community
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Code
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Canary
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Branding
+ </a>
+ </li>
+ </ul>
+ </div>
+
+ <div
+ class="m-grid__column-3 m-grid__column-12--mobile m-marketingFooter__column"
+ >
+ <h4>Support</h4>
+
+ <ul>
+ <li>
+ <a href="" i18n>
+ Help Desk
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Community
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Languages
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Status
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Contact
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="m-marketing__sep m-marketing__sep--big"></div>
+
+ <div class="m-grid m-marketingFooter__columns">
+ <div
+ class="m-grid__column-2 m-grid__column-12--mobile m-marketingFooter__column m-marketingFooter__column--noMobileSpacing"
+ i18n
+ >
+ <div class="m-marketingFooter__text">&copy; {{ year }} Minds, Inc.</div>
+ </div>
+
+ <div
+ class="m-grid__column-10 m-grid__column-12--mobile m-marketingFooter__column"
+ >
+ <ul class="m-marketingFooter__inlineList">
+ <li>
+ <a href="" i18n>
+ Terms of Service
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Privacy Policy
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ Content Policy
+ </a>
+ </li>
+
+ <li>
+ <a href="" i18n>
+ DMCA
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+</div>

src/app/common/components/marketing/footer.component.scss

+@import '../../../foundation/grid-values';
+
+m-marketing__footer {
+ display: block;
+
+ @include m-theme() {
+ background: linear-gradient(
+ 180deg,
+ themed($m-grey-50) 0.01%,
+ themed($m-white) 100%
+ );
+ }
+}
+
+.m-marketing__footer {
+ padding: 60px 0 48px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ padding: 32px 0;
+ }
+
+ @include m-theme() {
+ color: themed($m-grey-800);
+ }
+
+ .m-marketingFooter__columns {
+ max-width: 1084px;
+ margin: 0 auto;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ padding: 0 32px;
+ }
+ }
+
+ .m-marketingFooter__column {
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin-bottom: 32px;
+
+ &:last-child,
+ &.m-marketingFooter__column--noMobileSpacing {
+ margin-bottom: 0;
+ }
+ }
+
+ h4 {
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 21px;
+ margin: 0 0 26px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin: 0 0 8px;
+ }
+
+ @include m-theme() {
+ color: themed($m-grey-800);
+ }
+ }
+
+ .m-marketingFooter__text {
+ font-size: 14px;
+ line-height: 26px;
+ }
+
+ ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ > li {
+ @extend .m-marketingFooter__text;
+
+ @include m-theme() {
+ color: themed($m-grey-300);
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ display: inline-block;
+ margin-right: 1em;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+
+ a {
+ color: inherit;
+ font-weight: 300;
+ text-decoration: none;
+ }
+ }
+
+ &.m-marketingFooter__inlineList {
+ > li {
+ display: inline-block;
+ margin-right: 40px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin-right: 1em;
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+ }
+ }
+}

src/app/common/components/marketing/footer.component.ts

+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+ selector: 'm-marketing__footer',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ templateUrl: 'footer.component.html',
+})
+export class MarketingFooterComponent {
+ readonly year: number = new Date().getFullYear();
+}

src/app/common/components/marketing/marketing.component.html

+<div class="m-marketing">
+ <ng-content></ng-content>
+</div>
+
+<m-marketing__footer></m-marketing__footer>

src/app/common/components/marketing/marketing.component.scss

+@import '../../../foundation/grid-values';
+
+m-marketing {
+ .m-marketing {
+ font-family: Roboto, sans-serif;
+ font-weight: 400;
+ }
+
+ .m-marketing__sep {
+ border-top: 1px solid;
+ height: 0;
+ width: 100%;
+ margin: 40px 0;
+
+ &.m-marketing__sep--big {
+ margin: 60px 0;
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin: 20px 0;
+
+ &.m-marketing__sep--big {
+ margin: 30px 0;
+ }
+ }
+
+ @include m-theme() {
+ border-color: themed($m-grey-50);
+ }
+ }
+}

src/app/common/components/marketing/marketing.component.ts

+import {
+ ChangeDetectionStrategy,
+ Component,
+ Input,
+ OnInit,
+} from '@angular/core';
+import { MindsTitle } from '../../../services/ux/title';
+
+@Component({
+ selector: 'm-marketing',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ templateUrl: 'marketing.component.html',
+})
+export class MarketingComponent implements OnInit {
+ @Input() pageTitle: string = '';
+
+ constructor(protected title: MindsTitle) {}
+
+ ngOnInit() {
+ if (this.pageTitle) {
+ this.title.setTitle(this.pageTitle);
+ }
+ }
+}

src/app/foundation/grid-values.scss

+$m-grid-min-vp: 1168px;
+$m-grid-cols: 12;
+$m-grid-gap: 20px;

src/app/foundation/grid.scss

+@import './grid-values';
+
+.m-grid {
+ display: grid;
+ grid-template-columns: repeat($m-grid-cols, 1fr);
+ grid-column-gap: $m-grid-gap;
+ grid-row-gap: 0;
+
+ @for $i from 1 through $m-grid-cols {
+ .m-grid__column-#{$i} {
+ grid-column: auto / span $i;
+ }
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ @for $i from 1 through $m-grid-cols {
+ .m-grid__column-#{$i}--mobile {
+ grid-column: auto / span $i;
+ }
+ }
+ }
+}

src/app/modules/upgrades/upgrades.component.html

-<div class="m-upgrades">
- <section class="m-upgrades__grid m-upgrades__mainFeatures">
- <div class="m-upgrades__gridColumn--5">
- <h1>Upgrade your Minds experience</h1>
-
- <p class="m-upgrades__description">
- Minds offers a unique range of powerful upgrades that will supercharge
- your Minds experience.
- </p>
-
- <ul class="m-upgrades__features">
- <li>
- TBD
- </li>
- <li>
- TBD
- </li>
- <li>
- TBD
+<m-marketing pageTitle="Upgrade your account" i18n-pageTitle>
+ <div class="m-upgrades">
+ <section class="m-upgrades__grid m-upgrades__mainFeatures">
+ <div class="m-upgrades__gridColumn--5">
+ <h1>Upgrade your Minds experience</h1>
+
+ <p class="m-upgrades__description">
+ Minds offers a unique range of powerful upgrades that will supercharge
+ your Minds experience.
+ </p>
+
+ <ul class="m-upgrades__features">
+ <li>
+ TBD
+ </li>
+ <li>
+ TBD
+ </li>
+ <li>
+ TBD
+ </li>
+ </ul>
+
+ <p>
+ <a class="m-upgrades__button m-upgrades__button--hollow"
+ >Upgrade Now</a
+ >
+ </p>
+ </div>
+
+ <div class="m-upgrades__gridColumn--7">
+ <!-- Main assets here -->
+ </div>
+ </section>
+
+ <section class="m-upgrades__grid">
+ <ul class="m-upgrades__gridColumn--12 m-upgrades__featuredIn">
+ <li>As featured in</li>
+ <li class="m-upgrades__featuredInItem--big">
+ <img src="" alt="BBC" />
  </li>
+ <li><img src="" alt="Fox News" /></li>
+ <li><img src="" alt="Forbes" /></li>
+ <li><img src="" alt="TechCrunch" /></li>
+ <li><img src="" alt="Reuters" /></li>
+ <li><img src="" alt="Wired" /></li>
+ <li><img src="" alt="The Joe Rogan Experience" /></li>
  </ul>
+ </section>
+
+ <div class="m-upgrades__separator"></div>
+
+ <m-upgrades__upgradeOptions class=""></m-upgrades__upgradeOptions>
 
- <p>
- <a class="m-upgrades__button m-upgrades__button--hollow">Upgrade Now</a>
- </p>
- </div>
-
- <div class="m-upgrades__gridColumn--7">
- <!-- Main assets here -->
- </div>
- </section>
-
- <section class="m-upgrades__grid">
- <ul class="m-upgrades__gridColumn--12 m-upgrades__featuredIn">
- <li>As featured in</li>
- <li class="m-upgrades__featuredInItem--big"><img src="" alt="BBC" /></li>
- <li><img src="" alt="Fox News" /></li>
- <li><img src="" alt="Forbes" /></li>
- <li><img src="" alt="TechCrunch" /></li>
- <li><img src="" alt="Reuters" /></li>
- <li><img src="" alt="Wired" /></li>
- <li><img src="" alt="The Joe Rogan Experience" /></li>
- </ul>
- </section>
-
- <div class="m-upgrades__separator"></div>
-
- <m-upgrades__upgradeOptions class=""></m-upgrades__upgradeOptions>
-
- <m-upgrades__buyTokens class=""></m-upgrades__buyTokens>
-</div>
+ <m-upgrades__buyTokens class=""></m-upgrades__buyTokens>
+ </div>
+</m-marketing>