Skip to content

sujata / advithconsulting.io-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit c76bf40a by sneha-khedekar
Options

cfo page

1 parent a578dc2e
Inline Side-by-side
Showing 10 changed files with 483 additions and 19 deletions
container/ClientServicing/CFO/CfoPage.js 0 → 100644
import React from "react";
import PageBanner from "@/components/reuseables/PageBanner";
import Cfoservice from "./Cfoservice";
import Methods from "./Methods";
const banners = [
{
imageSrc: "/images/page-title-bg.jpg",
pageTitle: "Client Servicing - CFO ",
homePageUrl: "/",
homePageText: "Home",
activePageText: "CFO",
},
// Add more banners as needed
];
const CfoPage = () => {
return (
<>
<PageBanner banners={banners} />
<Cfoservice />
<Methods />
</>
);
};
export default CfoPage;
container/ClientServicing/CFO/Cfoservice.js 0 → 100644
import Heading from "@/components/reuseables/Heading";
import Link from "next/link";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import Image from "next/image";
import { motion } from "framer-motion";
import { fadeIn, slideFromLeft } from "@/components/reuseables/variants";
const CFOData = [
{
id: 1,
subtitle: "Client Servicing",
title: "Client Servicing - CFO ",
paragraphs: [
"FC & CFO Services at Advith Consulting LLP brings together specialists at different functional layers enabling finance operations in your organisation to function in an efficient manner. Depending upon the requirement of the business, our areas of focus range from streamling routine finance operations to ensuring compliances including taxation and corporate law and even to strategic, business finance & assurance, to provide a holistic approach to financial management. ",
],
imageSrc: "/images/about/people.jpg",
imageAlt: "image",
},
// Add more objects here if you have more content sections
];
const aboutcfo = [
{
title: "About FC & CFO Services",
subtitle: "lorem",
description:
"The significance and role of a finance function in an organisation depends on multiple factors including the vision of the management, nature of business, scale of operations & status of funding among others. At Advith Consulting, we offer FC & CFO Services upon careful evaluation of the requirement of your business. Our role as FC's and CFO's will be to act as enablers in moving from data entry and reporting merely as a compliance to a mechanism wherein we bring together insightful data analysis and financial expertise to offer actionable insights to the leadership team",
},
];
const Cfoservice = () => {
return (
<>
<div className="what-we-do-area ptb-100">
<Container>
{CFOData.map((item) => (
<Row className="align-items-center" key={item.id}>
<Col lg={6} md={12}>
<div className="what-we-do-text">
<span className="sub-title">{item.subtitle}</span>
<Heading el="h2" heading={item.title} className="h2" />
{item.paragraphs.map((paragraph, index) => (
<p key={index}>{paragraph}</p>
))}
</div>
</Col>
<Col lg={6} md={12}>
<div className="what-we-do-img">
<motion.div
variants={fadeIn(0.4)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<Image
src={item.imageSrc}
alt={item.imageAlt}
layout="fill"
className="img-fluid image"
/>
</motion.div>
</div>
</Col>
</Row>
))}
</Container>
</div>
<div className="about-cfo pb-100">
<Container>
<Row className="align-items-center">
<Col lg={6} md={12}>
<div className="call-back-request-img">
<motion.div
variants={slideFromLeft(0.5)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.4 }}
>
<Image
src="/images/home/knowledge.png"
layout="fill"
className="img-fluid image"
alt="image"
/>
</motion.div>
</div>
</Col>
<Col lg={6} md={12}>
<div className="call-back-request-text">
<span className="sub-title">{aboutcfo[0].subtitle}</span>
<Heading el="h2" heading={aboutcfo[0].title} />
<p>{aboutcfo[0].description}</p>
</div>
</Col>
</Row>
</Container>
</div>
</>
);
};
export default Cfoservice;
container/ClientServicing/CFO/Methods.js 0 → 100644
import Heading from "@/components/reuseables/Heading";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import { motion } from "framer-motion";
import { slideFromLeft } from "@/components/reuseables/variants";
import Image from "next/image";
const MethodOne = [
{
title: "FC & CFO Services",
subtitle: "Methodology 1 - How we do it? ",
description:
"A typical finance function in an organization is structured in the manner of a pyramid with the executors at the base and strategic decision making at the pinnacle. Each layer has incremental responsibilities which are all aligned to the organization’s vision. The pyramid of finance operations is a testament to structured efficiency. Each layer signifies a distinct function, essential to the integrity of the whole. ",
},
];
const MethodTwo = [
{
number: "01",
icon: "ri-briefcase-line",
title: "Discovery",
descr:
"Understand the business of the entity & identify the requirements of the entity with ",
},
{
number: "02",
icon: "ri-money-dollar-box-line",
title: "Analysis of Historical Data ",
descr: "Analyze past financial data to uncover trends and obtain insights",
},
{
number: "03",
icon: "ri-briefcase-line",
title: " Set Up",
descr: "Establishing the Modus Operandi of the finance function",
},
{
number: "04",
icon: "ri-money-dollar-box-line",
title: "Execution",
descr: "Implement financial strategies and manage day-to-day operations",
},
{
number: "05",
icon: "ri-briefcase-line",
title: "Review & Reporting",
descr:
"Reporting to the Management, Board of Directors, Investors as the case may be",
},
{
number: "06",
icon: "ri-money-dollar-box-line",
title: "Continuous Evaluation",
descr: "Continuous evaluation to make the process & reporting better",
},
];
const MethodThree = [
{
number: "01",
img: "/images/shape/calendar.png",
title: "01. Recurring Activities",
descr:
" Review of books of accounts, on call advisory, co-ordination with Bankers, Employees, Vendors on finance related matters",
},
{
number: "02",
img: "/images/shape/calendar2.png",
title: "2. Monthly Activities",
descr:
"Monthly book closures, payroll processing, compliance management, tracking of budget vs actuals, cash & fund flow management",
},
{
number: "03",
img: "/images/shape/calendar.png",
title: "3. Quarterly Activities",
descr:
" Presentation to the Board, Investment Evaluation, Evaluation of Processes",
},
{
number: "04",
img: "/images/shape/calendar2.png",
title: "4. Annual Activities",
descr: "Audit Assistance, Budgeting, Reporting to Investors",
},
{
number: "05",
img: "/images/shape/calendar.png",
title: "5. Need Based",
descr: "As per requirement of the Management",
},
];
const Methods = () => {
return (
<>
<section className="methodone ptb-100">
<Container>
<Row className="align-items-center">
<Col lg={6} md={12}>
<div className="call-back-request-text">
<span className="sub-title">{MethodOne[0].subtitle}</span>
<Heading el="h2" heading={MethodOne[0].title} />
<p>{MethodOne[0].description}</p>
</div>
</Col>
<Col lg={6} md={12}>
<div className="call-back-request-img">
<motion.div
variants={slideFromLeft(0.5)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.4 }}
>
<Image
src="/images/home/knowledge.png"
layout="fill"
className="img-fluid image"
alt="image"
/>
</motion.div>
</div>
</Col>
</Row>
</Container>
</section>
<section className="methodtwo ptb-100">
<Container>
<div className="section-title">
<span className="sub-title"> Methodology 2 - How we do it? </span>
<h2></h2>
<Heading el="h2" heading="Elements in CFO Services - Option 1" />
</div>
<Row>
{MethodTwo.map((card, index) => (
<Col md={6} lg={3} xl={4} key={index}>
<motion.div
variants={slideFromLeft(0.5 * index)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.4 }}
>
<div className="method-card">
<div className="card-number">{card.number}</div>
<div className="icon">
<i className={`fa-light ${card.icon}`}></i>
</div>
<div className="method-title">{card.title}</div>
<div className="method-descr">{card.descr}</div>
</div>
</motion.div>
</Col>
))}
</Row>
</Container>
</section>
<section className="methodthree ptb-100">
<Container fluid>
<div className="section-title">
<span className="sub-title">Methodology 2 - How we do it? </span>
<h2></h2>
<Heading el="h2" heading="Elements in CFO Services - Option 2" />
</div>
<Row className="justify-content-center">
{MethodThree.map((card, index) => (
<Col lg={2} md={3} sm={4} xs={6} key={index}>
<motion.div
variants={slideFromLeft(0.5 * index)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.4 }}
>
<div className="activity-card g-5">
{index % 2 === 0 ? (
// Image above, content below
<>
<div className="image-container mb-2">
<Image
aria-hidden="true"
alt="calendar-icon"
src={card.img}
layout="responsive"
width={100}
height={100}
className="img-fluid"
/>
</div>
<div className="method-title">{card.title}</div>
<div className="method-descr">{card.descr}</div>
</>
) : (
// Content above, image below
<>
<div className="method-title">{card.title}</div>
<div className="method-descr">{card.descr}</div>
<div className="image-container mt-2">
<Image
aria-hidden="true"
alt="calendar-icon"
src={card.img}
layout="responsive"
width={100}
height={100}
className="img-fluid"
/>
</div>
</>
)}
</div>
</motion.div>
</Col>
))}
</Row>
</Container>
</section>
</>
);
};
export default Methods;
container/Home/HomeBlog.js
......@@ -4,6 +4,7 @@ import Image from "next/image";
import Heading from "@/components/reuseables/Heading";
import { motion } from "framer-motion";
import { slideFromLeft } from "@/components/reuseables/variants";
import { Col, Container, Row } from "react-bootstrap";
const blogPosts = [
{
......@@ -51,17 +52,17 @@ const HomeBlog = () => {
return (
<>
<div id="blog" className="blog-area pt-100 pb-70">
<div className="container">
<Container>
<div className="section-title">
<span className="sub-title">OUR BLOGS</span>
<h2></h2>
<Heading el="h2" heading="Meet Up With Our Blogs" />
</div>
<div className="row justify-content-center">
<Row className="justify-content-center">
{blogPosts &&
blogPosts.map((post) => (
<div className="col-lg-4 col-md-6" key={post.id}>
<Col md={6} lg={4} key={post.id}>
<motion.div
variants={slideFromLeft(0.5)}
initial={"hidden"}
......@@ -101,10 +102,10 @@ const HomeBlog = () => {
</div>
</div>
</motion.div>
</div>
</Col>
))}
</div>
</div>
</Row>
</Container>
</div>
</>
);
......
container/Home/People.js
......@@ -4,6 +4,7 @@ import Image from "next/image";
import Heading from "@/components/reuseables/Heading";
import { motion } from "framer-motion";
import { fadeIn, slideFromLeft } from "@/components/reuseables/variants";
import { Col, Container, Row } from "react-bootstrap";
const heading = [
{
title: "People",
......@@ -32,9 +33,9 @@ const People = () => {
return (
<>
<div className="call-back-request-area ptb-100">
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6 col-md-12">
<Container>
<Row className="align-items-center">
<Col lg={6} md={12}>
<div className="call-back-request-img">
<motion.div
variants={slideFromLeft(0.5)}
......@@ -50,9 +51,9 @@ const People = () => {
/>
</motion.div>
</div>
</div>
</Col>
<div className="col-lg-6 col-md-12">
<Col lg={6} md={12}>
<div className="call-back-request-text">
<span className="sub-title">{heading[0].subtitle}</span>
<Heading el="h2" heading={heading[0].title} className="h2" />
......@@ -60,23 +61,20 @@ const People = () => {
<div className="row justify-content-center">
{data.map((item, index) => (
<div
key={index}
className="col-lg-4 col-md-4 col-6 col-sm-6"
>
<Col lg={4} md={4} sm={6} key={index}>
<div className="single-call-back-box">
<div className="icon">
<i className={item.icon}></i>
</div>
<h3>{item.title}</h3>
</div>
</div>
</Col>
))}
</div>
</div>
</div>
</div>
</div>
</Col>
</Row>
</Container>
</div>
</>
);
......
pages/clientservice-cfo.js 0 → 100644
import React from "react";
import CfoPage from "@/container/ClientServicing/CFO/CfoPage";
const clientservicecfo = () => {
return (
<>
<CfoPage />
</>
);
};
export default clientservicecfo;
public/images/shape/calendar.svg 0 → 100644
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg fill="#f8961d" width="75px" height="75px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" stroke="#f8961d">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M1411.824 0c31.17 0 56.47 25.3 56.47 56.471v56.47h169.412c93.403 0 169.412 76.01 169.412 169.412V1920H113V282.353c0-93.402 76.009-169.412 169.412-169.412h169.41v-56.47c0-31.172 25.3-56.47 56.472-56.47s56.47 25.298 56.47 56.47v56.47h790.589v-56.47c0-31.172 25.299-56.47 56.47-56.47Zm282.352 564.705H225.942v1242.353h1468.234V564.705ZM451.823 225.882H282.412c-31.06 0-56.47 25.3-56.47 56.471v169.412h1468.234V282.353c0-31.172-25.411-56.47-56.47-56.47h-169.412v56.47c0 31.172-25.3 56.471-56.47 56.471-31.172 0-56.471-25.299-56.471-56.47v-56.472H564.765v56.471c0 31.172-25.3 56.471-56.471 56.471-31.171 0-56.471-25.299-56.471-56.47v-56.472Zm507.682 1190.74c-82.334 0-141.515-34.448-194.372-95.888l-90.804 83.351c62.23 74.992 154.277 128.075 283.143 128.075 154.278 0 258.862-96.79 258.862-231.19v-2.034c0-134.4-105.6-190.644-217.525-204.198l205.892-208.263v-95.887H715.552V902.06h320.076l-199.68 209.394 21.12 80.188h60.31c103.454 0 170.09 40.546 170.09 112.376v2.147c0 66.635-55.003 110.456-127.963 110.456" fill-rule="evenodd"/> </g>
</svg>
\ No newline at end of file
styles/styles.css
......@@ -7815,3 +7815,99 @@ Modal CSS
.even-member {
margin-top: 4vh;
}
/* method 2 */
.cards-list,
.cards-list::before,
.cards-list::after,
.cards-list *,
.cards-list *::before,
.cards-list *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cards-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 1rem;
width: min(60rem, calc(100% - 2rem));
margin-inline: auto;
padding-block: 1rem;
list-style: none;
counter-reset: card-counter;
/* Initialize the counter */
}
.method-card {
--card-background-color: var(--lightgrayColor);
--card-border-radius: 0.5rem;
--card-padding-block: 1.5rem;
--card-padding-inline: 1rem;
--outset-size: 0.75rem;
--outset-background-color: #e5e5e5;
--number-font-size: 3rem;
--number-overlap: 0.6rem;
--number-font-weight: 500;
margin: var(--outset-size);
margin-top: calc(var(--number-font-size) - var(--number-overlap));
border-radius: var(--card-border-radius);
padding-block: var(--card-padding-block);
padding-inline: var(--card-padding-inline);
background-color: var(--card-background-color);
box-shadow:
inset 1px 1px 0px rgb(255 255 255 / .5),
inset -1px -1px 0px rgb(0 0 0 / .25),
calc(var(--outset-size) * .25) calc(var(--outset-size) * .25) calc(var(--outset-size) * .5) rgb(0 0 0 / .25);
position: relative;
margin-bottom: 4vh;
}
.method-card::before {
content: "";
position: absolute;
width: calc(100% + (var(--outset-size) * 2));
height: 100%;
bottom: calc(var(--outset-size) * -1);
left: calc(var(--outset-size) * -1);
z-index: -1;
border-bottom-left-radius: calc(var(--card-border-radius) + var(--outset-size));
border-bottom-right-radius: calc(var(--card-border-radius) + var(--outset-size));
background-color: var(--outset-background-color);
background-image:
linear-gradient(to left, var(--outset-background-color) calc(var(--outset-size) * 2), transparent 0),
linear-gradient(135deg, var(--mainColor) 80%, var(--outset-background-color) 0);
}
.icon {
font-size: 2rem;
text-align: center;
margin-bottom: calc(var(--card-padding-block) * .5);
}
.method-title {
text-transform: uppercase;
text-align: center;
font-weight: 600;
}
.method-descr {
text-align: center;
}
.card-number {
position: absolute;
bottom: calc(100% - var(--number-overlap));
left: 50%;
transform: translateX(-50%);
color: var(--mainColor);
font-family: var(--number-font-family);
font-weight: var(--number-font-weight);
font-size: var(--number-font-size);
line-height: 1;
z-index: -1;
}
\ No newline at end of file
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!