.gitignore

@@ -1,8 +1,3 @@
 node_modules/
 */node_modules/
 */build/
-
-**/node_modules/
-**/build/
-.DS_Store
-.env

frontend/json/runtimeError.json

@@ -1 +0,0 @@
-{}

frontend/src/components/WebPageComponents/Header.tsx

@@ -38,9 +38,9 @@ export default function WebSiteHeader({ projectName }: WebSiteHeaderProps) {
                 style ? 'md:w-auto' : 'justify-between mr-6'
               } `}
             >
-                <div className='flex items-center py-2 lg:mr-6 text-center md:text-left'>
-                  <img src="https://drive.google.com/uc?export=view&id=17V9Mp9BB67rYmTcVIJ7e0iEGzKubafXq" alt="Seva sevan logo" width="40" height="40" />
-                </div>
+              <div className='font-bold py-2 lg:mr-6 text-center md:text-left'>
+                {projectName}
+              </div>
               <div className='py-6 md:py-0 flex flex-col md:flex-row w-full md:w-auto space-y-4 md:space-y-0 md:space-x-4'>
                 {webPagesNavBar.map((page, index) => {
                   const isRootRoute = router.pathname === '/';

frontend/src/components/WebPageComponents/PricingComponent/index.tsx

@@ -1,6 +1,240 @@
-// Stubbed out PricingSection to remove pricing tables
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { useAppSelector, useAppDispatch } from '../../../stores/hooks';
+import BaseButton from '../../BaseButton';
+import BaseIcon from '../../BaseIcon';
+import * as icon from '@mdi/js';
 
-const PricingSection = () => null;
+export default function PricingSection({
+  projectName,
+  withBg = 0,
+  features,
+  description,
+}) {
+  const textColor = useAppSelector((state) => state.style.linkColor);
+  const iconsColor = useAppSelector((state) => state.style.iconsColor);
+  const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
+  const borders = useAppSelector((state) => state.style.borders);
+  const shadow = useAppSelector((state) => state.style.shadow);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const websiteSectionStyle = useAppSelector(
+    (state) => state.style.websiteSectionStyle,
+  );
+  const navBarItemLabelActiveColorStyle = useAppSelector(
+    (state) => state.style.navBarItemLabelActiveColorStyle,
+  );
+  const asideMenuItemActiveStyle = useAppSelector(
+    (state) => state.style.asideMenuItemActiveStyle,
+  );
+  const corners = useAppSelector((state) => state.style.corners);
+  const textSecondary = useAppSelector((state) => state.style.textSecondary);
+  const activeLinkColor = useAppSelector(
+    (state) => state.style.activeLinkColor,
+  );
 
-export default PricingSection;
+  return (
+    <section className={` ${withBg ? 'bg-gray-100' : `bg-white`}`}>
+      <div className='py-8 px-4 mx-auto lg:py-24 lg:px-0 container'>
+        <div className='mx-auto max-w-screen-md text-center mb-8 lg:mb-10'>
+          <p className={`text-md ${textSecondary}  mx-auto `}>
+            Choose the plan that’s right for you
+          </p>
+          <div className='pt-4 text-3xl font-bold'>Pricing Table</div>
+        </div>
+        <div className='space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-10 lg:space-y-0'>
+          <div className='flex flex-col p-6 mx-auto max-w-lg  h-full  xl:p-8 '>
+            <div className='flex-grow'>
+              <h3 className=' text-2xl font-semibold'>Standard</h3>
+              <p className='font-light text-sm mb-4'>
+                {description['standard']
+                  ? description['standard']
+                  : 'For solo designer'}
+              </p>
+              <hr className={`${borders}`} />
+              <div>
+                <div className='flex  items-start mt-4'>
+                  <BaseIcon
+                    className={`${iconsColor} mx-0 px-0`}
+                    size={24}
+                    path={icon.mdiCurrencyUsd}
+                  />
+                  <p className='mt-1 text-5xl font-bold'>29</p>
+                </div>
+                <p className={`font-light text-xs ${textSecondary}  mb-4`}>
+                  per person, per month
+                </p>
+              </div>
+
+              <ul
+                role='list'
+                className={`my-4 space-y-4 text-base font-normal ${textSecondary} text-left`}
+              >
+                {features.standard.features.map((feature, index) => (
+                  <li key={index} className='flex items-center space-x-2'>
+                    <BaseIcon
+                      className='text-green-500 mx-0 px-0'
+                      size={24}
+                      path={icon.mdiCheck}
+                    />
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+              <p className='font-light text-sm mt-4'>Limited to</p>
+              <ul
+                role='list'
+                className={`my-4 space-y-4 text-base font-normal ${textSecondary} text-left`}
+              >
+                {features.standard.limited_features.map((feature, index) => (
+                  <li key={index} className='flex items-center space-x-2'>
+                    <BaseIcon
+                      className={` mx-0 px-0 ${textSecondary}`}
+                      size={24}
+                      path={icon.mdiMinus}
+                    />
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <BaseButton
+              href='/login'
+              label='Get Started'
+              color='info'
+              outline
+              className='w-1/2 text-sm mt-4'
+            />
+          </div>
+
+          <div
+            className={`flex flex-col p-6 h-full mx-auto max-w-lg ${shadow} ${
+              withBg ? `bg-white` : 'bg-gray-100'
+            } ${
+              corners != 'rounded-full' ? `${corners}` : 'rounded-3xl'
+            }  xl:p-8 `}
+          >
+            <div className='flex-grow'>
+              <h3 className=' text-2xl font-semibold'>
+                Premium{' '}
+                <span
+                  className={`${
+                    corners != 'rounded-full' ? `${corners}` : 'rounded-3xl'
+                  } ml-2 bg-blue-600 text-white font-semibold  text-sm p-1 ${navBarItemLabelActiveColorStyle} `}
+                >
+                  MOST POPULAR
+                </span>
+              </h3>
+              <p className='font-light text-sm mb-4'>
+                {description['premium']
+                  ? description['premium']
+                  : ' For small startup and agency'}
+              </p>
+              <hr className={`${borders}`} />
+              <div>
+                <div className='flex  items-start mt-4'>
+                  <BaseIcon
+                    className={`${iconsColor} mx-0 px-0`}
+                    size={24}
+                    path={icon.mdiCurrencyUsd}
+                  />
+                  <p className='mt-1 text-5xl font-bold'>49</p>
+                </div>
+                <p className={`font-light text-xs  ${textSecondary} mb-4`}>
+                  per person, per month
+                </p>
+              </div>
+
+              <ul
+                role='list'
+                className={`my-4 space-y-4 text-base font-normal ${textSecondary} text-left`}
+              >
+                {features.premium.features.map((feature, index) => (
+                  <li key={index} className='flex items-center space-x-2'>
+                    <BaseIcon
+                      className='text-green-500 mx-0 px-0'
+                      size={24}
+                      path={icon.mdiCheck}
+                    />
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+              <p className='font-light text-sm mt-4'>Also Include</p>
+
+              <ul
+                role='list'
+                className={`my-4 space-y-4 text-base font-normal ${textSecondary}  text-left`}
+              >
+                {features.premium.also_included.map((feature, index) => (
+                  <li key={index} className='flex items-center space-x-2'>
+                    <BaseIcon
+                      className='text-green-500 mx-0 px-0'
+                      size={24}
+                      path={icon.mdiCheck}
+                    />
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <BaseButton
+              href='/login'
+              label='Get Started'
+              color='info'
+              className='w-1/2 text-sm mt-4'
+            />
+          </div>
+          <div className='flex flex-col p-6 mx-auto max-w-lg  h-full  xl:p-8 '>
+            <div className='flex-grow'>
+              <h3 className=' text-2xl text-green-text font-semibold'>
+                Business
+              </h3>
+              <p className='font-light text-green-text text-sm mb-4'>
+                {description['business']
+                  ? description['business']
+                  : ' Custom solution'}
+              </p>
+              <hr className={`${borders}`} />
+              <div>
+                <div className='flex  items-start mt-4'>
+                  <BaseIcon
+                    className={`${iconsColor} mx-0 px-0`}
+                    size={24}
+                    path={icon.mdiCurrencyUsd}
+                  />
+                  <p className='mt-1 text-5xl font-bold'>99</p>
+                </div>
+                <p className={`font-light text-xs  ${textSecondary} mb-4`}>
+                  per person, per month
+                </p>
+              </div>
+
+              <ul
+                role='list'
+                className={`my-4 space-y-4 text-base font-normal ${textSecondary}  text-left`}
+              >
+                {features.business.features.map((feature, index) => (
+                  <li key={index} className='flex items-center space-x-2'>
+                    <BaseIcon
+                      className='text-green-500 mx-0 px-0'
+                      size={24}
+                      path={icon.mdiCheck}
+                    />
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <BaseButton
+              href='/login'
+              label='Get Started'
+              color='info'
+              outline
+              className='w-1/2 text-sm mt-4'
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

frontend/src/menuNavBar.ts

@@ -63,6 +63,10 @@ export const webPagesNavBar = [
     href: '/faq',
     label: 'FAQ',
   },
+  {
+    href: '/pricing',
+    label: 'pricing',
+  },
 ];
 
 export default menuNavBar;

frontend/src/pages/index.tsx

@@ -22,6 +22,8 @@ import FeaturesSection from '../components/WebPageComponents/FeaturesComponent';
 
 import TestimonialsSection from '../components/WebPageComponents/TestimonialsComponent';
 
+import PricingSection from '../components/WebPageComponents/PricingComponent';
+
 export default function WebSite() {
   const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
   const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
@@ -54,6 +56,10 @@ export default function WebSite() {
       label: 'FAQ',
     },
 
+    {
+      href: '/pricing',
+      label: 'pricing',
+    },
   ];
 
   const features_points = [
@@ -187,6 +193,20 @@ export default function WebSite() {
           mainText={`What Our Users Say About ${projectName} `}
         />
 
+        <PricingSection
+          projectName={'Seva sevan'}
+          withBg={1}
+          features={pricing_features}
+          description={description}
+        />
+
+        <ContactFormSection
+          projectName={'Seva sevan'}
+          design={ContactFormDesigns.WITH_IMAGE || ''}
+          image={['Person typing on a laptop']}
+          mainText={`Get in Touch with ${projectName} `}
+          subTitle={`Reach out anytime. Our team responds within 24 hours to assist you with any inquiries.`}
+        />
       </main>
       <WebSiteFooter projectName={'Seva sevan'} pages={pages} />
     </div>

frontend/src/pages/index.tsx.temp

@@ -1,193 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import type { ReactElement } from 'react';
-import Head from 'next/head';
-import Link from 'next/link';
-import { useAppSelector } from '../stores/hooks';
-import LayoutGuest from '../layouts/Guest';
-import WebSiteHeader from '../components/WebPageComponents/Header';
-import WebSiteFooter from '../components/WebPageComponents/Footer';
-import {
-  ContactFormDesigns,
-  HeroDesigns,
-  FeaturesDesigns,
-  TestimonialsDesigns,
-  PricingDesigns,
-} from '../components/WebPageComponents/designs';
-
-import ContactFormSection from '../components/WebPageComponents/ContactFormComponent';
-
-import HeroSection from '../components/WebPageComponents/HeroComponent';
-
-import FeaturesSection from '../components/WebPageComponents/FeaturesComponent';
-
-import TestimonialsSection from '../components/WebPageComponents/TestimonialsComponent';
-
-export default function WebSite() {
-  const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
-  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
-  const projectName = 'Seva sevan';
-
-  useEffect(() => {
-    const darkElement = document.querySelector('body .dark');
-    if (darkElement) {
-      darkElement.classList.remove('dark');
-    }
-  }, []);
-  const pages = [
-    {
-      href: '/home',
-      label: 'home',
-    },
-
-    {
-      href: '/services',
-      label: 'services',
-    },
-
-    {
-      href: '/contact',
-      label: 'contact',
-    },
-
-    {
-      href: '/faq',
-      label: 'FAQ',
-    },
-
-  ];
-
-  const features_points = [
-    {
-      name: 'Verified Providers',
-      description:
-        'All service providers undergo thorough verification, ensuring you connect with trusted and reliable professionals.',
-      icon: 'mdiCheckCircle',
-    },
-    {
-      name: 'Smart Search \u0026 Filter',
-      description:
-        'Easily find the right service provider by filtering based on location, service type, and ratings.',
-      icon: 'mdiMagnify',
-    },
-    {
-      name: 'Secure Payments',
-      description:
-        'Make payments seamlessly and securely through integrated UPI options like Google Pay and Paytm.',
-      icon: 'mdiLock',
-    },
-  ];
-
-  const testimonials = [
-    {
-      text: 'DailyPro has transformed how I find help at home. The verified providers give me peace of mind.',
-      company: 'HomeEase Solutions',
-      user_name: 'Anita Sharma, Operations Manager',
-    },
-    {
-      text: "I love the convenience of booking services through DailyPro. It's quick, easy, and reliable.",
-      company: 'UrbanNest Co.',
-      user_name: 'Ravi Patel, CEO',
-    },
-    {
-      text: 'Thanks to DailyPro, I found a trustworthy babysitter in no time. Highly recommend!',
-      company: 'FamilyFirst Services',
-      user_name: 'Priya Kapoor, HR Specialist',
-    },
-    {
-      text: "The app's user-friendly interface makes it simple to find and book services. A game-changer!",
-      company: 'TechSavvy Innovations',
-      user_name: 'Vikram Desai, Product Designer',
-    },
-    {
-      text: "DailyPro's secure payment system ensures my transactions are safe. I use it regularly.",
-      company: 'SecurePay Inc.',
-      user_name: 'Meera Joshi, Finance Analyst',
-    },
-    {
-      text: 'Finding a reliable plumber was never this easy. DailyPro is my go-to app for home services.',
-      company: 'FixIt Fast',
-      user_name: 'Raj Malhotra, Homeowner',
-    },
-  ];
-
-  const pricing_features = {
-    standard: {
-      features: [
-        'Access to verified providers',
-        'Basic search and filter options',
-      ],
-      limited_features: [
-        'Limited booking requests per month',
-        'Basic customer support',
-      ],
-    },
-    premium: {
-      features: [
-        'Priority listing in search results',
-        'Advanced search and filter options',
-      ],
-      also_included: [
-        'Unlimited booking requests',
-        'Priority customer support',
-        'Access to exclusive providers',
-      ],
-    },
-    business: {
-      features: [
-        'Customizable service packages',
-        'Dedicated account manager',
-        'Comprehensive analytics and reporting',
-      ],
-    },
-  };
-
-  const description = {
-    standard:
-      'Ideal for individuals seeking occasional domestic help with essential features.',
-    premium:
-      'Perfect for small businesses or startups needing regular and reliable service access.',
-    business:
-      'Designed for enterprises requiring comprehensive service management and support.',
-  };
-
-  return (
-    <div className='flex flex-col min-h-screen'>
-      <Head>
-        <title>{`DailyPro - Connect with Verified Domestic Service Providers`}</title>
-        <meta
-          name='description'
-          content={`Discover DailyPro, the app that connects you with verified local domestic service providers in India. Find maids, cooks, babysitters, and more with ease.`}
-        />
-      </Head>
-      <WebSiteHeader projectName={'Seva sevan'} pages={pages} />
-      <main className={`flex-grow    bg-white  rounded-none  `}>
-        <HeroSection
-          projectName={'Seva sevan'}
-          image={['Smiling service provider assisting client']}
-          mainText={`Connect with Trusted Helpers via ${projectName}`}
-          subTitle={`Discover reliable domestic service providers in your area with ${projectName}. From cleaning to childcare, find the help you need today.`}
-          design={HeroDesigns.IMAGE_RIGHT || ''}
-          buttonText={`Find Help Now`}
-        />
-
-        <FeaturesSection
-          projectName={'Seva sevan'}
-          image={['App interface showcasing features']}
-          withBg={0}
-          features={features_points}
-          mainText={`Explore ${projectName} Features`}
-          subTitle={`Discover how ${projectName} simplifies finding trusted domestic help with these key features.`}
-          design={FeaturesDesigns.CARDS_GRID_WITH_ICONS || ''}
-        />
-
-        <TestimonialsSection
-          projectName={'Seva sevan'}
-          design={TestimonialsDesigns.HORIZONTAL_CAROUSEL || ''}
-          testimonials={testimonials}
-          mainText={`What Our Users Say About ${projectName} `}
-        />
-
-      </main>
-      <WebSiteFooter projectName={'Seva sevan'} pages={pages} />
-    </div>
-  );

frontend/src/pages/web_pages/home.tsx

@@ -23,6 +23,7 @@ import FeaturesSection from '../../components/WebPageComponents/FeaturesComponen
 import TestimonialsSection from '../../components/WebPageComponents/TestimonialsComponent';
 
 import PricingSection from '../../components/WebPageComponents/PricingComponent';
+
 export default function WebSite() {
   const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
   const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
@@ -168,6 +169,12 @@ export default function WebSite() {
 
         <PricingSection
           projectName={'Seva sevan'}
+          withBg={0}
+          features={pricing_features}
+          description={description}
+        />
+
+        <ContactFormSection
           projectName={'Seva sevan'}
           design={ContactFormDesigns.WITH_IMAGE || ''}
           image={['Person typing on a laptop']}

frontend/src/pages/web_pages/pricing.tsx

@@ -18,6 +18,7 @@ import HeroSection from '../../components/WebPageComponents/HeroComponent';
 import ContactFormSection from '../../components/WebPageComponents/ContactFormComponent';
 
 import PricingSection from '../../components/WebPageComponents/PricingComponent';
+
 import FaqSection from '../../components/WebPageComponents/FaqComponent';
 
 export default function WebSite() {
@@ -125,6 +126,12 @@ export default function WebSite() {
           buttonText={`View Plans`}
         />
 
+        <PricingSection
+          projectName={'Seva sevan'}
+          withBg={1}
+          features={pricing_features}
+          description={description}
+        />
 
         <FaqSection
           projectName={'Seva sevan'}

frontend/src/pages/web_pages/services.tsx

@@ -19,6 +19,7 @@ import HeroSection from '../../components/WebPageComponents/HeroComponent';
 import FeaturesSection from '../../components/WebPageComponents/FeaturesComponent';
 
 import PricingSection from '../../components/WebPageComponents/PricingComponent';
+
 import FaqSection from '../../components/WebPageComponents/FaqComponent';
 
 import ContactFormSection from '../../components/WebPageComponents/ContactFormComponent';
@@ -164,6 +165,12 @@ export default function WebSite() {
           design={FeaturesDesigns.CARDS_GRID_WITH_ICONS_DIVERSITY || ''}
         />
 
+        <PricingSection
+          projectName={'Seva sevan'}
+          withBg={1}
+          features={pricing_features}
+          description={description}
+        />
 
         <FaqSection
           projectName={'Seva sevan'}