Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added faq and press cards #5

Merged
merged 7 commits into from
Sep 30, 2020
Merged

feat: added faq and press cards #5

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
82a6694
feat: added faq and press cards
Sep 29, 2020
d18c76d
Merge branch 'development' of https://github.com/ClearTax/littlegiant…
Sep 29, 2020
14d8651
feat: solved comments
Sep 29, 2020
790717f
feat: added reinforcement card
Sep 30, 2020
5d9c1d4
feat: fixed comments
Sep 30, 2020
a0268ea
feat: fixed more comments
Sep 30, 2020
59d796c
Merge branch 'development' into Feat/components-added-cards
anshul-pinto0410 Sep 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions docs/docs/faq-card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>

</>

```
1 change: 1 addition & 0 deletions docs/docs/font-weight.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
```
49 changes: 49 additions & 0 deletions docs/docs/presscard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
</>

```
23 changes: 23 additions & 0 deletions docs/docs/reinforcement.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
</>
```
7 changes: 6 additions & 1 deletion docs/sidebars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,11 @@ module.exports = {
},
"box-shadow",
"button",
"cards",
{
type: "category",
label: "Cards",
items: ["cards", "faq-card", "presscard"],
},
"colors",
"cursor",
"grid",
Expand All @@ -25,6 +29,7 @@ module.exports = {
label: "Promise",
items: ["promise-h", "promise-v"],
},
"reinforcement",
{
type: "category",
label: "Typography",
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:watch": "npx postcss src/littlegiant.css -o css/littlegiant.css --watch",
anshul-pinto0410 marked this conversation as resolved.
Show resolved Hide resolved
"build:uglify": "uglifycss css/littlegiant.css > css/littlegiant.min.css",
"clean-deps": "clean-deps",
"docs": "cd docs && npm start",
Expand Down
22 changes: 22 additions & 0 deletions src/components/Card/FAQcard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
.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;
anshul-pinto0410 marked this conversation as resolved.
Show resolved Hide resolved
}

.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-60 lil-text-white lil-mt-6 lil-whitespace-normal;
}
18 changes: 18 additions & 0 deletions src/components/Card/presscard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
.lil-presscard {
height: 280px;
width: 280px;
anshul-pinto0410 marked this conversation as resolved.
Show resolved Hide resolved
@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;
}
33 changes: 33 additions & 0 deletions src/components/Reinforcement/reinforcement.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.lil-reinforcement {
height: 408px;
anshul-pinto0410 marked this conversation as resolved.
Show resolved Hide resolved
background-color: #ffd240;
background-image: radial-gradient(at top right, #1778f9 30%, #ffd240 10%);
anshul-pinto0410 marked this conversation as resolved.
Show resolved Hide resolved
@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;
}
}
4 changes: 4 additions & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"

13 changes: 12 additions & 1 deletion tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ module.exports = {
fontWeight: {
light: 300,
normal: 400,
semibold: 600,
anshul-pinto0410 marked this conversation as resolved.
Show resolved Hide resolved
bold: 700,
},
letterSpacing: false,
Expand All @@ -87,7 +88,17 @@ module.exports = {
tight: 1.2,
loose: 1.5,
},
opacity: false,
opacity: {
'0': '0',
'20':'0.2',
'40':'0.4',
'25': '0.25',
'50': '0.5',
'60': '0.6',
'75': '0.75',
'80': '0.8',
'100': '1',
anshul-pinto0410 marked this conversation as resolved.
Show resolved Hide resolved
},
screens: {
sm: {
max: "767px",
Expand Down