GDGC-MET · rohakbora · Oct 14, 2024
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/house.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@mdi/font": "^7.4.47",
+    "bootstrap": "^5.3.3",
     "framer-motion": "^10.18.0",
     "react": "^18.2.0",
     "react-accessible-accordion": "^5.0.0",

diff --git a/public/house.png b/public/house.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -5,16 +5,19 @@ import Residencies from './Components/Residencies/Residencies.jsx';
 import Value from './Components/Value/Value.jsx'
 import Contact from './Components/Contact/Contact.jsx'
 import Get_Started from './Components/Get_Started/Get_Started.jsx'
+import PricingSection from './Components/Pricing/PricingSection.jsx'
 function App() {
   return (
     <div class="app">
        <Header/>
       <Hero/>
       <Companies/>
       <Residencies/>
-      <Value/>
+      <Value/> 
+      <PricingSection />
       <Contact/>
       <Get_Started/> 
+
 
     </div>
   );

diff --git a/src/Components/Contact/Contact.css b/src/Components/Contact/Contact.css
@@ -1,13 +1,13 @@
 .c-container{
-    justify-content: space-between;
+    justify-content: space-between ;
 }
 
 .c-container>div{
-    flex:1;
+    flex:1 ;
 }
 
 .c-right{
-    width:100%;
+    width:100% ;
 }
 
 .c-left{
@@ -23,37 +23,37 @@
     gap:1.5rem;
 }
 
-.mode{
-    width:16rem;
-    padding:1rem;
-    border: 3px solid rgba(128,128,128,0.143);
-    border-radius:5px;
-    gap:1rem;
-    transition:all 300ms ease-in;
+.mode {
+    width:16rem !important;
+    padding:1rem !important;
+    border: 3px solid rgba(128,128,128,0.143) !important;
+    border-radius:5px !important;
+    gap:1rem !important;
+    transition:all 300ms ease-in !important;
 }
 
 .mode .button{
-    width:100%;
-    background: var(--lightBlue);
-    color: var(--blue);
-    font-size:0.9rem;
-    align-items:center; 
+    width:100% !important;
+    background: var(--lightBlue) !important;
+    color: var(--blue) !important;
+    font-size:0.9rem !important;
+    align-items:center !important; 
 }
 
 .mode>:nth-child(1){
-    width:100%;
-    gap:1.6rem;
+    width:100% !important;
+    gap:1.6rem !important;
 }
 
 .mode:hover{
-    scale:1.1;
-    box-shadow:var(--shadow);
+    scale:1.1 !important;
+    box-shadow:var(--shadow) !important;
 }
 
 .mode .button:hover{
-    background: var(--blue-gradient);
-    color:white;
-    scale:0.8;
+    background: var(--blue-gradient) !important;
+    color:white !important;
+    scale:0.8 !important;
 }
 
 @media(max-width:768px){

diff --git a/src/Components/Contact/Contact.jsx b/src/Components/Contact/Contact.jsx
@@ -5,7 +5,7 @@ import {BsFillChatDotsFill} from 'react-icons/bs'
 import {HiChatBubbleBottomCenter} from 'react-icons/hi2'
 const Contact =() =>{
     return(
-        <section className="c-wrapper">
+        <section id='Contact' className="c-wrapper">
             <div className="paddings innerWidth flexCenter c-container">
                 {/* left side */}
                 <div className="c-left flexColStart">

diff --git a/src/Components/Get_Started/Get_Started.jsx b/src/Components/Get_Started/Get_Started.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import './Get_Started.css'
 const Get_Started = ()=>{
     return(
-        <section className="g-wrapper">
+        <section id='getstarted' className="g-wrapper">
             <div className="paddings innerWidth g-container">
                 <div className="flexColCenter inner-container">
                     <span className='primaryText'>Get Started With Finderr</span>

diff --git a/src/Components/Header_Section/Header.jsx b/src/Components/Header_Section/Header.jsx
@@ -17,10 +17,11 @@ const Header = () => {
                 <img alt="an image appears here" src="./Finderr Logo Black.png" width={100}></img>
                 <OutsideClickHandler onOutsideClick={()=> setMenuOpened(false)}>
                 <div className="flexCenter h-menu" style={getMenuStyles(menuOpened)}>
-                    <a href="">Residencies</a>
-                    <a href="">Contact Us</a>
-                    <a href="">Get Started</a>
-                    <button className="button">Pricing</button>
+                    <a href="#Residencies">Residencies</a>
+                    <a href="#Contact">Contact Us</a>
+                    <a href="#getstarted">Get Started</a>
+                    {/* <button className="button" onclick={"/pricing"}>Pricing</button> */}
+                    <a href="#pricing">Pricing</a>
                 </div>
                 </OutsideClickHandler>  
                 <div className="menu-icon" 

diff --git a/src/Components/Pricing/PricingSection.css b/src/Components/Pricing/PricingSection.css
@@ -0,0 +1,55 @@
+
+
+
+.pricing-box {
+  -webkit-box-shadow: 0px 5px 30px -10px rgba(0, 0, 0, 0.1);
+          box-shadow: 0px 5px 30px -10px rgba(0, 0, 0, 0.1);
+  padding: 35px 50px;
+  border-radius: 20px;
+  position: relative;
+}
+
+.pricing-box .plan {
+  font-size: 34px;
+}
+
+.pricing-badge {
+  position: absolute;
+  top: 0;
+  z-index: 999;
+  right: 0;
+  width: 100%;
+  display: block;
+  font-size: 15px;
+  padding: 0;
+  overflow: hidden;
+  height: 100px;
+}
+
+.pricing-badge .badge {
+  float: right;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  right: -67px;
+  top: 17px;
+  position: relative;
+  text-align: center;
+  width: 200px;
+  font-size: 13px;
+  margin: 0;
+  padding: 7px 10px;
+  font-weight: 500;
+  color: #ffffff;
+  background: #fb7179;
+}
+.mb-2, .my-2 {
+    margin-bottom: .5rem!important;
+}
+p {
+    line-height: 1.7;
+}
+
+a{
+  text-decoration: none;
+  color: white;
+}
diff --git a/src/Components/Pricing/PricingSection.jsx b/src/Components/Pricing/PricingSection.jsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '@mdi/font/css/materialdesignicons.min.css';
+import './PricingSection.css';
+
+const PricingSection = () => {
+    return (
+        <section className="section" id="pricing">
+            <div className="container">
+                <div className="row">
+                    <div className="col-lg-12">
+                        <div className="title-box text-center">
+                            <h3 className="title-heading mt-4">Best Pricing Package</h3>
+                            <p className="text-muted f-17 mt-3">
+                                Get premium benefits with these plans
+                            </p>
+                            <img src="images/home-border.png" height="15" className="mt-3" alt="" />
+                        </div>
+                    </div>
+                </div>
+
+                <div className="row mt-5 pt-4">
+                    <PricingCard 
+                        iconClass="mdi mdi-account h1"
+                        title="Starter"
+                        features={[
+                            { text: 'Feature 1', isAvailable: true },
+                            { text: 'Feature 2', isAvailable: true },
+                            { text: 'Feature 3', isAvailable: false },
+                            { text: 'Feature 4', isAvailable: false },
+                        ]}
+                        description="Semper urna veal tempus pharetra elit habisse platea dictumst."
+                        oldPrice="$9.99"
+                        newPrice="$8.99"
+                    />
+
+                    <PricingCard 
+                        iconClass="mdi mdi-account-multiple h1 text-primary"
+                        title="Personal"
+                        features={[
+                            { text: 'Unlimited Target Audience', isAvailable: true },
+                            { text: '1 User Account', isAvailable: true },
+                            { text: '100+ Video Tuts', isAvailable: true },
+                            { text: 'Public Displays', isAvailable: false },
+                        ]}
+                        description="Semper urna veal tempus pharetra elit habisse platea dictumst."
+                        oldPrice="$19.99"
+                        newPrice="$18.99"
+                        isFeatured
+                    />
+
+                    <PricingCard 
+                        iconClass="mdi mdi-account-multiple-plus h1"
+                        title="Ultimate"
+                        features={[
+                            { text: 'Unlimited Target Audience', isAvailable: true },
+                            { text: '1 User Account', isAvailable: true },
+                            { text: '100+ Video Tuts', isAvailable: true },
+                            { text: 'Public Displays', isAvailable: true },
+                        ]}
+                        description="Semper urna veal tempus pharetra elit habisse platea dictumst."
+                        oldPrice="$29.99"
+                        newPrice="$28.99"
+                    />
+                </div>
+            </div>
+        </section>
+    );
+};
+
+const PricingCard = ({ iconClass, title, features, description, oldPrice, newPrice, isFeatured }) => {
+    return (
+        <div className="col-lg-4">
+            <div className="pricing-box mt-4">
+                {isFeatured && (
+                    <div className="pricing-badge">
+                        <span className="badge">Featured</span>
+                    </div>
+                )}
+                <i className={iconClass}></i>
+                <h4 className="f-20">{title}</h4>
+                <div className="mt-4 pt-2">
+                    <p className="mb-2 f-18">Features</p>
+                    {features.map((feature, index) => (
+                        <p className="mb-2" key={index}>
+                            <i className={`mdi ${feature.isAvailable ? 'mdi-checkbox-marked-circle text-success' : 'mdi-close-circle text-danger'} f-18 mr-2`}></i>
+                            <b>{feature.isAvailable ? '✔️' : '❌'}</b> {feature.text}
+                        </p>
+                    ))}
+                </div>
+                <p className="mt-4 pt-2 text-muted">{description}</p>
+                <div className="pricing-plan mt-4 pt-2">
+                    <h4 className="text-muted">
+                        <s>{oldPrice}</s> <span className="plan pl-3 text-dark">{newPrice}</span>
+                    </h4>
+                    <p className="text-muted mb-0">Per Month</p>
+                </div>
+                <div className="mt-4 pt-3">
+                    <a href="" className="btn btn-primary btn-rounded">Purchase Now</a>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default PricingSection;
diff --git a/src/Components/Residencies/Residencies.jsx b/src/Components/Residencies/Residencies.jsx
@@ -6,7 +6,7 @@ import data from '../../utils/slider.json'
 import { sliderSettings } from '../../utils/common'
 const Residencies = ()=>{
     return(
-        <section className='r-wrapper'>
+        <section id='Residencies' className='r-wrapper'>
             <div className='paddings innerWidth r-container'>
                 <div className="flexColStart innerr-head">
                     <span className='orangeText'>