first commit

src/components/Billing.jsx

@@ -1,6 +1,34 @@
+import { bill,apple,google } from "../assets"
+import styles,{layout} from "../style"
+
 const Billing = () => {
   return (
-    <div>Billing</div>
+    <section id="product" className={layout.sectionReverse}>
+      <div className={layout.sectionImgReverse} >
+      <img src={bill} alt="billing" className="w-[100%] h-[100%] relative z-[5]" />
+      {/* gradient start */}
+      <div className="absolute z-[3] -left-1/2 top-0 w-[50%] h-[50%] rounded-full white__gradient" />
+      <div className="absolute z-[0] w-[50%] h-[50%] -left-1/2 bottom-0 rounded-full pink__gradient" />
+      {/* gradient end */}
+      </div>
+      <div className={layout.sectionInfo}>
+      <h2 className={styles.heading2}>
+        Easily control your <br className="sm:block hidden" /> billing &
+        invoicing
+      </h2>
+      <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
+        Elit enim sed massa etiam. Mauris eu adipiscing ultrices ametodio
+        aenean neque. Fusce ipsum orci rhoncus aliporttitor integer platea
+        placerat.
+      </p>
+
+      <div className="flex flex-row flex-wrap sm:mt-10 mt-6">
+        <img src={apple} alt="google_play" className="w-[128.86px] h-[42.05px] object-contain mr-5 cursor-pointer" />
+        <img src={google} alt="google_play" className="w-[144.17px] h-[43.08px] object-contain cursor-pointer" />
+      </div>
+    </div>
+
+    </section>
   )
 }
 export default Billing

src/components/Business.jsx

@@ -1,6 +1,50 @@
+import { features } from "../constants"
+import styles, { layout } from "../style"
+import Button from "./Button"
+
+
+const Featurecard=({icon,title,content,index})=>{
+  return(
+    <div  className={`flex flex-row p-6 rounded-[20px] ${index !== features.length - 1 ? "mb-6" : "mb-0"} feature-card`}>
+      <div className={`w-[64px] h-[64px] rounded-full ${styles.flexCenter} bg-dimBlue`}>
+        <img src={icon} alt="star" className="w-[50%] h-[50%] object-contain" />
+      </div>
+      <div className="flex-1 flex flex-col ml-3">
+      <h4 className="font-poppins font-semibold text-white text-[18px] leading-[23.4px] mb-1">
+        {title}
+      </h4>
+      <p className="font-poppins font-normal text-dimWhite text-[16px] leading-[24px]">
+        {content}
+      </p>
+    </div>
+
+    </div>
+  )
+}
+
 const Business = () => {
   return (
-    <div>Business</div>
+    <section id="features" className={layout.section}>
+       <div className={layout.sectionInfo}>
+      <h2 className={styles.heading2}>
+        You do the business, <br className="sm:block hidden" /> we’ll handle
+        the money.
+      </h2>
+      <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
+        With the right credit card, you can improve your financial life by
+        building credit, earning rewards and saving money. But with hundreds
+        of credit cards on the market.
+      </p>
+      <Button styles={`mt-10`}/>
+      </div>
+      <div className={`${layout.sectionImg} flex-col`}>
+        {features.map((feature,index)=>(
+          <Featurecard key={feature.id} {...feature} index={index}/>
+        ))}
+
+      </div>
+
+    </section>
   )
 }
 export default Business

src/components/Button.jsx

