refactor: features section

apps/commudle-admin/src/app/app-routing.module.ts

@@ -93,6 +93,10 @@ const routes: Routes = [
     loadChildren: () =>
       import('./feature-modules/public-reading-book/public-reading-book.module').then((m) => m.PublicReadingBookModule),
   },
+  {
+    path: 'features',
+    loadChildren: () => import('./feature-modules/features/features.module').then((m) => m.FeaturesModule),
+  },
   {
     path: 'case-studies',
     loadChildren: () => import('./feature-modules/case-study/case-study.module').then((m) => m.CaseStudyModule),

apps/commudle-admin/src/app/feature-modules/features/components/features-content/features-content.component.html

@@ -0,0 +1,9 @@
+<div *ngIf="selectedFeature" class="feature-content">
+  <div *ngIf="selectedFeature.image" class="image">
+    <img
+      alt="{{ selectedFeature.title }}"
+      [src]="imageUrl(selectedFeature.image).url()"
+      title="{{ selectedFeature.title }}"
+    />
+  </div>
+</div>

apps/commudle-admin/src/app/feature-modules/features/components/features-content/features-content.component.scss

@@ -0,0 +1,7 @@
+.feature-content {
+  @apply md:com-mt-0 md:com-p-0 com-pt-0 com-p-4;
+}
+
+img {
+  @apply com-w-full;
+}

apps/commudle-admin/src/app/feature-modules/features/components/features-content/features-content.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeaturesContentComponent } from './features-content.component';
+
+describe('FeaturesContentComponent', () => {
+  let component: FeaturesContentComponent;
+  let fixture: ComponentFixture<FeaturesContentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FeaturesContentComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FeaturesContentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/commudle-admin/src/app/feature-modules/features/components/features-content/features-content.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { IFeature } from 'apps/shared-models/features.model';
+import { CmsService } from 'apps/shared-services/cms.service';
+
+@Component({
+  selector: 'commudle-features-content',
+  templateUrl: './features-content.component.html',
+  styleUrls: ['./features-content.component.scss'],
+})
+export class FeaturesContentComponent implements OnInit {
+  @Input() selectedFeature: IFeature;
+  constructor(private cmsService: CmsService) {}
+
+  ngOnInit(): void {}
+
+  imageUrl(source: any) {
+    return this.cmsService.getImageUrl(source);
+  }
+}

apps/commudle-admin/src/app/feature-modules/features/components/features-index/features-index.component.html

@@ -0,0 +1,37 @@
+<div class="features">
+  <nb-card>
+    <nb-card-body>
+      <nb-list>
+        <nb-list-item
+          *ngFor="let feature of features; let i = index"
+          class="clickable"
+          [class.active]="feature.slug.current === selectedFeatureSlug"
+        >
+          <div class="feature" (click)="toggleShowAnswers(feature.slug.current, i)">
+            <div class="feature-item">
+              <div class="heading">
+                <div *ngIf="feature.icon" class="logo">
+                  <img alt="{{ feature.title }}" [src]="imageUrl(feature.icon).url()" title="{{ feature.title }}" />
+                </div>
+                <h2>
+                  {{ feature.title }}
+                </h2>
+              </div>
+              <div *ngIf="showSubHeading[i] && feature.features" class="sub-heading">
+                <ul *ngFor="let subheading of feature.features">
+                  <li>{{ subheading }}</li>
+                </ul>
+              </div>
+            </div>
+            <div *ngIf="feature.features">
+              <fa-icon [icon]="showSubHeading[i] ? faMinus : faAdd"></fa-icon>
+            </div>
+          </div>
+          <div *ngIf="isMobileView && showSubHeading[i]">
+            <commudle-features-content [selectedFeature]="selectedFeature"></commudle-features-content>
+          </div>
+        </nb-list-item>
+      </nb-list>
+    </nb-card-body>
+  </nb-card>
+</div>

apps/commudle-admin/src/app/feature-modules/features/components/features-index/features-index.component.scss

@@ -0,0 +1,67 @@
+.features {
+  @apply com-w-full md:com-m-0 com-mt-6;
+}
+
+nb-card {
+  @apply com-m-0;
+
+  nb-card-body {
+    @apply com-p-0;
+  }
+  nb-list {
+    nb-list-item {
+      @apply com-border-t-0 com-p-0 com-flex com-flex-col;
+      &:last-child {
+        @apply com-border-b-0;
+      }
+
+      .feature {
+        @apply com-flex com-flex-row com-justify-between com-items-start com-w-full com-p-6;
+
+        h2 {
+          @apply com-flex com-m-0 com-text-gray-900 com-text-lg com-font-normal com-mr-2 com-no-underline;
+        }
+
+        fa-icon {
+          @apply com-flex com-justify-end com-text-xl com-font-normal com-text-gray-900 com-mt-1;
+        }
+      }
+
+      .feature-item {
+        @apply com-flex com-flex-col com-w-full com-mr-4;
+      }
+
+      .heading {
+        @apply com-flex com-flex-row md:com-items-center com-items-start md:com-m-0 com-mt-1;
+
+        .logo {
+          @apply com-w-7 com-h-7 com-mr-3;
+
+          img {
+            @apply com-w-full com-h-full;
+          }
+        }
+
+        h2 {
+          @apply com-text-xl com-font-normal;
+        }
+      }
+
+      .sub-heading {
+        @apply com-flex com-flex-row com-mt-4 com-pt-4 com-border-0 com-border-t com-border-solid com-border-gray-300 com-items-start com-flex-wrap;
+        ul {
+          @apply com-m-0;
+          li {
+            @apply com-text-lg com-font-normal;
+          }
+        }
+      }
+    }
+  }
+}
+a {
+}
+
+.active {
+  @apply com-bg-Bright-Gray #{!important};
+}

apps/commudle-admin/src/app/feature-modules/features/components/features-index/features-index.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeaturesComponent } from './features-index.component';
+
+describe('FeaturesComponent', () => {
+  let component: FeaturesComponent;
+  let fixture: ComponentFixture<FeaturesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FeaturesComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FeaturesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/commudle-admin/src/app/feature-modules/features/components/features-index/features-index.component.ts

@@ -0,0 +1,45 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { faAdd, faMinus } from '@fortawesome/free-solid-svg-icons';
+import { IFeature } from 'apps/shared-models/features.model';
+import { CmsService } from 'apps/shared-services/cms.service';
+
+@Component({
+  selector: 'commudle-features-index',
+  templateUrl: './features-index.component.html',
+  styleUrls: ['./features-index.component.scss'],
+})
+export class FeaturesIndexComponent implements OnInit {
+  @Input() features: IFeature[];
+  @Input() selectedFeature: IFeature;
+  @Output() featureSlug: EventEmitter<string> = new EventEmitter<string>();
+  showSubHeading = [];
+  faAdd = faAdd;
+  faMinus = faMinus;
+  isMobileView: boolean;
+  selectedFeatureSlug: string;
+
+  constructor(private cmsService: CmsService) {}
+
+  ngOnInit(): void {
+    this.isMobileView = window.innerWidth <= 640;
+    this.featureSlug.emit(this.features[0].slug.current);
+    this.selectedFeatureSlug = this.features[0].slug.current;
+  }
+
+  imageUrl(source: any) {
+    return this.cmsService.getImageUrl(source);
+  }
+
+  toggleShowAnswers(slug, index?: number) {
+    if (slug) {
+      this.selectedFeatureSlug = slug;
+      this.featureSlug.emit(slug);
+    }
+    for (let i = 0; i < this.showSubHeading.length; i++) {
+      if (i !== index) {
+        this.showSubHeading[i] = false;
+      }
+    }
+    this.showSubHeading[index] = !this.showSubHeading[index];
+  }
+}

apps/commudle-admin/src/app/feature-modules/features/components/features/features.component.html

@@ -0,0 +1,123 @@
+<div class="features">
+  <div class="base-layout">
+    <div class="container">
+      <div class="header">
+        <h1 class="heading"><span>One Stop Solution</span> For Your Developer Communities</h1>
+        <h2 class="subheading">
+          We understand the vast engagement needs to build a developer community network for your company.
+        </h2>
+        <div class="header-image">
+          <img [src]="staticAssets.features_page_header.url" class="com-w-full" />
+        </div>
+      </div>
+      <h2 *ngIf="showHeading" class="features-heading">
+        <a [routerLink]="'.'" fragment="features">Everything Your Developer Community Needs</a>
+      </h2>
+      <h2 *ngIf="showSubHeading" class="features-subheading">
+        Build communities with multiple types of engagements, your search for 'the right platform' ends here.
+      </h2>
+      <div class="two-column-layout">
+        <div class="left-column">
+          <div *ngIf="features" class="features-index">
+            <commudle-features-index
+              [features]="features"
+              [selectedFeature]="selectedFeature"
+              (featureSlug)="getFeaturesData($event)"
+            ></commudle-features-index>
+          </div>
+          <a [routerLink]="['/pricing']" class="start-now-btn"
+            ><button nbButton status="primary" size="giant" fullWidth class="read-or-download">Start Now</button></a
+          >
+        </div>
+        <div *ngIf="!isMobileView && selectedFeature" class="main-column">
+          <commudle-features-content [selectedFeature]="selectedFeature"></commudle-features-content>
+        </div>
+      </div>
+      <div class="platform" id="know-your-community">
+        <h2 class="heading">
+          <a [routerLink]="'.'" fragment="know-your-community">Know & Grow Your Community Like Never Before</a>
+        </h2>
+        <p class="subheading">
+          With multiple options to engage with your community members, you can gain smarter insights on what the
+          community needs.
+        </p>
+        <commudle-public-page-layout [imageOnLeft]="true">
+          <div content>
+            <div class="content">
+              <div image class="image desktop-hidden">
+                <img
+                  alt="Know your community"
+                  [src]="staticAssets.features_know_your_community.url"
+                  title="Know your community"
+                />
+              </div>
+              <ul>
+                <li>
+                  <div class="icon">
+                    <!-- <fa-icon [icon]="faShapes"></fa-icon> -->
+                  </div>
+                  <div>
+                    <p class="heading">Generative Growth</p>
+                    <p class="subheading">
+                      With thousands of techies already using Commudle, your member base keeps growing with each
+                      activity.
+                    </p>
+                  </div>
+                </li>
+                <li>
+                  <div class="icon">
+                    <!-- <fa-icon [icon]="faHandsHoldingCircle"></fa-icon> -->
+                  </div>
+                  <div>
+                    <p class="heading">Custom Dashboards & API's</p>
+                    <p class="subheading">
+                      Need custom dashboards or API's to integrate with your existing systems? We will build them for
+                      you.
+                    </p>
+                  </div>
+                </li>
+                <li>
+                  <div class="icon">
+                    <!-- <fa-icon [icon]="faChartLine"></fa-icon> -->
+                  </div>
+                  <div>
+                    <p class="heading">Easy Migration</p>
+                    <p class="subheading">
+                      Are you already using a community platform with limited engagements and want to migrate? Our team
+                      will guide you step-by-step on how to do it smoothly.
+                    </p>
+                  </div>
+                </li>
+              </ul>
+              <a [routerLink]="['/pricing']" class="start-now-btn"
+                ><button nbButton status="primary" size="giant" class="read-or-download">Start Now</button></a
+              >
+            </div>
+          </div>
+          <div image class="image mobile-hidden">
+            <img
+              alt="Know your community"
+              [src]="staticAssets.features_know_your_community.url"
+              title="Know your community"
+            />
+          </div>
+        </commudle-public-page-layout>
+      </div>
+      <div class="build-community" id="build-community">
+        <h2 class="heading-build-community">
+          <a [routerLink]="'.'" fragment="build-community">Build Your Communities with 100,000+ techies on Commudle</a>
+        </h2>
+        <div image class="image">
+          <img
+            alt="Build your community"
+            [src]="staticAssets.features_build_your_community.url"
+            title="Build your community"
+          />
+        </div>
+      </div>
+      <div class="faq">
+        <commudle-faq [answers]="answers" [questions]="questions"></commudle-faq>
+      </div>
+    </div>
+  </div>
+</div>