button

src/Homepage/index.js

@@ -67,7 +67,8 @@ const Homepage = () => {
 					<p className="wow fadeInUp leading-10 text-port-gore-600 w-full xl:w-10/12 md:text-left lg:text-left text-center text-base lg:text-lg xl:text-lg md:text-xl mb-10">
 					We are making you worry less about errands. School can be really stressful, let's help relive some stress 
 					by taking care of your errands from food, returning items to friends and many more for just N200.</p>
-					<button className="wow fadeInUp">about us</button>
+					<button className="wow fadeInUp py-3 text-tickle-me-pink-600 capitalize text-xl px-10 border border-tickle-me-pink-600 bg-white rounded-md shadow-xl
+							hover:shadow-none hover:bg-tickle-me-pink-600 hover:text-white transition">about us</button>
 				</div>
 
 
@@ -113,9 +114,9 @@ const Homepage = () => {
 				md:pb-40 md:pt-14 px-10 lg:py-40 lg:pb-96 xl:px-40 mx-auto
 				bg-gradient-to-r from-yellow-200 to-tickle-me-pink-600">
 				<div className="-mt-20 -ml-20 md:-mt-60 md:ml-20 lg:-mt-72 lg:-ml-96">
-					<img className="sm:-mt-72 sm:-ml-20 md:-mt-0 md:-ml-40 lg:-mt-72 lg:-ml-20 xl:-mt-96 xl:-ml-52" src={ge6} alt="mockup" />
-					<img className="sm:-mt-72 sm:ml-24 md:-mt-36 md:-ml-20 lg:ml-24 lg:-mt-80 xl:-mt-96" src={ge4} alt="mockup" />
-					<img className="sm:-mt-72 sm:ml-96 md:-mt-52 md:ml-24 lg:-mt-96 lg:ml-96 xl:-mt-96 xl:ml-96" src={ge3} alt="mockup" />
+					<img className="-mt-72 -ml-20 sm:-mt-72 sm:-ml-20 md:-mt-0 md:-ml-40 lg:-mt-72 lg:-ml-20 xl:-mt-96 xl:-ml-52" src={ge6} alt="mockup" />
+					<img className="-mt-72 ml-24 sm:-mt-72 sm:ml-24 md:-mt-36 md:-ml-20 lg:ml-24 lg:-mt-80 xl:-mt-96" src={ge4} alt="mockup" />
+					<img className="-mt-72 ml-96 sm:-mt-72 sm:ml-96 md:-mt-52 md:ml-24 lg:-mt-96 lg:ml-96 xl:-mt-96 xl:ml-96" src={ge3} alt="mockup" />
 				</div>
 				<div className="-mt-72 pb-20 lg:pb-0 md:pb-0 xl:pb-0 md:mt-0 xl:mt-0 lg:mt-0 py-0 lg:py-auto pr-0 lg:pr-18 ">
 					<h2 className="
@@ -124,13 +125,13 @@ const Homepage = () => {
 					Get the Grep app for your mobile devices</h2>
 					<p className="text-white md:text-left text-center text-lg md:text-xl lg:text-xl xl:text-xl mb-10">Download the Grep app today and let us run those errands for you with in no time. It's free!</p>
 					<div className="">
-						<button className="mb-5 lg:mb-0 xl:mb-0 w-full py-1 px-5 md:w-3/6 lg:w-52 xl:w-56 text-left bg-tickle-me-pink-600 rounded-full mr-5 text-white text-base md:text-base xl:text-lg lg:text-lg">
+						<button className="shadow-xl hover:shadow-none transition mb-5 lg:mb-0 xl:mb-0 w-full py-1 px-5 md:w-3/6 lg:w-52 xl:w-56 text-left bg-tickle-me-pink-600 rounded-full mr-5 text-white text-base md:text-base xl:text-lg lg:text-lg">
 							<div className="flex justify-center items-center">
 								<img  className="w-10 pt-2 ml-2 mr-2 xl:mr-5 lg:mr-5 float-left " src={googleplay} />
 								<span className=""><span className="md:text-lg xl:text-xl lg:text-xl">Download</span> for Android</span>
 							</div>
 						</button>
-						<button className="w-full text-center py-1 px-5 md:w-2/5 lg:w-52 xl:w-56 text-left bg-white rounded-full text-tickle-me-pink-600 text-base md:text-base xl:text-lg lg:text-lg">
+						<button className="shadow-xl hover:shadow-none transition w-full text-center py-1 px-5 md:w-2/5 lg:w-52 xl:w-56 text-left bg-white rounded-full text-tickle-me-pink-600 text-base md:text-base xl:text-lg lg:text-lg">
 							<div className="flex justify-center items-center">
 								<img className=" w-10 ml-2 mr-5 pt-2 float-left" src={appstore} />
 								<span className=""><span className="text-xl">Download</span> for iOS</span>
@@ -204,7 +205,8 @@ const Homepage = () => {
 					<p className="wow fadeInRight text-port-gore-600 md:text-left text-center text-lg md:text-xl mb-10">Our errand persons are always happy to receive your orders. 
 					You can set reminders and we will be sure to remind you at all times. It's easy and straight forward.</p>
 					<div className="flex justify-center lg:justify-start xl:justify-start">
-						<button className="wow fadeInRight">get started</button>
+						<button className="wow fadeInRight w-52 capitalize w-full border border-tickle-me-pink-600 text-tickle-me-pink-600 text-xl py-3 px-10 bg-white rounded-md shadow-xl
+							hover:shadow-none hover:bg-tickle-me-pink-600 hover:text-white transition">get started</button>
 					</div>
 				</div>
 			</div>

src/components/Button/index.js

@@ -1,9 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types';
 
+const className = ['default', 'outline', 'text']
+const Variants = ['default', 'outline', 'text']
+const sizes = ['sm', 'md', 'lg']
+const colors = ['default-color', 'outline', 'text', 'primary', 'secondary', 'danger']
+const disable = ['disabled', 'enabled']
+const shadow = ['disableshadow', 'disableshadowNull']
+const StartIcon = ['null', 'start-shopping-cart']
+const EndIcon = ['null', 'end-shopping-cart']
 
-const Button = () => {
-	return <>
-		Button
-	</>
+
+const Buttons = ({className, variant, size, color, disabled, disabledShadow, startIcon, endIcon}) => {
+        const Variant = Variants.includes(variant) ? variant : Variants[0];
+        const Size = sizes.includes(size) ? size : sizes[1];    
+        const Color = colors.includes(color) ? color : colors[0];  
+        const Disabled = disable.includes(disabled) ? disabled : disable[1];  
+        const Shadow = shadow.includes(disabledShadow) ? disabledShadow : shadow[1];
+        const StartIcons = StartIcon.includes(startIcon) ? startIcon : StartIcon[0];
+        const EndIcons = EndIcon.includes(endIcon) ? endIcon : EndIcon[0];
+  return (
+    <button className={`btnn ${Variant} ${Size} ${Color} ${Disabled} ${Shadow} ${StartIcons} ${EndIcons}`}>Default</button>
+  )
 }
 
-export default Button
+export default Buttons

src/components/Navbar/index.js

@@ -54,8 +54,11 @@ const Navbar = () => {
 					        </svg>
 					    </button>
 				    </div>
-					<div className="hidden text-right lg:grid">
-						button
+					<div className="hidden flex justify-end text-right lg:grid">
+						<button className="capitalize w-full text-white text-xl py-5 px-10 bg-tickle-me-pink-600 rounded-md shadow-xl
+							hover:shadow-none transition">
+							get started
+						</button>
 					</div>
 				</div>
 				{show &&