feat: made component for brands and added max w in config (#35)

* feat: made component for brands and added max w in config

* feat: removed max w config

* feat: updated docs

Co-authored-by: anshul-pinto0410 <[email protected]>
Co-authored-by: Pritam Sinha <[email protected]>

docs/docs/branding.md

@@ -0,0 +1,25 @@
+---
+id: branding
+title: Branding
+sidebar_label: Branding
+---
+
+```html live
+<>
+	<div class="lil-branding">
+		<div class="lil-branding-triplet">
+			<img class="lil-object-none" src="https://assets1.cleartax-cdn.com/cleartax/images/1602844309_company_apollo.png" />
+			<img class="lil-object-none" src="https://assets1.cleartax-cdn.com/cleartax/images/1602844411_company_bosch.png" />
+			<img class="lil-object-none" src="https://assets1.cleartax-cdn.com/cleartax/images/1602844428_company_swiggy.png" />
+		</div>
+		<div class="lil-branding-triplet">
+			<img class="lil-object-none" src="https://assets1.cleartax-cdn.com/cleartax/images/1602844272_company_puma.png" />
+			<img class="lil-object-none" src="https://assets1.cleartax-cdn.com/cleartax/images/1602844717_company_ikea.png" />
+			<img class="lil-object-none" src="https://assets1.cleartax-cdn.com/cleartax/images/1602844680_company_standard_chartered.png" />
+		</div>
+		<div class="lil-brand-text">
+			trusted by your favorite brands
+		</div>
+	</div>
+</>
+```

docs/sidebars.js

@@ -15,6 +15,7 @@ module.exports = {
         items: ["border-radius", "border-width"],
       },
       "box-shadow",
+      "branding",
       "button",
       {
         type: "category",

src/components/Branding/branding.css

@@ -0,0 +1,34 @@
+.lil-brand-text {
+    bottom: -1rem;
+    right: 1rem;
+    @apply lil-absolute lil-bg-white lil-text-s-18 lil-font-medium lil-px-4 lil-text-font-300;
+}
+
+.lil-branding {
+  @apply lil-flex lil-flex-wrap lil-w-full lil-mt-24 lil-py-16 lil-px-8 lil-relative lil-mb-40 lil-border-grey-300 lil-border-md lil-justify-center lil-rounded-lg;
+}
+
+.lil-branding .lil-branding-triplet{
+    @apply lil-flex lil-py-4 lil-justify-around lil-w-1/2;
+}
+
+
+@screen md{
+    .lil-branding .lil-branding-triplet{
+        @apply lil-w-full;
+    }
+}
+
+@screen sm {
+    .lil-brand-text{
+        @apply lil-relative;
+    }
+
+  .lil-branding {
+    @apply lil-border-none lil-px-2 lil-mb-24 lil-pb-0;
+  }
+
+  .lil-branding .lil-branding-triplet{
+    @apply lil-justify-between lil-w-full;
+  }
+}

src/index.css

@@ -1,4 +1,5 @@
 @import "./components/Accordian/accordian.css";
+@import "./components/Branding/branding.css";
 @import "./components/Button/button.css";
 @import "./components/Card/card.css";
 @import "./components/Promise/promise.css";