feat: added faq and press cards (#5)

* feat: added faq and press cards * feat: solved comments * feat: added reinforcement card * feat: fixed comments * feat: fixed more comments Co-authored-by: anshul-pinto0410 <[email protected]>
ClearTax · Sep 30, 2020 · e381b6c · e381b6c
1 parent 5587364
commit e381b6c
Show file tree

Hide file tree

Showing 11 changed files with 207 additions and 2 deletions.
diff --git a/docs/docs/faq-card.md b/docs/docs/faq-card.md
@@ -0,0 +1,43 @@
+---
+id: faq-card
+title: FAQ Card
+sidebar_label: FAQ Card
+---
+
+##### FAQ Card
+
+```html live
+<>
+    <div class="lil-flex lil-flex-wrap">
+        <div class="lil-faqcard">
+            <div class="lil-faqcard-faq-wrapper">
+                <div class="lil-faqcard-faq">
+                    <p> Write question here for upto two lines? </p>
+                </div>
+            </div>
+            <div class="lil-faqcard-content">
+                    <p>The Goods and Services Tax is a unified,
+                        multi-stage, and consumption-based tax
+                        levied on the supply of goods or services,
+                        combining all stages such as manufacture </p>
+            </div>
+        </div>
+
+        <div class="lil-faqcard">
+            <div class="lil-faqcard-faq-wrapper">
+                <div class="lil-faqcard-faq">
+                        <p> Write question here for upto two lines? </p>
+                </div>
+            </div>
+            <div class="lil-faqcard-content">
+                <p>The Goods and Services Tax is a unified,
+                     multi-stage, and consumption-based tax
+                      levied on the supply of goods or services,
+                       combining all stages such as manufacture </p>
+            </div>
+        </div>
+    </div>
+
+</>
+
+```
diff --git a/docs/docs/font-weight.md b/docs/docs/font-weight.md
@@ -10,6 +10,7 @@ Control the font weight of an element using the `lil-font-{weight}` utilities.
 <>
   <p class='lil-font-light'>Light</p>
   <p class='lil-font-normal'>Normal</p>
+  <p class='lil-font-semibold'>Semibold</p>
   <p class='lil-font-bold'>Bold</p>
 </>
 ```
diff --git a/docs/docs/presscard.md b/docs/docs/presscard.md
@@ -0,0 +1,49 @@
+---
+id: presscard
+title: Press Card
+sidebar_label: Press Card
+---
+
+##### Press Card
+
+```html live
+<>
+<div class="lil-flex lil-flex-wrap lil-bg-grey-150 lil-items-center">
+    <div class="lil-presscard">
+        <div class="lil-presscard-heading">
+            2019
+        </div>
+        <div class = "lil-presscard-content">
+            BW Disrupt <br/> TechTors
+        </div>
+        <div class = "lil-presscard-image">
+            this is the image
+        </div>
+    </div>
+
+    <div class="lil-presscard">
+        <div class="lil-presscard-heading">
+            2019
+        </div>
+        <div class = "lil-presscard-content">
+            Tech leader of <br/>the year    </div>
+        <div class = "lil-presscard-image">
+            this is the image
+        </div>
+    </div>
+
+    <div class="lil-presscard">
+        <div class="lil-presscard-heading">
+            2019
+        </div>
+        <div class = "lil-presscard-content">
+            BW Disrupt <br/>TechTors
+        </div>
+        <div class = "lil-presscard-image">
+            this is the image
+        </div>
+    </div>
+</div>
+</>
+
+```
diff --git a/docs/docs/reinforcement.md b/docs/docs/reinforcement.md
@@ -0,0 +1,23 @@
+---
+id: reinforcement
+title: Reinforcement
+sidebar_label: Reinforcement
+---
+
+##### Reinforcement
+
+```html live
+<>
+<div class="lil-reinforcement">
+    <div class="lil-reinforcement-content-wrapper">
+        <div class="lil-reinforcement-title">
+            Ready to get started?
+        </div>
+        <div class="lil-reinforcement-button-wrapper">
+            <button class="lil-btn lil-btn-blue lil-mr-4 sm:lil-mb-4">Try for free</button>
+            <button class="lil-btn lil-btn-white sm:lil-mb-4">Schedule a demo</button>
+        </div>
+    </div>
+</div>
+</>
+```
diff --git a/docs/sidebars.js b/docs/sidebars.js
@@ -16,7 +16,11 @@ module.exports = {
       },
       "box-shadow",
       "button",
-      "cards",
+      {
+        type: "category",
+        label: "Cards",
+        items: ["cards", "faq-card", "presscard"],
+      },
       "colors",
       "cursor",
       "grid",
@@ -25,6 +29,7 @@ module.exports = {
         label: "Promise",
         items: ["promise-h", "promise-v"],
       },
+      "reinforcement",
       {
         type: "category",
         label: "Typography",

diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
   "scripts": {
     "build": "npm-run-all -s build:tailwind build:uglify",
     "build:tailwind": "npx postcss src/littlegiant.css -o css/littlegiant.css",
+    "build:tailwind-watch": "npx postcss src/littlegiant.css -o css/littlegiant.css --watch",
     "build:uglify": "uglifycss css/littlegiant.css > css/littlegiant.min.css",
     "clean-deps": "clean-deps",
     "docs": "cd docs && npm start",

diff --git a/src/components/Card/FAQcard.css b/src/components/Card/FAQcard.css
@@ -0,0 +1,21 @@
+.lil-faqcard {
+  /*
+  background-color needs to be updated
+  */
+  height: 280px;
+  width: 250px;
+  background-color: #1c314f;
+  @apply lil-rounded-xl lil-p-5  lil-cursor-pointer lil-text-center lil-m-2 lil-flex-col lil-justify-between;
+}
+
+.lil-faqcard > .lil-faqcard-faq-wrapper {
+  @apply lil-mr-5 lil-w-full;
+}
+
+.lil-faqcard-faq-wrapper .lil-faqcard-faq {
+  @apply lil-text-s-20  lil-text-left lil-text-white lil-font-semibold lil-mr-5 lil-whitespace-normal;
+}
+
+.lil-faqcard > .lil-faqcard-content {
+  @apply lil-text-left lil-text-base lil-opacity-50 lil-text-white lil-mt-6 lil-whitespace-normal;
+}
diff --git a/src/components/Card/presscard.css b/src/components/Card/presscard.css
@@ -0,0 +1,18 @@
+.lil-presscard {
+  height: 280px;
+  width: 280px;
+  @apply lil-rounded-xl lil-bg-white lil-align-middle lil-m-4;
+}
+
+/*
+Colors have to be modified for .lil-presscard-heading & .lil-presscard-content
+*/
+.lil-presscard > .lil-presscard-heading {
+  @apply lil-text-base lil-text-black lil-text-center lil-mx-2 lil-my-3 lil-h-12;
+}
+.lil-presscard > .lil-presscard-content {
+  @apply lil-text-s-24 lil-text-blue-300 lil-text-center lil-font-bold lil-h-24 lil-whitespace-normal;
+}
+.lil-presscard > .lil-presscard-image {
+  @apply lil-flex lil-justify-center lil-items-center lil-mx-2 lil-h-24;
+}
diff --git a/src/components/Reinforcement/reinforcement.css b/src/components/Reinforcement/reinforcement.css
@@ -0,0 +1,33 @@
+.lil-reinforcement {
+  height: 408px;
+  background-color: #ffd240;
+  background-image: radial-gradient(at top right, #1778f9 30%, #ffd240 10%);
+  @apply lil-w-full lil-flex lil-items-center lil-rounded-xl;
+}
+
+.lil-reinforcement > .lil-reinforcement-content-wrapper {
+  @apply lil-px-12 lil-my-3 lil-justify-between;
+}
+
+.lil-reinforcement-content-wrapper > .lil-reinforcement-title {
+  color: #4e3b00;
+  @apply lil-text-s-48 lil-text-left lil-font-bold;
+}
+
+.lil-reinforcement-content-wrapper > .lil-reinforcement-button-wrapper {
+  @apply lil-flex lil-mt-5;
+}
+
+@screen sm {
+  .lil-reinforcement {
+    background-image: none;
+    @apply lil-w-full lil-h-48 lil-flex lil-items-center lil-rounded-lg;
+  }
+  .lil-reinforcement-content-wrapper > .lil-reinforcement-title {
+    @apply lil-flex-wrap lil-text-s-28 lil-text-left lil-font-bold lil-whitespace-normal;
+  }
+
+  .lil-reinforcement-content-wrapper > .lil-reinforcement-button-wrapper {
+    @apply lil-flex lil-flex-wrap lil-mt-2 lil-justify-between;
+  }
+}
diff --git a/src/index.css b/src/index.css
@@ -2,3 +2,7 @@
 @import "./components/Card/card.css";
 @import "./components/Promise/promise.css";
 @import "./components/Text/text.css";
+@import "./components/Card/FAQcard.css";
+@import "./components/Card/presscard.css";
+@import "./components/Reinforcement/reinforcement.css"
+
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -79,6 +79,7 @@ module.exports = {
     fontWeight: {
       light: 300,
       normal: 400,
+      semibold: 600,
       bold: 700,
     },
     letterSpacing: false,
@@ -87,7 +88,13 @@ module.exports = {
       tight: 1.2,
       loose: 1.5,
     },
-    opacity: false,
+    opacity: {
+      '0': '0',
+      '25': '0.25',
+      '50': '0.5',
+      '75': '0.75',
+      '100': '1',
+    },
     screens: {
       sm: {
         max: "767px",