added expandable pricing page

open-template-hub · Sep 12, 2021 · 2081de1 · 2081de1
1 parent 436293f
commit 2081de1
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 7 deletions.
diff --git a/src/app/component/common/card/card1/card1.component.html b/src/app/component/common/card/card1/card1.component.html
@@ -1,5 +1,5 @@
 <div [class.background-color]="isBackgroundColor" [class.card1-scrollable-content]="isScrollable"
-     [class.card1-small]="isSmall"
+     [class.card1-small]="isSmall" [class.center-margin]="centerToParent"
      [class.no-margin]="!margin" [class.no-shadow]="!shadow" [style.height]="height ? height : ''"
      [style.width]="width ? width : ''" class="card1" [class.testimonial-size]="testimonialSizeActive">
   <div *ngIf="topWrapper" [class.card1-top-wrapper-in-theme-color]="topWrapperInThemeColor"

diff --git a/src/app/component/common/card/card1/card1.component.scss b/src/app/component/common/card/card1/card1.component.scss
@@ -195,4 +195,9 @@
   .card1.card1-scrollable-content .card1-content {
     overflow: auto;
   }
+
+  .card1.center-margin {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
diff --git a/src/app/component/common/card/card1/card1.component.ts b/src/app/component/common/card/card1/card1.component.ts
@@ -39,6 +39,7 @@ export class Card1Component {
   @Input() bottomLayerBackgroundColor = '';
   @Input() testimonialSizeActive = false;
   @Input() headerType = 'top-right-bottom-left-rounded-box';
+  @Input() centerToParent = false;
 
   loading = false;
 

diff --git a/src/app/component/common/card/pricing-card/pricing-card.component.html b/src/app/component/common/card/pricing-card/pricing-card.component.html
@@ -1,6 +1,6 @@
 <div>
   <app-card1 [enableHeaderFullImg]="false" [height]="option.styles.height"
-             [paddingContent]="false"
+             [paddingContent]="false" [centerToParent]="true"
              [ribbon]="option.ribbon ? option.ribbon : DEFAULT_RIBBON"
              [width]="option.styles.width" [maxHeight]="false"
              [enableHeader]="false" [style.font-size]="option.styles.fontSize">

diff --git a/src/app/data/product/product.data.ts b/src/app/data/product/product.data.ts
@@ -44,6 +44,52 @@ export const PRODUCT_LINES: ProductLine[] = [
           }
         ],
         pricingOptions: [
+          {
+            title: 'STARTER',
+            price: {
+              currency: '$',
+              value: '9',
+              subscriptionTime: 'mo.'
+            },
+            features: [ 'Up to 5 users', 'Maximum 100 photos/mo.', '50 queries' ],
+            styles: {
+              width: '300px',
+              height: '400px',
+              fontSize: '1em',
+              featureHeight: '10em'
+            }
+          },
+          {
+            title: 'BASIC',
+            ribbon: { theme: 'blue', text: 'DEAL' },
+            price: {
+              currency: '$',
+              value: '49',
+              subscriptionTime: 'mo.'
+            },
+            features: [ 'Up to 10 users', 'Maximum 100 photos/mo.', '500 queries' ],
+            styles: {
+              width: '370px',
+              height: '520px',
+              fontSize: '1.2em',
+              featureHeight: '13em'
+            }
+          },
+          {
+            title: 'PRO',
+            price: {
+              currency: '$',
+              value: '99',
+              subscriptionTime: 'mo.'
+            },
+            features: [ 'Unlimited users', 'Unlimited photos/mo.', '5000 queries' ],
+            styles: {
+              width: '300px',
+              height: '400px',
+              fontSize: '1em',
+              featureHeight: '10em'
+            }
+          },
           {
             title: 'STARTER',
             price: {

diff --git a/src/app/page/landing-layout/pricing/pricing.component.scss b/src/app/page/landing-layout/pricing/pricing.component.scss
@@ -16,6 +16,10 @@
   flex-wrap: wrap;
 }
 
+app-pricing-card {
+  width: 33%;
+}
+
 @media only screen and (min-width: 1000px) {
   .pricing-page {
     display: block;

diff --git a/src/environments/version.ts b/src/environments/version.ts
@@ -1 +1 @@
-export const version = '2.6.1';
+export const version = '2.6.2';
diff --git a/src/index.html b/src/index.html
@@ -13,10 +13,10 @@
   <link href="https://fonts.googleapis.com/css2?family=Ramabhadra&amp;display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
-  <link href="assets/favicons/apple-touch-icon.png?v=2_6_1" rel="apple-touch-icon">
-  <link href="assets/favicons/favicon.png?v=2_6_1" rel="shortcut icon" type="image/png">
-  <link href="assets/favicons/site.webmanifest?v=2_6_1" rel="manifest">
-  <link href="assets/favicons/safari-pinned-tab.svg?v=2_6_1" rel="mask-icon" color="#43b043">
+  <link href="assets/favicons/apple-touch-icon.png?v=2_6_2" rel="apple-touch-icon">
+  <link href="assets/favicons/favicon.png?v=2_6_2" rel="shortcut icon" type="image/png">
+  <link href="assets/favicons/site.webmanifest?v=2_6_2" rel="manifest">
+  <link href="assets/favicons/safari-pinned-tab.svg?v=2_6_2" rel="mask-icon" color="#43b043">
 
   <meta content="assets/favicons/browserconfig.xml" name="msapplication-config">
   <meta content="#43b043" name="msapplication-TileColor">