Abstract
Uploaded by
sameerkhan04843Abstract
Uploaded by
sameerkhan048431.
ABSTRACT
Embark on an immersive journey through the realm of seamless digital transactions with our meticulously
crafted RazorPay Clone, designed using HTML and Tailwind CSS. Traverse the dynamic landscape of online
payments as you explore the intuitive interface and secure features of our payment gateway replica.
From the sleek transaction panels reminiscent of RazorPay to the streamlined payment processes, our RazorPay
Clone guarantees a user experience that mirrors the renowned service. Dive into the coding marvels of HTML
and Tailwind CSS, where every line is meticulously curated for both functionality and aesthetic appeal.
Whether navigating the encrypted pathways of secure transactions or experiencing the fluidity of the Tailwind-
styled elements, each click resonates with the precision of a finely tuned digital instrument. Revel in the
seamless integration and customization capabilities, ensuring that your clone not only replicates but enhances
the user experience.
As you traverse the virtual landscapes of payment gateways, let our RazorPay Clone be your guide, offering an
extraordinary coding sojourn where each line of code reveals the digital grandeur of this cloned masterpiece.
1
2.INTRODUCTION
In the ever-evolving landscape of online commerce, the seamless and secure processing of digital
transactions stands as a cornerstone for the success of businesses. The Razorpay Clone project
emerges as a testament to the importance of efficient payment gateways, offering a simplified yet
functional reproduction of the renowned Razorpay platform. Developed using HTML and Tailwind CSS,
this project focuses on creating a user-friendly and visually appealing payment gateway that caters to
the needs of both merchants and customers. As the digital realm continues to shape the way
transactions occur, our project seeks to provide a foundational understanding of payment gateway
development, even in the absence of JavaScript. By leveraging the power of HTML for structuring web
pages and Tailwind CSS for crafting a clean and responsive design, this clone project demonstrates the
potential of creating a static yet effective payment processing solution. This introduction sets the stage
for exploring the key features, technologies employed, and the overarching goals of the Razorpay
Clone project. It invites developers and stakeholders to delve into the intricacies of web development
and payment gateway design while emphasizing the significance of a secure and intuitive payment
processing system in the contemporary digital landscape.
2
3. PROJECT/PROBLEM SELECTION
This project focuses on addressing the prevalent issue of user dissatisfaction and high
abandonment rates during the checkout process in e-commerce platforms. The identified
problem revolves around the complexity and inefficiency of current checkout systems,
leading to frustrated users and lost sales opportunities for online businesses. The lengthy
and confusing checkout procedures often result in users abandoning their shopping carts
before completing the purchase. The project aims to delve into analyzing user behavior
during the checkout process, identifying pain points, and evaluating existing e-commerce
platforms to understand the specific challenges users face. The ultimate goal is to propose
and implement solutions that streamline the checkout experience, reduce friction, and
ultimately increase conversion rates for online transactions. Key objectives include
conducting in-depth user behavior analysis, benchmarking and comparative analysis of
existing platforms, implementing a user-centric redesign of the checkout process, optimizing
for mobile responsiveness, testing and iteration based on real-world user interactions, and
ensuring the proposed changes comply with industry standards for online transaction
security and data privacy. The successful completion of this project is expected to
significantly enhance the overall user experience in e-commerce checkout processes.
4. PROJECT MONITORING SYSTEM
Week 1 2 3 4 5 6 7 8 9 10 11 12
Planning
Research
Design
Implementation
Follow up
Fig 4.1 Gantt Chart
Fig 4.2 Pert Chart
4.3 Feasibility Study:-Feasibility study is the most important step in system in system analysis.
It is the determination of whether the project is feasible or not, Once it has been determined that a
project is feasible, the analysis can go ahead and prepare the project specification which finalizes
project requirement.
Objective of Feasibility Study
The main objective of Feasibility Study are :-
To identify the deficiencies in the current system.
To determine objective of the proposed system.
To acquire a sense of scope of the system.
To identify the responsible users.
To determine whether it is feasible to develop the new system.
Steps in Feasibility Study :-
Feasibility study is carried out in the following steps:
Form a project team and appoint project leader.
Prepare system flowcharts.
Enumerate potential proposed system.
Determine and evaluate performance and cost effective of each proposed system
Define and identify characteristics of proposed system.
Weight system performance and cost data.
Select the best-proposed system.
Prepare and report final project directive to management.
5.SYSTEM ANALYSIS
The system analysis for the project "Enhancing User Experience in E-commerce Checkout
Processes" involves a thorough examination of the current e-commerce checkout systems.
This evaluation encompasses a comprehensive assessment of various platforms, considering
user interfaces, workflows, and overall experiences. By scrutinizing the entire checkout
process, from initiation to completion, we aim to pinpoint bottlenecks, complexities, and
elements contributing to user frustration. Utilizing tools such as heatmaps, user recordings,
and surveys, we will conduct a detailed analysis of user behavior during the checkout
process. This approach will help identify patterns, common drop-off points, and areas where
users may encounter confusion or hesitation. Furthermore, a benchmarking and
comparative analysis will be conducted to assess how different e-commerce platforms, both
within and outside the industry, address similar challenges and incorporate best practices.
5.1 Requirement Specifications
System Requirement and Specification Hardware Requirement
Processor-Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz, 2501 Mhz, 2 Core(s), 4 Logical
Processor(S)
Installed Physical Memory (RAM) 8.00 GB
Mouse – Any
Keyboards – Standard 101 keys
Software Requirement
The software is present in Executable file and desirable are:
Front End – HTML AND TailwindCss.
Documentation – Microsoft Word.
Operating System – Windows 11pro.
5.2 System Flow Chart
The System flow diagram is a visual representation of all processed in sequential order. The
System flow chart diagram is a graphical representation of the relation between all the
major parts or step of the system.
Flow chart diagram symbols:
Symbols Description
Start/End: Represents the start or end point of a flowchart.
Data Flow: Data flow are pipelines through the packet of
information
Flow.
Process: A process or task performed by the system.
Decision: Decision decided the next step will be proceed or not.
Yes/No, True/false.
Input/Output: Represent input and output data.
Fig 5.2 RazorPay System flow chart
5.3 DFD’s
The RazorPay Data Flow Diagram (DFD) illustrates the interaction between key entities
within the payment ecosystem. At the core is the customer, initiating the payment process
through their user account, which contains essential details, including payment information.
This user data flows into the RazorPay System, representing the central processing hub
responsible for securely handling payment transactions. The RazorPay System interacts
bidirectionally with the merchant, facilitating the exchange of payment-related data.
Additionally, the system updates a database, ensuring the storage and retrieval of crucial
information related to users and transactions. This simplified DFD provides a high-level
overview of the data flow dynamics in the RazorPay payment gateway, highlighting the
seamless interaction between customers, merchants, and the central processing system.
6.SYSTEM DESIGN
System Design is the process of designing the element of a system such as the architecture,
modules and components, the different interface of those components and the data that
goes through that system.
The purpose of the System Design process is to provide sufficient detailed data and
information about the system and its system element to enable the implementation
consistent with
architectural entities as defined in models and views of the system architecture.
Element of a System
Architecture- This is the conceptual model that defines the structure, behaviour, and
more views of a system. We can use flowchart to represent and illustrate architecture.
Modules- These are components that handle one specific task in a system. A
combination of the modules makes up the system.
Components - This provides a particular function or group of related functions. They
are made up of modules.
Interface - This is the shared boundary across which the components of a system
exchange information and relate.
Data - This is the implementation of the information and data flow.
6.1 Screen Design (Front End)
SCREENSHOTS:-
#Home section
# Features Section
# About section
# Testimonial Section
# Footer Section
6.2 Screen Design Coding (Front End)
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<script src="https://unpkg.com/feather-icons"></script>
<title>Razorpay</title>
<!-- google font -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?
family=Mulish:wght@200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
<style>
.corefeaturesection{
background-size: 100% 100%;
padding-top: 12rem;
padding-bottom: 12rem;
}
.ctaSection{
background-size: 100% 100%;
.companiesList{
animation:10s infinite linear moveCompany;
@keyframes moveCompany {
0%{
top:0;
100%{
top:-50%;
</style>
</head>
<body>
<div class="overflow-x-hidden relative w-full">
<!--Navbar-->
<nav class="bg-deepBlue">
<div class="relative w-[1080px] mx-auto flex items-center justify-
between ">
<!-- logo -->
<a href="/" class="cursor-pointer py-7 pr-7">
<img
src="./Images/logo.svg"
width="125px"
height="30px"/>
</a>
<ul class="flex space-x-6">
<li class="text-white font-mullish py-7 hover:text-lightBlue
cursor-pointer
transition-all duration-200 relative group hidden lg:block">
<a href="#">Payments</a>
<div class="absolute bottom-0 w-full h-1 bg-lightBlue hidden
group-hover:block
transition-all duration-200" ></div>
</li>
<li class="text-white font-mullish py-7 hover:text-lightBlue
cursor-pointer
transition-all duration-200 relative group hidden lg:block">
<a href="#">Banking</a>
<div class="absolute bottom-0 w-full h-1 bg-lightBlue hidden
group-hover:block
transition-all duration-200" ></div>
</li>
<li class="text-white font-mullish py-7 hover:text-lightBlue
cursor-pointer
transition-all duration-200 relative group hidden lg:block">
<a href="#">Corporate Card</a>
</li>
<li class="text-white font-mullish py-7 hover:text-lightBlue
cursor-pointer
transition-all duration-200 relative group hidden lg:block">
<a href="#">Payroll</a>
</li>
<li class="text-white font-mullish py-7 hover:text-lightBlue
cursor-pointer
transition-all duration-200 relative group hidden lg:block">
<a href="#">Resources</a>
<div class="absolute bottom-0 w-full h-1 bg-lightBlue hidden
group-hover:block
transition-all duration-200" ></div>
</li>
<li class="text-white font-mullish py-7 hover:text-lightBlue
cursor-pointer
transition-all duration-200 relative group hidden lg:block">
<a href="#">Support</a>
<div class="absolute bottom-0 w-full h-1 bg-lightBlue hidden
group-hover:block
transition-all duration-200" ></div>
</li>
<li class="text-white font-mullish py-7 hover:text-lightBlue
cursor-pointer
transition-all duration-200 relative group hidden lg:block">
<a href="#">Pricing</a>
<div class="absolute bottom-0 w-full h-1 bg-lightBlue hidden
group-hover:block
transition-all duration-200" ></div>
</li>
</ul>
<div class="flex space-x-6">
<img
src="./Images/india-flag.svg"
width="28px"
height="20px"
class="hidden lg:block"
/>
<button class="py-3 px-5 font-mullish text-white border-
lightBlue border
rounded-sm text-sm font-bold">Log in</button>
<button class="py-3 px-4 font-mullish rounded-sm text-sm font-
bold
bg-white text-lightBlue300 border transition-all duration-200
hover:text-lightBlue500 hidden lg:flex">Sign Up
<svg
viewBox="0 0 24 24"
focusable="false"
class="w-[14px] h-[14px] ml-3"
>
<path
fill="currentColor"
d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
></path>
</svg></button>
</div>
</div>
</nav>
<!--Hero Section-->
<section
class="relative bg-deepBlue">
<div class="w-10/12 max-w-[1080px] flex sm:flex-col lg:flex-row justify-
between items-center mx-auto ">
<!--left part-->
<div class="space-y-8">
<h1 class="font-mullish font-bold text-[40px] leading-[1.2] text-
white">Power your finance, grow your business</h1>
<div class="w-6 h-1 bg-greenLight"></div>
<p class="font-mullish text-[18px] leading-7 text-white opacity-70">
Accept payments from customers. Automate payouts to vendors &
employees. Never run out of working capital.
</p>
<button
class="bg-lightBlue text-white py-[14px] px-[18px] rounded-md font-
mullish font-bold
hover:bg-lightBlue500 transition-all duration-200"
>Sign Up Now</button>
</div>
<!--right part-->
<img src="./Images/hero-illustration.jpg" alt=""
class="w-full max-w-[680px]">
</div>
<!--shape part-->
<div class="w-[103%] absolute left-0 right-0">
<img src="./Images/hero-shape.svg" alt=""
class="w-full object-fill ">
</div>
</section>
<!--feature section - 1-->
<section class="relative mt-[190px] overflow-hidden">
<img src="./Images/feature-section1-dottedrows.png" alt=""
loading="lazy"
width="233"
height="167"
class="absolute -top-[8rem] left-[10rem] inline-block -z-10">
<img src="./Images/feature-section1-dottedrows.png" alt=""
loading="lazy"
width="233"
height="167"
class="absolute top-[3rem] right-0 inline-block rotate-180">
<div class="relative w-11/12 max-w-[1080px] mx-auto pt-4">
<!--heading-->
<h2 class="font-mullish text-center text-2xl leading-[1.2] font-
extrabold hidden md:block">Accept Payments with Razorpay Payment Suite</h2>
<h2 class="font-mullish text-center text-5xl leading-[1.2] font-
extrabold md:hidden">Explore Razorpay Payment Suite</h2>
<div class="w-6 h-1 bg-greenLight mx-auto mt-4 mb-6"></div>
<!--content box-->
<div class="w-full min-h-[520px] bg-white flex rounded-md relative
p-10 py-12 border">
<!--left section-->
<div class="flex flex-col justify-between w-full">
<h3 class="font-mullish text-[28px] leading-10 font-bold
max-w-[500px]">
Supercharge your business with the all-powerful
<span class="text-lightBlue">Payment Gateway</span>
</h3>
<ul class="space-y-2">
<li class="font-mullish flex items-center space-x-2">
<i data-feather="check" class="text-greenLight"></i>
<span>100+ Payment Methods</span>
</li>
<li class="font-mullish flex items-center space-x-2">
<i data-feather="check" class="text-greenLight"></i>
<span> Industry Leading Success Rate </span>
</li>
<li class="font-mullish flex items-center space-x-2">
<i data-feather="check" class="text-greenLight"></i>
<span> Superior Checkout Experience </span>
</li>
<li class="font-mullish flex items-center space-x-2">
<i data-feather="check" class="text-greenLight"></i>
<span> Easy to Integrate </span>
</li>
<li class="font-mullish flex items-center space-x-2">
<i data-feather="check" class="text-greenLight"></i>
<span> Instant Settlements from day 1 </span>
</li>
<li class="font-mullish flex items-center space-x-2">
<i data-feather="check" class="text-greenLight"></i>
<span> In-depth Reporting and Insights </span>
</li>
</ul>
<!-- for button and hyperlink-->
<div class="flex flex-col-reverse md:flex-row items-center
space-x-4 ">
<button
class="bg-lightBlue w-full md:w-fit text-white py-[14px] px-
[18px] rounded-md
font-mullish font-bold hover:bg-lightBlue500 translate-all
duration-200 "
>Sign Up Now</button>
<!--hyperlink-->
<div class="flex self-start md:items-center cursor-pointer
group">
<a href="#"
class="font-mullish font-bold text-lightBlue500
group-hover:text-grayBlue transition-all duration-200"
>Know More</a>
<i
data-feather="chevron-right"
class="w-5 h-5 text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"></i>
</div>
</div>
</div>
<img src="./Images/payment-suite.png" alt=""
class="max-w-[600px] absolute right-0 bottom-0 hidden md:max-w-
[400px] lg:max-w-[600px] md:block lg:block" >
</div>
<div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3
gap-4 mt-10">
<!--Box1-->
<div class="w-full min-h-[15rem] relative cursor-pointer">
<img src="./Images/payment-link-icon.svg" alt=""
class="bg-lightBlue absolute right-3 top-3 w-12 h-12
rounded-full z-[8]
transition-all duration-200">
<!--box shape-->
<svg
viewBox="0 0 349.32501220703125 225"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
class="stroke-1 stroke-[#818597] h-full w-full absolute
z-[9] transition-all duration-200"
style="stroke-opacity: 0.15"
>
<path
d="m 0 6
a 6 6 0 0 1 6 -6
h 250.32501220703125
a 16 16 0 0 1 11 5
l 77 77
a 16 16 0 0 1 5 11
v 126
a 6 6 0 0 1 -6 6
h -337.32501220703125
a 6 6 0 0 1 -6 -6
z"
fill="#fff"
></path>
</svg>
<!--box -content -->
<div class="z-[100] absolute w-full h-full flex flex-col
justify-between pl-5 py-6 pr-8">
<!--text part-->
<div>
<h3 class="font-mullish font-bold text-deepBlueHead
leading-[1.2] text-[1.375rem]">Payment Links</h3>
<p class="font-mullish text-grayText mt-6">
Share payment link via an email, SMS, messenger,
chatbot etc. and get paid immediately</p>
</div>
<!--hyperlink know more-->
<div class="flex items-center cursor-pointer group">
<a href="#"
class="font-mullish font-bold text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"
>Know More</a>
<i
data-feather="chevron-right"
class="w-5 h-5 text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"></i>
</div>
</div>
</div>
<!--Box2-->
<div class="w-full min-h-[15rem] relative cursor-pointer">
<img src="./Images/payment-link-icon.svg" alt=""
class="bg-lightBlue absolute right-3 top-3 w-12 h-12
rounded-full z-[8]
transition-all duration-200">
<!--box shape-->
<svg
viewBox="0 0 349.32501220703125 225"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
class="stroke-1 stroke-[#818597] h-full w-full absolute
z-[9] transition-all duration-200"
style="stroke-opacity: 0.15"
>
<path
d="m 0 6
a 6 6 0 0 1 6 -6
h 250.32501220703125
a 16 16 0 0 1 11 5
l 77 77
a 16 16 0 0 1 5 11
v 126
a 6 6 0 0 1 -6 6
h -337.32501220703125
a 6 6 0 0 1 -6 -6
z"
fill="#fff"
></path>
</svg>
<!--box -content -->
<div class="z-[100] absolute w-full h-full flex flex-col
justify-between pl-5 py-6 pr-8">
<!--text part-->
<div>
<h3 class="font-mullish font-bold text-deepBlueHead
leading-[1.2] text-[1.375rem]">Payment Links</h3>
<p class="font-mullish text-grayText mt-6">
Share payment link via an email, SMS, messenger,
chatbot etc. and get paid immediately</p>
</div>
<!--hyperlink know more-->
<div class="flex items-center cursor-pointer group">
<a href="#"
class="font-mullish font-bold text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"
>Know More</a>
<i
data-feather="chevron-right"
class="w-5 h-5 text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"></i>
</div>
</div>
</div>
<!--Box3-->
<div class="w-full min-h-[15rem] relative cursor-pointer">
<img src="./Images/payment-link-icon.svg" alt=""
class="bg-lightBlue absolute right-3 top-3 w-12 h-12
rounded-full z-[8]
transition-all duration-200">
<!--box shape-->
<svg
viewBox="0 0 349.32501220703125 225"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
class="stroke-1 stroke-[#818597] h-full w-full absolute
z-[9] transition-all duration-200"
style="stroke-opacity: 0.15"
>
<path
d="m 0 6
a 6 6 0 0 1 6 -6
h 250.32501220703125
a 16 16 0 0 1 11 5
l 77 77
a 16 16 0 0 1 5 11
v 126
a 6 6 0 0 1 -6 6
h -337.32501220703125
a 6 6 0 0 1 -6 -6
z"
fill="#fff"
></path>
</svg>
<!--box -content -->
<div class="z-[100] absolute w-full h-full flex flex-col
justify-between pl-5 py-6 pr-8">
<!--text part-->
<div>
<h3 class="font-mullish font-bold text-deepBlueHead
leading-[1.2] text-[1.375rem]">Payment Links</h3>
<p class="font-mullish text-grayText mt-6">
Share payment link via an email, SMS, messenger,
chatbot etc. and get paid immediately</p>
</div>
<!--hyperlink know more-->
<div class="flex items-center cursor-pointer group">
<a href="#"
class="font-mullish font-bold text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"
>Know More</a>
<i
data-feather="chevron-right"
class="w-5 h-5 text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"></i>
</div>
</div>
</div>
<!--Box4-->
<div class="w-full min-h-[15rem] relative cursor-pointer">
<img src="./Images/payment-link-icon.svg" alt=""
class="bg-lightBlue absolute right-3 top-3 w-12 h-12
rounded-full z-[8]
transition-all duration-200">
<!--box shape-->
<svg
viewBox="0 0 349.32501220703125 225"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
class="stroke-1 stroke-[#818597] h-full w-full absolute
z-[9] transition-all duration-200"
style="stroke-opacity: 0.15"
>
<path
d="m 0 6
a 6 6 0 0 1 6 -6
h 250.32501220703125
a 16 16 0 0 1 11 5
l 77 77
a 16 16 0 0 1 5 11
v 126
a 6 6 0 0 1 -6 6
h -337.32501220703125
a 6 6 0 0 1 -6 -6
z"
fill="#fff"
></path>
</svg>
<!--box -content -->
<div class="z-[100] absolute w-full h-full flex flex-col
justify-between pl-5 py-6 pr-8">
<!--text part-->
<div>
<h3 class="font-mullish font-bold text-deepBlueHead
leading-[1.2] text-[1.375rem]">Payment Links</h3>
<p class="font-mullish text-grayText mt-6">
Share payment link via an email, SMS, messenger,
chatbot etc. and get paid immediately</p>
</div>
<!--hyperlink know more-->
<div class="flex items-center cursor-pointer group">
<a href="#"
class="font-mullish font-bold text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"
>Know More</a>
<i
data-feather="chevron-right"
class="w-5 h-5 text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"></i>
</div>
</div>
</div>
<!--Box5-->
<div class="w-full min-h-[15rem] relative cursor-pointer">
<img src="./Images/payment-link-icon.svg" alt=""
class="bg-lightBlue absolute right-3 top-3 w-12 h-12
rounded-full z-[8]
transition-all duration-200">
<!--box shape-->
<svg
viewBox="0 0 349.32501220703125 225"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
class="stroke-1 stroke-[#818597] h-full w-full absolute
z-[9] transition-all duration-200"
style="stroke-opacity: 0.15"
>
<path
d="m 0 6
a 6 6 0 0 1 6 -6
h 250.32501220703125
a 16 16 0 0 1 11 5
l 77 77
a 16 16 0 0 1 5 11
v 126
a 6 6 0 0 1 -6 6
h -337.32501220703125
a 6 6 0 0 1 -6 -6
z"
fill="#fff"
></path>
</svg>
<!--box -content -->
<div class="z-[100] absolute w-full h-full flex flex-col
justify-between pl-5 py-6 pr-8">
<!--text part-->
<div>
<h3 class="font-mullish font-bold text-deepBlueHead
leading-[1.2] text-[1.375rem]">Payment Links</h3>
<p class="font-mullish text-grayText mt-6">
Share payment link via an email, SMS, messenger,
chatbot etc. and get paid immediately</p>
</div>
<!--hyperlink know more-->
<div class="flex items-center cursor-pointer group">
<a href="#"
class="font-mullish font-bold text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"
>Know More</a>
<i
data-feather="chevron-right"
class="w-5 h-5 text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"></i>
</div>
</div>
</div>
<!--Box6-->
<div class="w-full min-h-[15rem] relative cursor-pointer">
<img src="./Images/payment-link-icon.svg" alt=""
class="bg-lightBlue absolute right-3 top-3 w-12 h-12
rounded-full z-[8]
transition-all duration-200">
<!--box shape-->
<svg
viewBox="0 0 349.32501220703125 225"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
class="stroke-1 stroke-[#818597] h-full w-full absolute
z-[9] transition-all duration-200"
style="stroke-opacity: 0.15"
>
<path
d="m 0 6
a 6 6 0 0 1 6 -6
h 250.32501220703125
a 16 16 0 0 1 11 5
l 77 77
a 16 16 0 0 1 5 11
v 126
a 6 6 0 0 1 -6 6
h -337.32501220703125
a 6 6 0 0 1 -6 -6
z"
fill="#fff"
></path>
</svg>
<!--box -content -->
<div class="z-[100] absolute w-full h-full flex flex-col
justify-between pl-5 py-6 pr-8">
<!--text part-->
<div>
<h3 class="font-mullish font-bold text-deepBlueHead
leading-[1.2] text-[1.375rem]">Payment Links</h3>
<p class="font-mullish text-grayText mt-6">
Share payment link via an email, SMS, messenger,
chatbot etc. and get paid immediately</p>
</div>
<!--hyperlink know more-->
<div class="flex items-center cursor-pointer group">
<a href="#"
class="font-mullish font-bold text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"
>Know More</a>
<i
data-feather="chevron-right"
class="w-5 h-5 text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- feature section 2-->
<section
class="bg-[url(./Images/feature-section-2BG.svg)] bg-no-repeat bg-cover pb-
[500px] mt-14 pt-[20rem]">
<div
class="w-10/12 max-w-[1080px] mx-auto relative pt-4 ">
<h2 class="font-mullish text-center text-2xl leading-[1.2] text-
white font-bold"
>Explore Razorpay Business Banking</h2>
<div class="w-6 h-1 bg-greenLight mx-auto mt-4 mb-6"></div>
<!-- main feaeture box-->
<div class="w-full min-h[440px] flex flex-col relative">
<img src="./Images/x-flame-1.png" alt=""
loading="lazy"
class="absolute -top-[142px] -left-[140px] w-[200px]">
<img src="./Images/x-flame-2.png" alt=""
loading="lazy"
class="absolute top-[150px] -right-[180px] w-[200px]">
<!--content box-->
<div class="relative w-full bg-[#181c2e] p-10 py-12 border
border-slate-700 z-20 rounded-md ">
<!--left part-->
<div class="flex flex-col justify-between items-start h-full
w-full gap-12 z-20">
<h3 class="font-mullish text-[28px] text-white font-bold
leading-10 max-w-[500px]"
>Manage your company’s finances with
<img src="./Images/razorpayX.svg" alt=""
width="168px"
height="32px"
class="inline">
<span class="text-greenLight">Business
Banking</span>
</h3>
<ul class="space-y-2">
<li class="font-mullish text-white flex items-center
space-x-2">
<i data-feather="check" class="text-
greenLight"></i>
<span>Open a fully digital current account
</span>
</li>
<li class="font-mullish text-white flex items-center
space-x-2">
<i data-feather="check" class="text-
greenLight"></i>
<span>Automate payables & compliment payments
</span></li>
<li class="font-mullish text-white flex items-center
space-x-2">
<i data-feather="check" class="text-
greenLight"></i>
<span>Simplify and track spends with Corporate
cards
</span>
</li>
<li class="font-mullish text-white flex items-center
space-x-2">
<i data-feather="check" class="text-
greenLight"></i>
<span>View financial insights at a glance
</span>
</li>
</ul>
<div class="flex flex-col-reverse md:flex-row w-full
items-center space-x-4 ">
<button
class="relative bg-lightBlue flex items-center
place-content-center md:justify-start text-white py-
[14px] px-[18px] md:pr-[90px] rounded-md
font-mullish font-bold hover:bg-lightBlue500
transition-all duration-200
self-stretch md:w-fit">
Sign Up
<div class="w-12 h-[60px] bg-greenLight absolute
right-6 skew-x-[20deg]
flex justify-center items-center">
<!--arrow-->
<svg
viewBox="0 0 24 24"
focusable="false"
class="w-[20px] h-[20px] -skew-x-[20deg] "
>
<path
fill="currentColor"
d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-
5.58 5.59L12 20l8-8z"
></path>
</svg>
</div>
</button>
<!--hyperlink wala-->
<div class="flex flex-row items-center cursor-
pointer group">
<a href="#"
class="font-mullish font-bold text-lightBlue500
group-hover:text-lightBlue
transition-all duration-200"
>Know More</a>
<i
data-feather="chevron-right"
class="w-5 h-5 text-lightBlue500 group-
hover:text-lightBlue transition-all duration-200"
></i>
</div>
</div>
</div>
<!--background image for content box-->
<img src="./Images/buisness-banking.png" alt=""
class="max-w-[600px] absolute right-0 bottom-0 z-4 hidden
md:max-w-[400px] lg:max-w-[600px] md:block lg:block">
</div>
<!--card box-->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 w-
full gap-4 my-14">
<!--box1-->
<div
class="w-full min-h-[15rem] relative cursor-pointer
featureCard2"
>
<!-- box icon -->
<img
src="Images/current-icon.svg"
class="bg-lightBlue absolute right-3 top-3 w-12 h-12
rounded-full z-[80] featureCardIcon transition-all duration-200"
/>
<!-- box shape -->
<svg
viewBox="0 0 349.32501220703125 225"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
class="stroke-1 stroke-[#525a76] h-full w-full absolute z-
[90] featureCardSVG transition-all duration-200"
style="stroke-opacity: 0.8"
>
<path
d="m 0 6
a 6 6 0 0 1 6 -6
h 250.32501220703125
a 16 16 0 0 1 11 5
l 77 77
a 16 16 0 0 1 5 11
v 126
a 6 6 0 0 1 -6 6
h -337.32501220703125
a 6 6 0 0 1 -6 -6
z"
fill="#181C2E"
></path>
</svg>
<!-- box content -->
<div
class="z-[1000] absolute h-full w-full pl-5 py-6 pr-8 flex
flex-col justify-between featureCardBox"
>
<div>
<h3
class="font-mullish font-extrabold text-white leading-
[1.2] text-[1.375rem]"
>
Current Account
</h3>
<p class="font-mullish text-grayText mt-6">
Current accounts for fast-growing businesses,
supported by the
best-in-class technology
</p>
</div>
<div class="flex items-center cursor-pointer place-items-
end">
<a
href="#"
class="font-mullish font-bold text-lightBlue500
transition-all duration-200"
>Know More</a
>
<i
data-feather="chevron-right"
class="w-5 h-5 text-lightBlue500 transition-all
duration-200"
></i>
</div>
</div>
</div>
<!--box2-->
<div
class="w-full min-h-[15rem] relative cursor-pointer
featureCard2"
>
<!-- box icon -->
<img
src="Images/current-icon.svg"
class="bg-lightBlue absolute right-3 top-3 w-12 h-12
rounded-full z-[80] featureCardIcon transition-all duration-200"
/>
<!-- box shape -->
<svg
viewBox="0 0 349.32501220703125 225"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
class="stroke-1 stroke-[#525a76] h-full w-full absolute z-
[90] featureCardSVG transition-all duration-200"
style="stroke-opacity: 0.8"
>
<path
d="m 0 6
a 6 6 0 0 1 6 -6
h 250.32501220703125
a 16 16 0 0 1 11 5
l 77 77
a 16 16 0 0 1 5 11
v 126
a 6 6 0 0 1 -6 6
h -337.32501220703125
a 6 6 0 0 1 -6 -6
z"
fill="#181C2E"
></path>
</svg>
<!-- box content -->
<div
class="z-[1000] absolute h-full w-full pl-5 py-6 pr-8 flex
flex-col justify-between featureCardBox"
>
<div>
<h3
class="font-mullish font-extrabold text-white leading-
[1.2] text-[1.375rem]"
>
Current Account
</h3>
<p class="font-mullish text-grayText mt-6">
Current accounts for fast-growing businesses,
supported by the
best-in-class technology
</p>
</div>
<div class="flex items-center cursor-pointer place-items-
end">
<a
href="#"
class="font-mullish font-bold text-lightBlue500
transition-all duration-200"
>Know More</a
>
<i
data-feather="chevron-right"
class="w-5 h-5 text-lightBlue500 transition-all
duration-200"
></i>
</div>
</div>
</div>
<!--box3-->
<div
class="w-full min-h-[15rem] relative cursor-pointer
featureCard2"
>
<!-- box icon -->
<img
src="Images/current-icon.svg"
class="bg-lightBlue absolute right-3 top-3 w-12 h-12
rounded-full z-[80] featureCardIcon transition-all duration-200"
/>
<!-- box shape -->
<svg
viewBox="0 0 349.32501220703125 225"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
class="stroke-1 stroke-[#525a76] h-full w-full absolute z-
[90] featureCardSVG transition-all duration-200"
style="stroke-opacity: 0.8"
>
<path
d="m 0 6
a 6 6 0 0 1 6 -6
h 250.32501220703125
a 16 16 0 0 1 11 5
l 77 77
a 16 16 0 0 1 5 11
v 126
a 6 6 0 0 1 -6 6
h -337.32501220703125
a 6 6 0 0 1 -6 -6
z"
fill="#181C2E"
></path>
</svg>
<!-- box content -->
<div
class="z-[1000] absolute h-full w-full pl-5 py-6 pr-8 flex
flex-col justify-between featureCardBox"
>
<div>
<h3
class="font-mullish font-extrabold text-white leading-
[1.2] text-[1.375rem]"
>
Current Account
</h3>
<p class="font-mullish text-grayText mt-6">
Current accounts for fast-growing businesses,
supported by the
best-in-class technology
</p>
</div>
<div class="flex items-center cursor-pointer place-items-
end">
<a
href="#"
class="font-mullish font-bold text-lightBlue500
transition-all duration-200"
>Know More</a
>
<i
data-feather="chevron-right"
class="w-5 h-5 text-lightBlue500 transition-all
duration-200"
></i>
</div>
</div>
</div>
</div>
<!--demo-box-->
<div class="w-full items-center justify-evenly border border-
slate-700
mb-24 gap-y-6 relative rounded-md p-8 hidden md:flex md:flex-
col lg:flex-row lg:flex">
<p class="font-mullish text-white text-xl">Check out the
live demo to learn how RazorpayX works.
<span class="font-bold"> No sign-up required!</span>
</p>
<button
class="relative bg-lightBlue flex items-center
justify-start text-white py-[14px] px-[18px] md:pr-
[90px] rounded-md
font-mullish font-bold hover:bg-lightBlue500
transition-all duration-200">
Check out the demo
<div class="w-12 h-[60px] bg-greenLight absolute
right-6 skew-x-[20deg]
flex justify-center items-center">
<!--arrow-->
<svg
viewBox="0 0 24 24"
focusable="false"
class="w-[20px] h-[20px] -skew-x-[20deg] "
>
<path
fill="currentColor"
d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-
5.58 5.59L12 20l8-8z"
></path>
</svg>
</div>
</button>
</div>
</div>
</div>
</section>
<!--new feeatures -->
<section class="bg-white relative">
<div class="relative w-11/12 max-w-[1080px] mx-auto pt-4">
<img src="./Images/feature-section1-dottedrows.png" alt=""
class="absolute w-[233px] left-[300px] -top-[6rem] z-10">
<img src="./Images/feature-section1-dottedrows.png" alt=""
class="absolute w-[233px] -right-[3.5rem] -top-[6rem] z-10" >
<div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3
gap-y-10 gap-x-4 relative z-[100]">
<!--item 1-->
<div class="relative flex items-center z-0">
<h2
class="text-deepBlueHead font-mullish font-extrabold text-
4xl leading-[3.375rem]"
>New in the
<span class="text-lightBlue500">
Razorpay
</span> <br>
Product Suite
</h2>
</div>
<!--card 1-->
<div
class="p-10 bg-[url(/Images/instant-settlement-bg.svg)] w-full
max-h-[300px] cursor-pointer
bg-no-repeat hover:scale-105 transition-all duration-200
hover:bg-[url(/Images/instant-settlement-bghover.svg)]
bg-white" >
<img src="./Images/razorpayXicon.svg" alt=""
class="w-10 h-10">
<h3 class="font-mullish text-lg font-bold pt-4">Corporate
Cards</h3>
<p
class="font-mullish py-3 text-grayText leading-normal"
>Simplify your recurring, international and team expenses
with savings on every spend. Save upto 10 lacs every month.</p>
<div class="flex flex-row items-center cursor-pointer
group">
<a href=""
class="font-mullish font-bold text-lightBlue500 group-
hover:text-lightBlue
transition-all duration-200">Know More</a>
<i
data-feather="chevron-right"
class="w-5 h-5 text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"></i>
</div>
</div>
<!--card 2-->
<div
class="p-10 bg-[url(/Images/instant-settlement-bg.svg)] w-full
max-h-[300px] cursor-pointer
bg-no-repeat hover:scale-105 transition-all duration-200
hover:bg-[url(/Images/instant-settlement-bghover.svg)] bg-white"
>
<img src="./Images/razorpayXicon.svg" alt=""
class="w-10 h-10">
<h3 class="font-mullish text-lg font-bold pt-4">Corporate
Cards</h3>
<p
class="font-mullish py-3 text-grayText leading-normal"
>Simplify your recurring, international and team expenses
with savings on every spend. Save upto 10 lacs every month.</p>
<div class="flex flex-row items-center cursor-pointer
group">
<a href=""
class="font-mullish font-bold text-lightBlue500 group-
hover:text-lightBlue
transition-all duration-200">Know More</a>
<i
data-feather="chevron-right"
class="w-5 h-5 text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"></i>
</div>
</div>
<!--card 3-->
<div
class="p-10 bg-[url(/Images/instant-settlement-bg.svg)] w-full
max-h-[300px] cursor-pointer
bg-no-repeat hover:scale-105 transition-all duration-200
hover:bg-[url(/Images/instant-settlement-bghover.svg)] bg-white"
>
<img src="./Images/razorpayXicon.svg" alt=""
class="w-10 h-10">
<h3 class="font-mullish text-lg font-bold pt-4">Corporate
Cards</h3>
<p
class="font-mullish py-3 text-grayText leading-normal"
>Simplify your recurring, international and team expenses
with savings on every spend. Save upto 10 lacs every month.</p>
<div class="flex flex-row items-center cursor-pointer
group">
<a href=""
class="font-mullish font-bold text-lightBlue500 group-
hover:text-lightBlue
transition-all duration-200">Know More</a>
<i
data-feather="chevron-right"
class="w-5 h-5 text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"></i>
</div>
</div>
<!--card 4-->
<div
class="p-10 bg-[url(/Images/instant-settlement-bg.svg)] w-full
max-h-[300px] cursor-pointer
bg-no-repeat hover:scale-105 transition-all duration-200
hover:bg-[url(/Images/instant-settlement-bghover.svg)] bg-white"
>
<img src="./Images/razorpayXicon.svg" alt=""
class="w-10 h-10">
<h3 class="font-mullish text-lg font-bold pt-4">Corporate
Cards</h3>
<p
class="font-mullish py-3 text-grayText leading-normal"
>Simplify your recurring, international and team expenses
with savings on every spend. Save upto 10 lacs every month.</p>
<div class="flex flex-row items-center cursor-pointer
group">
<a href=""
class="font-mullish font-bold text-lightBlue500 group-
hover:text-lightBlue
transition-all duration-200">Know More</a>
<i
data-feather="chevron-right"
class="w-5 h-5 text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"></i>
</div>
</div>
<!--card 5-->
<div
class="p-10 bg-[url(/Images/instant-settlement-bg.svg)] w-full
max-h-[300px] cursor-pointer
bg-no-repeat hover:scale-105 transition-all duration-200
hover:bg-[url(/Images/instant-settlement-bghover.svg)] bg-white"
>
<img src="./Images/razorpayXicon.svg" alt=""
class="w-10 h-10">
<h3 class="font-mullish text-lg font-bold pt-4">Corporate
Cards</h3>
<p
class="font-mullish py-3 text-grayText leading-normal"
>Simplify your recurring, international and team expenses
with savings on every spend. Save upto 10 lacs every month.</p>
<div class="flex flex-row items-center cursor-pointer
group">
<a href=""
class="font-mullish font-bold text-lightBlue500 group-
hover:text-lightBlue
transition-all duration-200">Know More</a>
<i
data-feather="chevron-right"
class="w-5 h-5 text-lightBlue500
group-hover:text-grayBlue transition-all duration-
200"></i>
</div>
</div>
</div>
</div>
</section>
<!--core features-->
<section class="w-full bg-[url(/Images/core-features-sectionBg.svg)]
bg-no-repeat bg-cover bg-center mt-14 relative corefeaturesection">
<div class="relative w-11/12 max-w-[1080px] mx-auto pt-4">
<h2 class="font-mullish font-bold text-2xl text-center text-
white">Features</h2>
<div class="w-6 h-1 bg-greenLight mx-auto mt-4 mb-6"></div>
<p
class="font-mullish text-center max-w-[450px] text-white mx-auto"
>Empower your business with all the right tools to accept online
payments and provide the best customer experience</p>
<!--grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-
[2rem] mt-8">
<!--card1-->
<div>
<img src="./Images/instant-activation-icon.svg" alt=""
>
<h3 class="font-mullish text-white text-lg font-bold my-
4">Instant Activation</h3>
<p class="font-mullish text-white opacity-80">Get activated
and transact within 2 minutes. Completely online onboarding with minimum
documentation.</p>
</div>
<!--card2-->
<div>
<img src="./Images/instant-activation-icon.svg" alt=""
>
<h3 class="font-mullish text-white text-lg font-bold my-
4">Instant Activation</h3>
<p class="font-mullish text-white opacity-80">Get activated
and transact within 2 minutes. Completely online onboarding with minimum
documentation.</p>
</div>
<!--card3-->
<div>
<img src="./Images/instant-activation-icon.svg" alt=""
>
<h3 class="font-mullish text-white text-lg font-bold my-
4">Instant Activation</h3>
<p class="font-mullish text-white opacity-80">Get activated
and transact within 2 minutes. Completely online onboarding with minimum
documentation.</p>
</div>
<!--card4-->
<div>
<img src="./Images/instant-activation-icon.svg" alt=""
>
<h3 class="font-mullish text-white text-lg font-bold my-
4">Instant Activation</h3>
<p class="font-mullish text-white opacity-80">Get activated
and transact within 2 minutes. Completely online onboarding with minimum
documentation.</p>
</div>
<!--card5-->
<div>
<img src="./Images/instant-activation-icon.svg" alt=""
>
<h3 class="font-mullish text-white text-lg font-bold my-
4">Instant Activation</h3>
<p class="font-mullish text-white opacity-80">Get activated
and transact within 2 minutes. Completely online onboarding with minimum
documentation.</p>
</div>
<!--card6-->
<div>
<img src="./Images/instant-activation-icon.svg" alt=""
>
<h3 class="font-mullish text-white text-lg font-bold my-
4">Instant Activation</h3>
<p class="font-mullish text-white opacity-80">Get activated
and transact within 2 minutes. Completely online onboarding with minimum
documentation.</p>
</div>
<!--card7-->
<div>
<img src="./Images/instant-activation-icon.svg" alt=""
>
<h3 class="font-mullish text-white text-lg font-bold my-
4">Instant Activation</h3>
<p class="font-mullish text-white opacity-80">Get activated
and transact within 2 minutes. Completely online onboarding with minimum
documentation.</p>
</div>
<!--card8-->
<div>
<img src="./Images/instant-activation-icon.svg" alt=""
>
<h3 class="font-mullish text-white text-lg font-bold my-
4">Instant Activation</h3>
<p class="font-mullish text-white opacity-80">Get activated
and transact within 2 minutes. Completely online onboarding with minimum
documentation.</p>
</div>
</div>
</div>
</section>
<!--join razorpay section-->
<section class="bg-[#f5f8fe] relative pt-40 pb-12 -mt-[200px] -z-[100]">
<div class="w-11/12 max-w-[1080px] mx-auto relative flex flex-col md:flex-
row">
<!--left part -->
<div class="flex flex-col justify-center w-full md:max-w-[calc(100%-
500px)] sm:my-16">
<h2 class="font-mullish font-bold text-2xl text-deepBlueHead"
>Join the 50,00,000+ businesses using Razorpay
</h2>
<div class="w-6 h-1 bg-greenLight my-4 mb-10"></div>
<p class="font-mullish opacity-80">We make it easier for you to focus
on building great products while we work on simplifying your payments. Become
one of us by joining thousands of our happy users and simplify the online
payment experience for your customers.</p>
<p class="font-mullish mt-6 opacity-80">Focus on your business while
we handle the complexities of payments for you.
</p>
</div>
<!--right part-->
<div class="h-[500px] w-[500px] relative overflow-y-hidden mx-auto">
<div style="background: linear-gradient(180deg, #f4f8ff, #fff0)"
class="absolute w-full h-[150px] top-0 z-50"> </div>
<img src="./Images/comanies.png" alt=""
class="absolute h-auto object-cover companiesList">
<div style="background: linear-gradient(0deg, #f4f8ff, #fff0)"
class="absolute w-full h-[150px] bottom-0 z-50">
</div>
</div>
</div>
</section>
<!-- Testimonail Section -->
<section class="relative">
<div class="w-11/12 max-w-[1300px] mx-auto relative py-20">
<img src="./Images/feature-section1-dottedrows.png" alt=""
class="absolute w-[200px] top-[8rem] left-[2rem] -z-10">
<h2 class="font-mullish font-extrabold text-2xl text-deepBlueHead text-
center">An Experience
<br>People Love to Talk About</h2>
<div class="w-6 h-1 bg-greenLight mx-auto my-4"></div>
<!--left button -->
<button class="w-[100px] h-[100px] bg-[#f4f8ff] rounded-full absolute
left-0 top-1/2
flex justify-center items-center ">
<div class="w-[65%] h-[65%] bg-[#f4f8ff] rounded-full flex justify-
center items-center
mix-blend-multiply">
<i
data-feather="chevron-right"
class="stroke-[5px] w-6 h-6 text-gray-400 rotate-180"
></i>
</div>
</button>
<!--right button -->
<button class="w-[100px] h-[100px] bg-[#f4f8ff] rounded-full absolute
right-0 top-1/2
flex justify-center items-center ">
<div class="w-[65%] h-[65%] bg-[#f4f8ff] rounded-full flex justify-
center items-center
mix-blend-multiply">
<i
data-feather="chevron-right"
class="stroke-[5px] w-6 h-6 text-gray-400"
></i>
</div>
</button>
<!-- main content -->
<div class="flex flex-col xl:flex-row max-w-[960px] items-center mx-auto
my-20 space-x-[10rem]">
<!--left image -->
<img src="./Images/testimonial.jpg" alt=""
height="320px"
width="320px"
class="rounded-xl">
<!-- riught part-->
<div class="max-w-[400px] flex flex-col">
<img src="./Images/quotes.svg" alt=""
width="35px"
height="40px"
class="-mb-2 xl:order-1">
<p class="font-mullish text-3xl font-extralight xl:order-1">
Readymade Closed Wallet Solution For Quick Refunds</p>
<a href="#" class="text-grayText italic underline xl:order-1">Learn
More</a>
<p class="font-mullish font-extrabold text-2xl -order-1 xl:order-
1">Lorem Ipsum</p>
<p class="font-mullish font-medium xl:order-1">CEO, XYZ Engineering
Company</p>
<img src="./Images/fake-company-logo.png" alt="" width="80px"
height="40px" class=" xl:order-1">
</div>
</div>
<!-- 6 dot wala div-->
<div class="w-full flex flex-row mx-auto space-x-2 justify-center">
<!--dot 1-->
<div class="h-[10px] w-[10px] bg-gray-300 rounded-full"></div>
<div class="h-[10px] w-[10px] bg-lightBlue300 rounded-full"></div>
<div class="h-[10px] w-[10px] bg-gray-300 rounded-full"></div>
<div class="h-[10px] w-[10px] bg-gray-300 rounded-full"></div>
<div class="h-[10px] w-[10px] bg-gray-300 rounded-full"></div>
<div class="h-[10px] w-[10px] bg-gray-300 rounded-full"></div>
</div>
</div>
</section>
<!--CTA-->
<section class="bg-[url(/Images/CTABg.svg)] w-full h-full bg-no-repeat bg-
cover relative ctaSection min-h-[510px]">
<!--main content box-->
<div class="w-11/12 max-w-[1080px] relative flex flex-row items-center mx-
auto justify-between space-x-20 pt-16">
<!--left part-->
<div class="flex flex-col gap-5 mt-12 max-w-[600px]">
<h2 class="font-mullish font-bold text-2xl text-white">Supercharge
your business with Razorpay</h2>
<div class="w-6 h-1 bg-greenLight"></div>
<p class="font-mullish text-white">Sign up now to experience the
future of payments and offer <br> your customers the best checkout
experience.</p>
<ul class="flex flex-row flex-wrap gap-x-11 text-white gap-y-3">
<li class="font-mullish text-white flex flex-row ">
<i data-feather="check" class="text-greenLight"></i>
<span>Quick Onboarding
</span>
</li>
<li class="font-mullish text-white flex flex-row ">
<i data-feather="check" class="text-greenLight"></i>
<span>Access to entire product suite
</span>
</li >
<li class="font-mullish text-white flex flex-row ">
<i data-feather="check" class="text-greenLight"></i>
<span>API access
</span>
</li>
<li class="font-mullish text-white flex flex-row ">
<i data-feather="check" class="text-greenLight"></i>
<span>24x7 support
</span>
</li>
</ul>
<button
class="min-w-[32px] font-mullish text-sm font-bold bg-white text-
lightBlue300 border flex
rounded-sm items-center hover:text-lightBlue500 transition-all
duration-200 py-3 px-4 place-self-start">
Sign Up
<svg
viewBox="0 0 24 24"
focusable="false"
class="w-[14px] h-[14px] ml-3"
>
<path
fill="currentColor"
d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
></path>
</svg>
</button>
</div>
<!--right side wali image-->
<img src="./Images/ctaImg.svg" alt="" width="240px" height="282px"
class="mt-16 pt-3 hidden lg:block">
</div>
</section>
</div>
<!-- --------------------------------
Footer-------------------------------- -->
<footer
style="background: linear-gradient(to right, #eef9fe, #edf7ff)"
class="-mt-[400px] md:-mt-[300px]"
>
<div
class="w-10/12 pt-[400px] pb-10 md:pt-[350px] md:my-0 md:w-11/12 max-w-
[1080px] mx-auto flex flex-col space-y-6 lg:space-y-0 lg:space-x-4 lg:flex-row
justify-between"
>
<!-- column - 1 -->
<div class="flex flex-col md:max-w-[340px] lg:max-w-[260px]">
<img
src="/Images/logo-dark.svg"
loading="lazy"
width="120px"
height="24px"
/>
<p class="text-sm text-grayText my-3 font-mullish">
Razorpay is the only payments solution in India that allows
businesses to accept, process and disburse payments with its product
suite. It gives you access to all payment modes including credit
card, debit card, netbanking, UPI and popular wallets including
JioMoney, Mobikwik, Airtel Money, FreeCharge, Ola Money and PayZapp.
</p>
<p class="text-sm text-grayText my-3 font-mullish">
RazorpayX supercharges your business banking experience, bringing
effectiveness, efficiency, and excellence to all financial
processes. With RazorpayX, businesses can get access to
fully-functional current accounts, supercharge their payouts and
automate payroll compliance.
</p>
<p class="text-sm text-grayText my-3 font-mullish">
Manage your marketplace, automate bank transfers, collect recurring
payments, share invoices with customers and avail working capital
loans - all from a single platform. Fast forward your business with
Razorpay.
</p>
<p class="text-[0.625rem] text-grayText my-3 font-mullish">
Disclaimer: The RazorpayX powered Current Account and VISA corporate
credit card are provided by RBI licensed banks. Your RazorpayX
powered account is provided by our partner bank, in accordance with
RBI regulations. RazorpayX itself is not a bank and doesn't hold or
claim to hold a banking license.
</p>
<p class="font-mullish uppercase font-bold text-gray2">
Subscribe to our newsletter
</p>
<form class="relative bg-white w-[260px] mt-2 mb-4">
<input
placeholder="Your email address"
class="pr-16 font-mullish border-gray-300 outline-lightBlue
focus:outline-lightBlue placeholder:text-sm py-2 px-4 border rounded-sm
transition-all duration-200"
/>
<button
class="h-[90%] bg-white absolute right-[1.5px] top-1/2 -translate-
y-1/2 z-10 font-mullish text-sm font-bold text-lightBlue300 flex rounded-sm
items-center hover:text-lightBlue500 transition-all duration-200"
>
Subscribe
<svg
viewBox="0 0 24 24"
focusable="false"
class="w-[14px] h-[14px] ml-3"
>
<path
fill="currentColor"
d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
></path>
</svg>
</button>
</form>
<div class="flex items-start space-x-4">
<img
src="/Images/footer-certificate-1.png"
loading="lazy"
width="92"
height="40"
class="cursor-pointer"
/>
<img
src="/Images/footer-certificate-2.jpg"
loading="lazy"
width="122"
height="80"
class="cursor-pointer"
/>
</div>
</div>
<!-- column - 2 -->
<div
class="flex flex-col space-y-4 md:space-y-0 md:flex-row md:space-x-4
justify-between"
>
<!-- sub column - 1 -->
<div class="space-y-3">
<div>
<p class="font-mullish uppercase font-bold text-gray2 mb-1">
BANKING PLUS
</p>
<ul class="space-y-2">
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>RazorpayX</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Current Accounts</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Payouts</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Payout Links</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Corporate Credit Card</a
>
</li>
<li>
<a
href="#"
class="relative font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>
View Live Demo
<span
class="text-white font-mullish uppercase bg-green-500
rounded-sm text-xs font-bold p-1"
>New</span
>
</a>
</li>
</ul>
</div>
<div>
<p class="font-mullish uppercase font-bold text-gray2 mb-1">
LENDING
</p>
<ul class="space-y-2">
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Razorpay Capital</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Instant Settlements</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Working Capital Loans</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Marketplace Instant Settlements</a
>
</li>
</ul>
</div>
<div>
<p class="font-mullish uppercase font-bold text-gray2 mb-1">
RISK & FRAUD
</p>
<ul class="space-y-2">
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Thirdwatch</a
>
</li>
<li>
<a
href="#"
class="relative font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>
PrePay CoD
<span
class="text-white font-mullish uppercase bg-green-500
rounded-sm text-xs font-bold p-1"
>New</span
>
</a>
</li>
</ul>
</div>
<div>
<p class="font-mullish uppercase font-bold text-gray2 mb-1">
BECOME A PARTNER
</p>
<ul class="space-y-2">
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Refer and Earn</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>
Onboarding APIs
</a>
</li>
</ul>
</div>
<div>
<p class="font-mullish uppercase font-bold text-gray2 mb-1">
MORE
</p>
<ul class="space-y-2">
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Route</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Invoices</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Freelancer Payments</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>International</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Flash Checkout</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>UPI</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>ePOS</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Checkout Demo</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>RazorpayX Payroll</a
>
</li>
</ul>
</div>
</div>
<!-- sub column - 2 -->
<div class="space-y-3">
<div>
<p class="font-mullish uppercase font-bold text-gray2 mb-1">
ACCEPT PAYMENTS
</p>
<ul class="space-y-2">
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Payment Gateway</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Payment Pages</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Payment Links</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>QR Codes</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Subscriptions</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>
Smart Collect
</a>
</li>
</ul>
</div>
<div>
<p class="font-mullish uppercase font-bold text-gray2 mb-1">
DEVELOPERS
</p>
<ul class="space-y-2">
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Docs</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Integrations</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>API Reference</a
>
</li>
</ul>
</div>
<div>
<p class="font-mullish uppercase font-bold text-gray2 mb-1">
RESOURCES
</p>
<ul class="space-y-2">
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Blog</a
>
</li>
<li>
<a
href="#"
class="relative font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>
Customer Stories
</a>
</li>
<li>
<a
href="#"
class="relative font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>
Events
</a>
</li>
<li>
<a
href="#"
class="relative font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>
Chargeback Guide
</a>
</li>
<li>
<a
href="#"
class="relative font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>
Settlement Guide
</a>
</li>
</ul>
</div>
<div>
<p class="font-mullish uppercase font-bold text-gray2 mb-1">
SOLUTIONS
</p>
<ul class="space-y-2">
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Education</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>
E-commerce
</a>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>
Saas
</a>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>
BFSI
</a>
</li>
</ul>
</div>
<div>
<p class="font-mullish uppercase font-bold text-gray2 mb-1">
FREE TOOLS
</p>
<ul class="space-y-2">
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>GST Calculator</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Online TDS Payment</a
>
</li>
<li>
<a
href="#"
class="relative font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>
GST Number Search
<span
class="text-white font-mullish uppercase bg-green-500
rounded-sm text-xs font-bold p-1"
>New</span
>
</a>
</li>
</ul>
</div>
</div>
<!-- sub column - 3 -->
<div>
<div>
<p class="font-mullish uppercase font-bold text-gray2 mb-1">
COMPANY
</p>
<ul class="space-y-2">
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>About Us</a
>
</li>
<li>
<a
href="#"
class="font-mullish relative font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Careers
<span
class="text-white font-mullish bg-green-500 rounded-sm
text-xs font-bold p-1"
>We're hiring!</span
>
</a>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Terms of Use</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Privacy Policy</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Grievance Redressal</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>
Responsible Disclosure
</a>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>
Partners
</a>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>
White Papers
</a>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>
Corporate Information
</a>
</li>
</ul>
</div>
<div>
<p class="font-mullish uppercase font-bold text-gray2 mb-1 mt-3">
HELP & SUPPORT
</p>
<ul class="space-y-2">
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Support</a
>
</li>
<li>
<a
href="#"
class="font-mullish font-medium text-lightBlue500
hover:text-grayBlue transition-all duration-200"
>Knowledge base</a
>
</li>
</ul>
</div>
<div>
<p class="font-mullish uppercase font-bold text-gray2 mb-1 mt-6">
FIND US ONLINE
</p>
<ul class="flex space-x-4 items-center mt-4">
<li class="cursor-pointer">
<a>
<img
src="/Images/facebook-icon.svg"
width="24"
height="24"
loading="lazy"
/>
</a>
</li>
<li class="cursor-pointer">
<a>
<img
src="/Images/twitter-icon.svg"
width="24"
height="24"
loading="lazy"
/>
</a>
</li>
<li class="cursor-pointer">
<a>
<img
src="/Images/instagram-icon.svg"
width="24"
height="24"
loading="lazy"
/>
</a>
</li>
<li class="cursor-pointer">
<a>
<img
src="/Images/github-icon.svg"
width="24"
height="24"
loading="lazy"
/>
</a>
</li>
<li class="cursor-pointer">
<a>
<img
src="/Images/linkedin-icon.svg"
width="24"
height="24"
loading="lazy"
/>
</a>
</li>
</ul>
</div>
<div>
<p class="font-mullish uppercase font-bold text-gray2 mb-1 mt-6">
REGD. OFFICE ADDRESS
</p>
<p class="font-mullish text-sm mt-4 whitespace-nowrap">
Razorpay Software Private Limited, <br />1st Floor, SJR Cyber,
<br />22 Laskar Hosur Road, Adugodi, <br />Bengaluru, 560030,
<br />Karnataka, India <br />CIN: U72200KA2013PTC097389
</p>
<div class="font-mullish mt-6">
<p class="text-sm">© Razorpay 2022</p>
<p class="text-sm">All Rights Reserved</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<script>
feather.replace()
</script>
</body>
</html>
7.SYSTEM TESTING
System testing is a crucial phase in the software development life cycle that focuses on
evaluating the entire integrated system to ensure that it meets specified requirements and
functions as intended. This comprehensive testing process is performed after unit and
integration testing and aims to validate the system's compliance with both functional and
non-functional requirements.
Objectives of System Testing:
Functional Validation:
Verify that the system functions according to the specified requirements.
Confirm that all features and functionalities operate as expected and meet user needs.
Integration Verification:
Ensure seamless communication and interaction between integrated components.
Validate that data flows smoothly across different modules of the system.
Performance Testing:
Evaluate system performance under varying conditions, such as different loads and usage
scenarios.
Assess response times, throughput, and resource utilization to identify and address
performance bottlenecks.
Security Assessment:
Identify vulnerabilities and assess the system's resistance to security threats.
Conduct penetration testing to ensure the system's robustness against potential attacks.
Usability Testing:
Assess the user interface (UI) and overall user experience (UX) for intuitiveness and ease of
use.
Verify that user interactions align with design specifications and are free of major usability
issues.
Compatibility Testing:
Confirm that the system operates correctly across various environments, platforms, and
devices.
Ensure compatibility with different browsers, operating systems, and hardware
configurations.
Reliability Testing:
Evaluate the system's ability to perform consistently over an extended period.
Verify that the system can recover gracefully from failures and errors.
Scalability Testing:
Assess the system's ability to handle increasing loads and data volumes.
Determine whether the system can scale horizontally or vertically as needed.
Regression Testing:
Ensure that new changes or enhancements do not adversely affect existing functionalities.
Re-run previously executed test cases to verify the system's stability after updates.
7.1 Preparing of Test Data
Preparing for data testing involves ensuring that the data used in your system or application
is accurate, consistent, and meets the specified requirements. Data testing is crucial for
validating the integrity, reliability, and quality of the data stored and processed by your
software. Below are steps to help you prepare for data testing:
Understand Data Requirements:
Gain a clear understanding of the data requirements for your system. This includes the type
of data, data formats, data sources, and any constraints or business rules associated with
the data.
Data Profiling:
Conduct data profiling to analyze and understand the characteristics of the data. This
includes identifying data types, checking for missing values, assessing data distributions, and
understanding data relationships.
Define Test Scenarios:
Based on the identified data requirements, define specific test scenarios that cover a range
of cases. This may include testing for data accuracy, completeness, consistency, validity, and
conformity to defined standards.
Data Generation:
Create realistic and diverse datasets for testing purposes. Ensure that the generated data
covers various scenarios, including edge cases and potential outliers. This is especially
important if you are testing functionalities like data validation and transformation.
Data Setup:
Set up the test environment with the required data. Ensure that the test data represents
both typical and extreme use cases. For databases, consider using scripts or tools to
populate tables with test data.
Data Masking and Anonymization:
If dealing with sensitive or private information, implement data masking or anonymization
techniques to protect sensitive data during testing. This is crucial for compliance with data
privacy regulations.
Data Quality Tools:
Utilize data quality tools to automate the detection of anomalies, inconsistencies, or errors
in the data. These tools can assist in identifying issues that may not be apparent through
manual inspection.
Data Integration Testing:
If your system involves data integration with external systems or sources, perform
integration testing to ensure smooth data flow and consistency across different data
sources.
Data Validation:
Implement data validation checks within your application to ensure that incoming data
meets specified criteria. This includes validating data types, ranges, and adherence to
predefined business rules.
Data Cleanup:
Perform data cleanup before testing to remove any residual test data from previous test
cycles. This ensures a clean and isolated environment for each testing iteration.
Backup and Restore Procedures:
Establish backup and restore procedures to safeguard production data. This is crucial in case
any issues arise during testing that may affect the integrity of the data.
Collaboration with Stakeholders:
Collaborate with stakeholders, including data owners and subject matter experts, to ensure
that the test scenarios align with business objectives and data quality expectations.
Documentation:
Document test scenarios, expected outcomes, and any issues discovered during data
testing. This documentation will be valuable for reporting and future reference.
Data Governance:
Ensure that data governance policies and practices are followed. This includes adhering to
data management standards, data ownership, and ensuring data is treated as a valuable
organizational asset.
8. SYSTEM IMPLEMENTATION
System implementation Maintenance and Review As we know, creating software is one
thing and the implementation of the created software is another. The process of implement
software is much difficult as compared to the task of creating the project. First we have
toimplement the software on a small scale for removing the bugs and other errors in the
projectand after removing them we can implement the software on a large scale. Before we
think nterms of implementing the software on a large basis.we must consider the hardware
requirements. Whenever we desktop software or project a certain hardware and software is
being used bythe programmer for developing the project, The hardware and software to be
used by the programmer for developing the project should be such that it would result in
the development of project, which would satisfy all the basis needs for which the project
has been created by the programmer. The Hardware should be such that cost constraints of
the Client should also be taken into account without affecting the performance.
8.1 Hardware Evaluation Factors
Hardware evaluation factors encompass a range of considerations crucial for assessing the efficiency,
reliability, and suitability of hardware components within a system or infrastructure. These factors
revolve around key aspects such as performance, scalability, reliability, compatibility, and cost-
effectiveness. Performance evaluation entails scrutinizing factors like processing speed, memory
capacity, and data transfer rates to ensure they meet the system's requirements for optimal
functionality. Scalability examines the hardware's ability to accommodate increased workload or
user demands over time without significant performance degradation. Reliability assesses the
hardware's durability, stability, and failure rates under varying conditions to ensure uninterrupted
operation. Compatibility analysis delves into the hardware's integration capabilities with existing
systems, software, or peripherals. Cost-effectiveness involves evaluating the hardware's upfront
costs, maintenance expenses, and long-term value proposition concerning the system's needs and
budget constraints. Overall, a comprehensive evaluation of hardware factors is essential for
informed decision-making, ensuring the chosen hardware aligns with the system's performance,
growth potential, and budgetary considerations.
8.2 Software Evaluation Factors
Software evaluation factors encompass a spectrum of critical considerations that assess the
efficiency, functionality, and compatibility of software solutions within a given environment. These
factors encompass aspects such as functionality, usability, performance, security, scalability, and
cost-effectiveness. Functionality evaluation involves scrutinizing whether the software meets
specified requirements, offering the desired features and capabilities to fulfil user needs. Usability
assesses the software's user interface, ease of navigation, intuitiveness, and overall user experience.
Performance evaluation involves analysing the software's speed, responsiveness, and resource
utilization under varying conditions to ensure optimal operation. Security considerations examine
the software's robustness against potential vulnerabilities, threats, and data breaches, emphasizing
data protection and user privacy. Scalability assesses the software's ability to adapt and
accommodate increased workload or user demands without compromising performance.
9. DOCUMENTATION
Documentation in software development is a multifaceted process encompassing various
aspects crucial for understanding, implementing, and maintaining a system. This includes
requirements documentation, delineating the functional and non-functional aspects of the
software. The system architecture documentation provides an overview of high-level
components and their interactions. Design documentation details technical decisions, while
code documentation enhances code readability. Test documentation encompasses plans,
cases, and results, ensuring the software meets specified requirements. User
documentation offers guidance for end-users, and release notes outline changes in each
software release. Deployment documentation guides operations teams, API documentation
details interfaces, and project management documentation includes plans and progress
reports. Security documentation outlines implemented measures, and maintenance and
support documentation aids troubleshooting and ongoing system stability. Thorough and
well-maintained documentation is integral for effective collaboration, problem-solving, and
ensuring the longevity of the software.
9.1 Operational Document
Operational documentation provides a comprehensive guide for the day-to-day operations,
maintenance, and support of a system, ensuring efficient functionality and troubleshooting.
This documentation is crucial for operations teams, administrators, and support staff. It
typically covers the following aspects:
1. Introduction
2. Key Contacts
3. Website Overview
4. Front-End Architecture
5. Content Management
6. Design Guidelines
7. Responsiveness and Cross-Browser Compatibility
8. Accessibility
9. Performance Optimization
10. Feature Integration
11. Version Control
12. Testing Procedures
13. Troubleshooting
14. Documentation
15. Change Management
16. Training
17. Contact Information
9.2 User Manual
A user manual is a comprehensive guide designed to assist end-users in effectively
navigating and utilizing a software application. The manual provides step-by-step
instructions, explanations, and troubleshooting tips to ensure a smooth user experience.
Below is a general outline for creating a user manual:
Title Page:
Include the title of the user manual, version number, and the software/application name.
You may also include the publication date and any relevant contact information for support.
Table of Contents:
List the main sections and subsections of the manual with corresponding page numbers for
easy navigation.
1. Introduction:
Provide an overview of the software/application.
Specify the target audience for the user manual.
2. System Requirements:
Outline the hardware and software prerequisites necessary to run the application.
Include any dependencies or compatibility considerations.
3. Installation:
Step-by-step instructions for installing the software.
Include screenshots or diagrams if applicable.
Troubleshooting tips for common installation issues.
4. Getting Started:
Basic orientation on the user interface.
Step-by-step guide for initial setup.
Introduction to key features.
5. User Account Management:
Instructions for creating, modifying, and deleting user accounts.
Password reset procedures.
6. Main Features:
Detailed instructions for using each major feature of the software.
Tips and best practices for efficient utilization.
7. Advanced Features (if applicable):
In-depth explanations for advanced functionalities.
Tips for power users.
8. Customization Options:
Guidance on how users can personalize settings or configurations.
Any customization limitations or considerations.
9. Troubleshooting:
Common issues and solutions.
Frequently asked questions (FAQs).
Contact information for customer support.
10. Glossary:
Define key terms and acronyms used throughout the manual.
11. Appendices:
Any additional reference materials, charts, or diagrams.
Legal and compliance information if necessary.
12. Index:
An alphabetical index for quick reference.
13. Acknowledgments:
Recognize contributors or organizations involved in the development of the software.
14. Revision History:
Document changes made in different versions of the user manual.
15. Closing Note:
Express appreciation to users for choosing the software.
Encourage feedback and suggestions for improvement.
10. CONCLUSION
As of my last knowledge update in January 2022, Razorpay is a popular payment gateway
and financial technology company based in India. They provide solutions for online
payments, including a range of services such as payment gateway integration, subscription
billing, and online invoicing.
If you're referring to a specific Razorpay mobile application, it's important to note that the
features and functionalities of the app may vary based on updates and releases. Typically,
payment gateway apps like Razorpay's would allow merchants and businesses to manage
transactions, view analytics, and access various tools related to online payments.
For the most accurate and up-to-date information about the Razorpay app, including its
features, capabilities, and any recent updates, I recommend checking the official Razorpay
website or contacting Razorpay's customer support. Additionally, you can check the
respective app stores (Google Play Store for Android or Apple App Store for iOS) for the
latest version and features of the Razorpay mobile application.
11.SCOPE OF THE PROJECT
The scope of the Razorpay website project encompasses the development and maintenance
of a robust online platform that serves as a gateway for seamless and secure digital
payments. The primary objective is to provide users with a user-friendly interface for
conducting online transactions, leveraging the cutting-edge technology and features offered
by Razorpay. Key deliverables include an intuitive website layout, responsive design, and
integration with Razorpay's secure payment gateway.
The website will showcase essential information about Razorpay's services, including
detailed explanations of various payment solutions, pricing structures, and integration
options for businesses. Additionally, the website will feature a secure user portal where
businesses can access transaction history, analytics, and manage their payment settings.
11.1 Deficiencies
Identifying and addressing deficiencies in a Razorpay project is essential to uphold the high
standards expected in online payment solutions. One potential deficiency could be
insufficient clarity or completeness in the documentation provided to users and developers,
leading to challenges in understanding and implementing Razorpay's services. Addressing
this deficiency involves regularly updating and enhancing documentation to ensure it aligns
with the evolving features and capabilities of Razorpay.
Another potential deficiency might stem from user experience issues within the Razorpay
interface, impacting the ease with which users navigate the payment process. To mitigate
this, continual user testing and feedback mechanisms are crucial to identify and address any
usability challenges promptly, ensuring a seamless payment experience.
11.2 Further Scope
Razorpay Payment App, built with HTML and Tailwind CSS, envisions future enhancements:
• Further optimization of the user interface using Tailwind CSS utilities.
• Integration of additional payment features while maintaining the simplicity of HTML
structure.
• Responsive design improvements for a better user experience on various devices.
• Establish a foundation for potential future development, creating a stepping stone for
incorporating server-side logic, dynamic interactions, and integrating the full spectrum of
Razorpay features.
By pursuing these objectives, the Razorpay Clone project aims to offer a valuable learning
experience, showcasing the capabilities of HTML and Tailwind CSS in creating a static
representation of a payment gateway.Hardware and Software Requirement specifications.
12. REFERENCES
1. Mohammad Islam, Associate Professor Department of Computer Science, Maulana Azad
University, Jodhpur
2. https//:fontawesom.com
3. https//:google.com
4. https//:bootstrapt.com
5. https//:royalrajasthantour.net
6. https//:wikipedia.org
7. https//:lucidchart.com
8. https//:chat.openai.com
9. https//:bard.google.com
You might also like
- Python Synopsis For Ecommerce Food Products Sales Forecasting SystemNo ratings yetPython Synopsis For Ecommerce Food Products Sales Forecasting System8 pages
- Worldwide Public Cloud Services Spending Guide: Markets CoveredNo ratings yetWorldwide Public Cloud Services Spending Guide: Markets Covered2 pages
- Prisoner Face Detecting System A Java Project.100% (2)Prisoner Face Detecting System A Java Project.138 pages
- Railway Ticket Reservation System - FinalNo ratings yetRailway Ticket Reservation System - Final58 pages
- Computer-Shop-Management-System Non-CompleteNo ratings yetComputer-Shop-Management-System Non-Complete29 pages
- Bike Showroom Management System: A Project Report ONNo ratings yetBike Showroom Management System: A Project Report ON87 pages
- Supermarket-Billing-System-major ProjectNo ratings yetSupermarket-Billing-System-major Project82 pages
- A Project Report Software Student Data Management System: Central Board of Secondary Education, New DelhiNo ratings yetA Project Report Software Student Data Management System: Central Board of Secondary Education, New Delhi32 pages
- Final Year Project Report Laptop Sales System A Report Submitted in Partial Fulfillment of The Degree ofNo ratings yetFinal Year Project Report Laptop Sales System A Report Submitted in Partial Fulfillment of The Degree of39 pages
- Courier Management System Project ReportNo ratings yetCourier Management System Project Report58 pages
- Gift shop management system - Divyansh tiwariNo ratings yetGift shop management system - Divyansh tiwari30 pages
- Python Project Online Health Management System ReportNo ratings yetPython Project Online Health Management System Report11 pages
- WTL Mini Project ON: Online Food Ordering SystemNo ratings yetWTL Mini Project ON: Online Food Ordering System27 pages
- Computer Shop Management System AbstractNo ratings yetComputer Shop Management System Abstract2 pages
- Online Book Store Management System SynophsisNo ratings yetOnline Book Store Management System Synophsis18 pages
- Toaz - Info Restaurant Management System Project Report PRNo ratings yetToaz - Info Restaurant Management System Project Report PR27 pages
- A Project Report ON: "Deparmental Storage Management System "No ratings yetA Project Report ON: "Deparmental Storage Management System "19 pages
- Furniture Shop Management System Python ProjectNo ratings yetFurniture Shop Management System Python Project55 pages
- Project Report Vehicle Management SystemNo ratings yetProject Report Vehicle Management System132 pages
- Software Testing Interview Questions You'll Most Likely Be AskedFrom EverandSoftware Testing Interview Questions You'll Most Likely Be AskedNo ratings yet
- Accelerated DevOps with AI, ML & RPA: Non-Programmer’s Guide to AIOPS & MLOPSFrom EverandAccelerated DevOps with AI, ML & RPA: Non-Programmer’s Guide to AIOPS & MLOPS5/5 (2)
- Java / J2EE Interview Questions You'll Most Likely Be AskedFrom EverandJava / J2EE Interview Questions You'll Most Likely Be AskedNo ratings yet
- Individual Assignment - UDP and Prototyping Wireframes (Lovish Kumar Sharma)No ratings yetIndividual Assignment - UDP and Prototyping Wireframes (Lovish Kumar Sharma)19 pages
- 6 - Completing The Puzzle For Digital Transformation at Northrop Grumman - 042753No ratings yet6 - Completing The Puzzle For Digital Transformation at Northrop Grumman - 04275311 pages
- Yukon National Bank Deposit Slip - Free Printable Template - CheckDeposit - IoNo ratings yetYukon National Bank Deposit Slip - Free Printable Template - CheckDeposit - Io1 page
- Paolo (Paul) Cappucci Drupal Web Developer - Silver Spring, MD 20902 - Years of ExperienceNo ratings yetPaolo (Paul) Cappucci Drupal Web Developer - Silver Spring, MD 20902 - Years of Experience4 pages
- ZKTeco Master Product Catalogue 2020 - Compressed PDFNo ratings yetZKTeco Master Product Catalogue 2020 - Compressed PDF114 pages
- Process Modeling Process Improvement and ERP Implementation100% (1)Process Modeling Process Improvement and ERP Implementation2 pages
- Reading Sample Sappress 1456 Concur Travel and Expense Management With SAPNo ratings yetReading Sample Sappress 1456 Concur Travel and Expense Management With SAP25 pages
- Week 02 - 3 - Introducing Agile, Scrum, XP, and KanbanNo ratings yetWeek 02 - 3 - Introducing Agile, Scrum, XP, and Kanban38 pages
- Quantitative Research Proposal Report On Analysis of Software AutomationNo ratings yetQuantitative Research Proposal Report On Analysis of Software Automation11 pages
- Transfer of Processes: Index Modification Description DateNo ratings yetTransfer of Processes: Index Modification Description Date8 pages
