Pay first template

package.json

@@ -9,13 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.4.7",
+    "@mui/material": "^6.4.7",
     "eslint": "^8.56.0",
     "eslint-config-next": "15.1.6",
     "next": "15.1.6",
     "next-themes": "^0.2.1",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-modal-video": "^2.0.1"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-modal-video": "^2.0.2"
   },
   "devDependencies": {
     "@types/node": "^20.8.9",
@@ -27,4 +31,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
   }
-}
+}

src/app/about/page.tsx

@@ -13,10 +13,10 @@ export const metadata: Metadata = {
 const AboutPage = () => {
   return (
     <>
-      <Breadcrumb
+      {/* <Breadcrumb
         pageName="About Page"
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius eros eget sapien consectetur ultrices. Ut quis dapibus libero."
-      />
+      /> */}
       <AboutSectionOne />
       <AboutSectionTwo />
     </>

src/app/contact/page.tsx

@@ -12,10 +12,10 @@ export const metadata: Metadata = {
 const ContactPage = () => {
   return (
     <>
-      <Breadcrumb
+      {/* <Breadcrumb
         pageName="Contact Page"
-        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius eros eget sapien consectetur ultrices. Ut quis dapibus libero."
-      />
+        description=""
+      /> */}
 
       <Contact />
     </>

src/app/page.tsx

@@ -12,8 +12,8 @@ import Video from "@/components/Video";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "Free Next.js Template for Startup and SaaS",
-  description: "This is Home for Startup Nextjs Template",
+  title: "Pay First",
+  description: "The best Payment Service Provider for business in the UK",
   // other metadata
 };
 
@@ -22,14 +22,14 @@ export default function Home() {
     <>
       <ScrollUp />
       <Hero />
-      <Features />
-      <Video />
-      <Brands />
-      <AboutSectionOne />
-      <AboutSectionTwo />
       <Testimonials />
+      <Features />
+      {/* <Video /> */}
+      {/* <Brands /> */}
+      {/* <AboutSectionOne />
+      <AboutSectionTwo /> */}
       <Pricing />
-      <Blog />
+      {/* <Blog /> */}
       <Contact />
     </>
   );

src/app/privacy-policy/page.tsx

@@ -0,0 +1,107 @@
+import Breadcrumb from '@/components/Common/Breadcrumb'
+import React from 'react'
+
+const privacyPolicies = [
+  {
+    header: 'INTRODUCTION',
+    content: <p>Pay First Ltd (Company, we, us, or our) is committed to protecting the privacy and security of our Clients’ personal information. This Privacy Policy outlines how we collect, use, disclose, and safeguard information when you use our e-money distribution services.</p>
+  },
+  {
+    header: 'INFORMATION WE COLLECT',
+    content: <ul className='list-inside list-disc'>
+            <li><span className='font-bold'>Personal Information:</span> Name, address, email, phone number, government-issued identification, and other details required for verification.</li>
+            <li><span className='font-bold'>Financial Information:</span> Bank account details, payment transaction history, and other financial data related to our services.</li>
+            <li><span className='font-bold'>Technical Data:</span> IP address, browser type, operating system, and usage details collected through cookies and tracking technologies.</li>
+            <li><span className='font-bold'>Compliance Information:</span> Any data required for regulatory compliance, including anti-money laundering (AML) and Know Your Customer (KYC) checks.</li>
+          </ul>
+  },
+  {
+    header: 'HOW WE USE YOUR INFORMATION',
+    content: <div>
+        <p>We use the information collected for the following purposes:</p>
+        <ul className='list-inside list-disc'>
+          <li>To process and facilitate e-money transactions securely</li>
+          <li>To verify client identity and comply with legal and regulatory requirements.</li>
+          <li>To prevent fraud, money laundering, and other financial crimes.</li>
+          <li>To improve our services, website functionality, and customer experience.</li>
+          <li>To communicate important service updates, promotions, or changes to policies.</li>
+        </ul>
+      </div>
+  },
+  {
+    header: 'DATA SHARING AND DISCLOSURE',
+    content: <div>
+        <p>We do not sell or rent your personal data. However, we may share your information with:</p>
+        <ul className='list-inside list-disc'>
+          <li><span className='font-bold'>Regulatory Authorities:</span> To comply with legal obligations or government requests.</li>
+          <li><span className='font-bold'>Service Providers:</span> Third-party partners who assist in transaction processing, security, or data storage.</li>
+          <li><span className='font-bold'>Business Transfers:</span> In the event of a merger, acquisition, or asset sale, your data may be transferred to the new entity.</li>
+          <li><span className='font-bold'>Legal Compliance:</span> If required by law, we may disclose information to enforce our policies, prevent fraud, or protect our rights and safety.</li>     
+        </ul>
+      </div>
+  },
+  {
+    header: 'DATA SECURITY',
+    content: <p>We implement strict security measures to protect your personal data from unauthorized access, alteration, disclosure, or destruction. These include encryption, secure servers, and access controls.</p>
+  },
+  {
+    header: 'DATA RETENTION',
+    content: <p>We retain personal information for as long as necessary to fulfill our services, comply with legal obligations, resolve disputes, and enforce agreements. When data is no longer required, we securely delete or anonymize it.</p>
+  },
+  {
+    header: 'YOUR RIGHTS AND CHOICES',
+    content: <div>
+        <p>Depending on your jurisdiction, you may have the following rights regarding your personal data:</p>
+        <ul className='list-inside list-disc'>
+          <li>Access, update, or delete your personal information.</li>
+          <li>Object to or restrict certain data processing activities.</li>
+          <li>Withdraw consent where applicable.</li>
+          <li>Request a copy of your personal data in a portable format. To exercise these rights, please contact us at [Contact Email].</li>     
+        </ul>
+      </div>
+  },
+  {
+    header: 'COOKIES AND TRACKING TECHNOLOGIES',
+    content: <p>We may use cookies and similar technologies to enhance user experience, analyze traffic, and improve services. You can manage cookie preferences through your browser settings.</p>
+
+  },
+  {
+    header: 'THIRD-PARTY LINKS',
+    content: <p>Our website or services may contain links to third-party websites. We are not responsible for the privacy practices of those sites. We encourage you to review their policies before providing personal information.</p>
+  },
+  {
+    header: 'CHANGES TO THIS PRIVACY POLICY',
+    content: <p>We may update this Privacy Policy from time to time. Any changes will be posted on our website with the updated effective date. Continued use of our services constitutes acceptance of the revised policy.</p>
+  },
+]
+
+const PrivacyPolicy = () => {
+  return (
+    <>
+    <Breadcrumb
+        pageName="Terms and Conditions"
+        description=""
+      />
+    <div className='flex justify-center'>
+      <div className='my-10 max-w-5xl'>
+        <ul className="mb-10 list-inside list-decimal text-body-color ">
+        {privacyPolicies.map((policy) => {
+          return (
+            <>
+              <li className="mt-2 text-base font-medium text-body-color sm:text-lg lg:text-base xl:text-lg">
+                <span className='font-bold'>{policy.header}</span> 
+              </li>
+              {policy.content}
+            </>
+          )
+        })}
+
+        </ul>
+        <p className='mt-8'>By using our services, you acknowledge that you have read and understood this Privacy Policy and agree to the collection, use, and disclosure of your information as outlined above.</p>
+      </div>
+    </div>
+  </>
+  )
+}
+
+export default PrivacyPolicy

src/app/terms/page.tsx

@@ -0,0 +1,109 @@
+import Breadcrumb from '@/components/Common/Breadcrumb'
+import React from 'react'
+
+const terms = [
+  {
+    header: 'INTRODUCTION',
+    content: <p>These Terms and Conditions (Agreement) govern the services provided by Pay First Ltd (Agent), in relation to the handling and management of electronic money distribution (E-Money). By using the services of the Agent, the Client agrees to be bound by the terms and conditions outlined herein.</p>
+  },
+  {
+    header: 'DEFINITIONS',
+    content: <ul className='list-inside list-disc'>
+            <li><span className='italic'>Agent</span> refers to Pay First Ltd, acting as an intermediary for the collection, holding, and disbursement of electronic money</li>
+            <li><span className='italic'>Client</span> refers to any party engaging the services of the Agent for handling E-Money transactions.</li>
+            <li><span className='italic'>E-Money</span> refers to electronically stored monetary value issued and distributed as part of financial transactions.</li>
+            <li><span className='italic'>Beneficiary</span> refers to the party entitled to receive the E-Money as per the terms of the transaction.</li>
+          </ul>
+  },
+  {
+    header: 'SCOPE OF SERVICES',
+    content: <ul className='list-inside list-disc'>
+            <li>The Agent shall facilitate the collection, holding, and transfer of E-Money in accordance with regulatory and contractual obligations.</li>
+            <li>The Agent shall process E-Money transactions as instructed by the Client, subject to applicable laws and regulations.</li>
+            <li>The Agent does not provide legal, financial, or investment advice regarding E-Money transactions.</li>
+          </ul>
+  },
+  {
+    header: 'DEPOSIT AND RELEASE OF FUNDS',
+    content: <ul className='list-inside list-disc'>
+            <li>The Client shall deposit the E-Money in the designated account as instructed by the Agent.</li>
+            <li>The Agent shall only release the E-Money upon receiving written authorization from all relevant parties, court order, or in compliance with applicable laws.</li>
+            <li>Any dispute concerning the release of E-Money shall be resolved between the parties involved, and the Agent shall not be liable for any delays due to disputes.</li>
+          </ul>
+  },
+  {
+    header: 'FEES AND CHARGES',
+    content: <ul className='list-inside list-disc'>
+            <li>The Client agrees to pay the Agent the applicable service fee for handling the E-Money.</li>
+            <li>The Agent reserves the right to deduct applicable fees from the E-Money prior to disbursement.</li>
+            <li>Additional charges may apply for expedited processing or special requests.</li>
+          </ul>
+  },
+  {
+    header: 'LIABILITY & INDEMNIFICATION',
+    content: <ul className='list-inside list-disc'>
+            <li>The Agent shall not be liable for any loss, damage, or delay arising from force majeure events, banking failures, or regulatory changes.</li>
+            <li>The Client agrees to indemnify and hold the Agent harmless against any claims, losses, or liabilities arising from the handling of E-Money, except in cases of willful misconduct or gross negligence by the Agent.</li>
+          </ul>
+  },
+  {
+    header: 'COMPLIANCE & ANTI-MONEY LAUNDERING (AML) REQUIREMENTS',
+    content: <ul className='list-inside list-disc'>
+            <li>The Agent shall comply with all applicable laws, including anti-money laundering regulations.</li>
+            <li>The Client agrees to provide any necessary documentation to verify the legitimacy of funds as required by law.</li>
+          </ul>
+  },
+  {
+    header: 'TERMINATION',
+    content: <ul className='list-inside list-disc'>
+            <li>Either party may terminate this Agreement upon written notice.</li>
+            <li>In the event of termination, the Agent shall ensure the proper handling of any pending E-Money transactions before ceasing services.</li>
+          </ul>
+  },
+  {
+    header: 'GOVERNING LAW & DISPUTE RESOLUTION',
+    content: <ul className='list-inside list-disc'>
+            <li>This Agreement shall be governed by the laws of the United Kingdom.</li>
+            <li>Any disputes arising out of or relating to this Agreement shall be resolved through arbitration or in the courts of the United Kingdom.</li>
+          </ul>
+  },
+  {
+    header: 'MISCELLANEOUS',
+    content: <ul className='list-inside list-disc'>
+            <li>This Agreement constitutes the entire agreement between the parties and supersedes all prior understandings.</li>
+            <li>No modification shall be valid unless made in writing and signed by both parties.</li>
+            <li>If any provision of this Agreement is found to be unenforceable, the remaining provisions shall remain in full force and effect.</li>
+          </ul>
+  },
+]
+
+const Terms = () => {
+  return (
+    <>
+    <Breadcrumb
+        pageName="Terms and Conditions"
+        description=""
+      />
+    <div className='flex justify-center'>
+      <div className='my-10 max-w-5xl'>
+        <ul className="mb-10 list-inside list-decimal text-body-color ">
+        {terms.map((term) => {
+          return (
+            <>
+              <li className="mt-2 text-base font-medium text-body-color sm:text-lg lg:text-base xl:text-lg">
+                <span className='font-bold'>{term.header}</span> 
+              </li>
+              {term.content}
+            </>
+          )
+        })}
+
+        </ul>
+        <p className='mt-8'>By using the services of Pay First Ltd, the Client acknowledges and agrees to these Terms and Conditions.</p>
+      </div>
+    </div>
+  </>
+  )
+}
+
+export default Terms

src/components/About/AboutSectionOne.tsx

@@ -24,12 +24,12 @@ const AboutSectionOne = () => {
           <div className="-mx-4 flex flex-wrap items-center">
             <div className="w-full px-4 lg:w-1/2">
               <SectionTitle
-                title="Crafted for Startup, SaaS and Business Sites."
-                paragraph="The main ‘thrust’ is to focus on educating attendees on how to best protect highly vulnerable business applications with interactive panel discussions and roundtables."
+                title="Simplifying Payments, Empowering Businesses"
+                paragraph="Pay First’s vision has always been to build a secure and efficient platform for all businesses to benefit from. With strong founding team of tech wizzes, entrepreneurial geniuses and people who struggled with their own payments; Pay First’s first seeds were planted. We leverage the latest technology and industry expertise to deliver a frictionless experience, helping businesses of all sizes navigate the complexities of modern finance with ease"
                 mb="44px"
               />
 
-              <div
+              {/* <div
                 className="mb-12 max-w-[570px] lg:mb-0"
                 data-wow-delay=".15s"
               >
@@ -46,19 +46,19 @@ const AboutSectionOne = () => {
                     <List text="Developer friendly" />
                   </div>
                 </div>
-              </div>
+              </div> */}
             </div>
 
             <div className="w-full px-4 lg:w-1/2">
               <div className="relative mx-auto aspect-[25/24] max-w-[500px] lg:mr-0">
                 <Image
-                  src="/images/about/about-image.svg"
+                  src="/images/hero/Pay First 1.jpg"
                   alt="about-image"
                   fill
                   className="mx-auto max-w-full drop-shadow-three dark:hidden dark:drop-shadow-none lg:mr-0"
                 />
                 <Image
-                  src="/images/about/about-image-dark.svg"
+                  src="/images/hero/Pay First 1.jpg"
                   alt="about-image"
                   fill
                   className="mx-auto hidden max-w-full drop-shadow-three dark:block dark:drop-shadow-none lg:mr-0"

src/components/About/AboutSectionTwo.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import SectionTitle from "../Common/SectionTitle";
 
 const AboutSectionTwo = () => {
   return (
@@ -26,33 +27,11 @@ const AboutSectionTwo = () => {
           </div>
           <div className="w-full px-4 lg:w-1/2">
             <div className="max-w-[470px]">
-              <div className="mb-9">
-                <h3 className="mb-4 text-xl font-bold text-black dark:text-white sm:text-2xl lg:text-xl xl:text-2xl">
-                  Bug free code
-                </h3>
-                <p className="text-base font-medium leading-relaxed text-body-color sm:text-lg sm:leading-relaxed">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                </p>
-              </div>
-              <div className="mb-9">
-                <h3 className="mb-4 text-xl font-bold text-black dark:text-white sm:text-2xl lg:text-xl xl:text-2xl">
-                  Premier support
-                </h3>
-                <p className="text-base font-medium leading-relaxed text-body-color sm:text-lg sm:leading-relaxed">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt.
-                </p>
-              </div>
-              <div className="mb-1">
-                <h3 className="mb-4 text-xl font-bold text-black dark:text-white sm:text-2xl lg:text-xl xl:text-2xl">
-                  Next.js
-                </h3>
-                <p className="text-base font-medium leading-relaxed text-body-color sm:text-lg sm:leading-relaxed">
-                  Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt
-                  consectetur adipiscing elit setim.
-                </p>
-              </div>
+              <SectionTitle
+                title="Tailored Experience"
+                paragraph="Pay First is able to tailor to all your needs, from paying your suppliers to payroll for your employees. We have you covered! By combining state-of-the-art technology for payment processing, along with a team of experts ready to face any challenge, we’re to provide only the best tailored solutions"
+                mb="44px"
+              />
             </div>
           </div>
         </div>