@@ -1,6 +1,10 @@
-const Button = () => {
+const Button = ({styles}) => {
   return (
-    <div>Button</div>
+    <button type='button' className={`py-4 px-6 font-poppinsfont-medium text-[18px] text-primary bg-blue-gradient rounded-[10px] outline-none  ${styles}`}>
+      Get Started
+
+    </button>
+
   )
 }
 export default Button

src/components/CTA.jsx

@@ -1,6 +1,20 @@
-const CTA = () => {
-  return (
-    <div>CTA</div>
-  )
-}
-export default CTA
+import styles from "../style";
+import Button from "./Button";
+
+const CTA = () => (
+  <section className={`${styles.flexCenter} ${styles.marginY} ${styles.padding} sm:flex-row flex-col bg-black-gradient-2 rounded-[20px] box-shadow`}>
+    <div className="flex-1 flex flex-col">
+      <h2 className={styles.heading2}>Let’s try our service now!</h2>
+      <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
+        Everything you need to accept card payments and grow your business
+        anywhere on the planet.
+      </p>
+    </div>
+
+    <div className={`${styles.flexCenter} sm:ml-10 ml-0 sm:mt-0 mt-10`}>
+      <Button />
+    </div>
+  </section>
+);
+
+export default CTA;

src/components/Carddeal.jsx

@@ -1,6 +1,27 @@
+import { card } from "../assets"
+import styles , { layout } from "../style"
+import Button from './Button'
+
 const Carddeal = () => {
   return (
-    <div>Carddeal</div>
+    <section className={layout.section}>
+    <div className={layout.sectionInfo}>
+      <h2 className={styles.heading2}>
+        Find a better card deal <br className="sm:block hidden" /> in few easy
+        steps.
+      </h2>
+      <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
+        Arcu tortor, purus in mattis at sed integer faucibus. Aliquet quis
+        aliquet eget mauris tortor.ç Aliquet ultrices ac, ametau.
+      </p>
+
+      <Button styles={`mt-10`} />
+    </div>
+
+    <div className={layout.sectionImg}>
+      <img src={card} alt="billing" className="w-[100%] h-[100%]" />
+    </div>
+  </section>
   )
 }
 export default Carddeal

src/components/Clients.jsx

@@ -1,6 +1,16 @@
-const Clients = () => {
-  return (
-    <div>Clients</div>
-  )
-}
-export default Clients
+import { clients } from "../constants";
+import styles from "../style";
+
+const Clients = () => (
+  <section className={`${styles.flexCenter} my-4`}>
+    <div className={`${styles.flexCenter} flex-wrap w-full`}>
+      {clients.map((client) => (
+        <div key={client.id} className={`flex-1 ${styles.flexCenter} sm:min-w-[192px] min-w-[120px] m-5`}>
+          <img src={client.logo} alt="client_logo" className="sm:w-[192px] w-[100px] object-contain" />
+        </div>
+      ))}
+    </div>
+  </section>
+);
+
+export default Clients;

src/components/Feedback.jsx

@@ -1,6 +1,24 @@
-const Feedback = () => {
+import { quotes } from "../assets"
+const Feedback = ({ content, name, title, img }) => {
   return (
-    <div>Feedback</div>
+    <div className="flex justify-between flex-col px-10 py-12 rounded-[20px]  max-w-[370px] md:mr-10 sm:mr-5 mr-0 my-5 feedback-card">
+    <img src={quotes} alt="double_quotes" className="w-[42.6px] h-[27.6px] object-contain" />
+    <p className="font-poppins font-normal text-[18px] leading-[32.4px] text-white my-10">
+      {content}
+    </p>
+
+    <div className="flex flex-row">
+      <img src={img} alt={name} className="w-[48px] h-[48px] rounded-full" />
+      <div className="flex flex-col ml-4">
+        <h4 className="font-poppins font-semibold text-[20px] leading-[32px] text-white">
+          {name}
+        </h4>
+        <p className="font-poppins font-normal text-[16px] leading-[24px] text-dimWhite">
+          {title}
+        </p>
+      </div>
+    </div>
+  </div>
   )
 }
 export default Feedback

src/components/Footer.jsx

@@ -1,6 +1,64 @@
-const Footer = () => {
-  return (
-    <div>Footer</div>
-  )
-}
-export default Footer
+import styles from "../style";
+import { logo } from "../assets";
+import { footerLinks, socialMedia } from "../constants";
+
+const Footer = () => (
+  <section className={`${styles.flexCenter} ${styles.paddingY} flex-col`}>
+    <div className={`${styles.flexStart} md:flex-row flex-col mb-8 w-full`}>
+      <div className="flex-[1] flex flex-col justify-start mr-10">
+        <img
+          src={logo}
+          alt="hoobank"
+          className="w-[266px] h-[72.14px] object-contain"
+        />
+        <p className={`${styles.paragraph} mt-4 max-w-[312px]`}>
+          A new way to make the payments easy, reliable and secure.
+        </p>
+      </div>
+
+      <div className="flex-[1.5] w-full flex flex-row justify-between flex-wrap md:mt-0 mt-10">
+        {footerLinks.map((footerlink) => (
+          <div key={footerlink.title} className={`flex flex-col ss:my-0 my-4 min-w-[150px]`}>
+            <h4 className="font-poppins font-medium text-[18px] leading-[27px] text-white">
+              {footerlink.title}
+            </h4>
+            <ul className="list-none mt-4">
+              {footerlink.links.map((link, index) => (
+                <li
+                  key={link.name}
+                  className={`font-poppins font-normal text-[16px] leading-[24px] text-dimWhite hover:text-secondary cursor-pointer ${
+                    index !== footerlink.links.length - 1 ? "mb-4" : "mb-0"
+                  }`}
+                >
+                  {link.name}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <div className="w-full flex justify-between items-center md:flex-row flex-col pt-6 border-t-[1px] border-t-[#3F3E45]">
+      <p className="font-poppins font-normal text-center text-[18px] leading-[27px] text-white">
+        Copyright Ⓒ 2022 HooBank. All Rights Reserved.
+      </p>
+
+      <div className="flex flex-row md:mt-0 mt-6">
+        {socialMedia.map((social, index) => (
+          <img
+            key={social.id}
+            src={social.icon}
+            alt={social.id}
+            className={`w-[21px] h-[21px] object-contain cursor-pointer ${
+              index !== socialMedia.length - 1 ? "mr-6" : "mr-0"
+            }`}
+            onClick={() => window.open(social.link)}
+          />
+        ))}
+      </div>
+    </div>
+  </section>
+);
+
+export default Footer;

src/components/Getstarted.jsx

@@ -1,6 +1,26 @@
+import { arrowUp } from "../assets"
+import styles from "../style"
+
+
+
 const Getstarted = () => {
   return (
-    <div>Getstarted</div>
+    <div className={`${styles.flexCenter} w-[140px] h-[140px] rounded-full bg-blue-gradient p-[2px] cursor-pointer`}>
+      <div className={`${styles.flexCenter} flex-col bg-primary w-[100%] h-[100%] rounded-full`}>
+        <div className={`${styles.flexStart} flex-row`}>
+          <p className="font-poppins font-medium text-[18px] leading-[23.4px] ">
+            <span className="text-gradient">Get</span>
+          </p>
+          <img src={arrowUp} alt="arrowup"  className="w-[23px] h-[23px] object-contain"/>
+        </div>
+        <p className="font-poppins font-medium text-[18px] leading-[23.4px]">
+          <span className="text-gradient">Started</span>
+        </p>
+
+      </div>
+
+    </div>
+
   )
 }
 export default Getstarted

src/components/Hero.jsx

@@ -1,6 +1,51 @@
+import { discount, robot } from "../assets"
+import styles from "../style"
+import Getstarted from './Getstarted'
 const Hero = () => {
   return (
-    <div>Hero</div>
+    <section  id="home"  className={`flex md:flex-row flex-col ${styles.paddingY}`}>
+      <div className={`flex-1 ${styles.flexStart} flex-col xl:px-0 sm:px-16 px-6`}>
+        <div className="flex flex-row items-center py-[6px] px-4 bg-discount-gradient rounded-[10px] mb-2">
+          <img src={discount} alt="discount"
+          className="w-[32px] h-[32px]" />
+          <p className={`${styles.paragraph} ml-2`}>
+            <span className="text-white">20% </span>Discount For {" "}
+            <span className="text-white">1 Month </span>Account
+          </p>
+        </div>
+        <div className="flex flex-row justify-between items-center w-full">
+          <h1 className="flex-1 font-poppins font-semibold ss:text-[72px] text-[52px] text-white ss:leading-[100.8px] leading-[75px]">
+            The Next <br className="sm:block hidden"/>{" "}
+            <span className="text-gradient">Generation</span>{" "}
+          </h1>
+          <div className="ss:flex hidden md:mr-4 mr-0">
+            <Getstarted/>
+          </div>
+        </div>
+        <h1 className="font-poppins font-semibold ss:text-[68px] text-[52px] text-white ss:leading-[100.8px] leading-[75px] w-full">
+           Payment Method
+        </h1>
+        <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
+          Our team of experts uses a methodology to identify the credit cards
+          most likely to fit your needs. We examine annual percentage rates,
+          annual fees.
+        </p>
+        </div>
+        <div className={`flex-1 flex ${styles.flexCenter} md:my-0 my-10 relative`}>
+          <img src={robot} alt="billing" className="w-[100%] h-[100%] relative z-[5]" />
+          {/* gradient start */}
+        <div className="absolute z-[0] w-[40%] h-[35%] top-0 pink__gradient" />
+        <div className="absolute z-[1] w-[80%] h-[80%] rounded-full white__gradient bottom-40" />
+        <div className="absolute z-[0] w-[50%] h-[50%] right-20 bottom-20 blue__gradient" />
+        {/* gradient end */}
+
+      </div>
+
+      <div className={`ss:hidden ${styles.flexCenter}`}>
+        <Getstarted />
+      </div>
+
+    </section>
   )
 }
 export default Hero

src/components/Navbar.jsx

@@ -10,7 +10,7 @@ const Navbar = () => {
       <ul className='list-none sm:flex hidden justify-end items-center flex-1'>
         {navLinks.map((item,index)=>(
           <li key={index}
-            className={`font-poppins font-normal cursor-pointer text-[16px] text-white
+            className={`font-poppins font-normal cursor-pointer text-[16px]
             ${active === item.title ?'text-white':'text-dimWhite'}
            ${index===navLinks.length-1 ?'mr-0':'mr-10'}`}
             onClick={()=>setactive(item.title)}