index.js 4.72 KB
import React from "react";
import Link from "next/link";
import { Col, Container, Row } from "react-bootstrap";
import Heading from "@/components/reuseables/Heading";
import { motion } from "framer-motion";
import { slideFromLeft } from "@/components/reuseables/variants";
import PageBanner from "@/components/reuseables/PageBanner";
const banners = [
  {
    imageSrc: "/images/page-title-bg.jpg",
    pageTitle: "Tax Wire",
    homePageUrl: "/",
    homePageText: "Home",
    activePageText: "Tax Wire",
  },
  // Add more banners as needed
];
const services = [
  {
    id: 1,
    serviceIcon: "icon ri-group-2-line",
    serviceTitle: "lorem text",
    serviceShortDescription:
      "Lorem ipsum dolor sit amet, consetetur sadicinan elitr, sed diam nonumy eirmod tempor invidunt utis labore et dolore magna aliquyam erat, sed diamsan voluptua at vero.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 2,
    serviceIcon: "icon ri-briefcase-line",
    serviceTitle: "lorem Consultancy",
    serviceShortDescription:
      "Lorem ipsum dolor sit amet, consetetur sadicinan elitr, sed diam nonumy eirmod tempor invidunt utis labore et dolore magna aliquyam erat, sed diamsan voluptua at vero.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 3,
    serviceIcon: "icon ri-money-dollar-box-line",
    serviceTitle: "lorem Consultancy",
    serviceShortDescription:
      "Lorem ipsum dolor sit amet, consetetur sadicinan elitr, sed diam nonumy eirmod tempor invidunt utis labore et dolore magna aliquyam erat, sed diamsan voluptua at vero.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 4,
    serviceIcon: "icon ri-group-2-line",
    serviceTitle: "lorem text",
    serviceShortDescription:
      "Lorem ipsum dolor sit amet, consetetur sadicinan elitr, sed diam nonumy eirmod tempor invidunt utis labore et dolore magna aliquyam erat, sed diamsan voluptua at vero.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 5,
    serviceIcon: "icon ri-briefcase-line",
    serviceTitle: "lorem Consultancy",
    serviceShortDescription:
      "Lorem ipsum dolor sit amet, consetetur sadicinan elitr, sed diam nonumy eirmod tempor invidunt utis labore et dolore magna aliquyam erat, sed diamsan voluptua at vero.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 6,
    serviceIcon: "icon ri-money-dollar-box-line",
    serviceTitle: "lorem Consultancy",
    serviceShortDescription:
      "Lorem ipsum dolor sit amet, consetetur sadicinan elitr, sed diam nonumy eirmod tempor invidunt utis labore et dolore magna aliquyam erat, sed diamsan voluptua at vero.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
];

const Corpedia = () => {
  return (
    <>
      <PageBanner banners={banners} />

      <div className="tax-wire-page-area pt-70 pb-100 ">
        <Container>
          <div className="section-title">
            <span className="sub-title">OUR lorem</span>
            <Heading heading={"Tax Wire"} el="h2" />
            <p>
              Lorem ipsum dolor sit amet, consetetur sadicinan elitr, sed diam
              nonumy eirmod tempor invidunt utis labore et dolore magna aliquyam
              erat, sed diamsan.
            </p>
          </div>
          <Row className="align-items-center">
            {services &&
              services.map((service, index) => (
                <Col lg={4} md={6} sm={12} key={service.id}>
                  <motion.div
                    variants={slideFromLeft(index * 0.5)}
                    initial={"hidden"}
                    whileInView={"show"}
                    viewport={{ once: false, amount: 0.4 }}
                  >
                    <div className="services-box-budget">
                      <div className="d-flex align-items-center">
                        <i className={service.serviceIcon}></i>
                        <h3>
                          <Link href={service.serviceDetailsUrl}>
                            {service.serviceTitle}
                          </Link>
                        </h3>
                      </div>

                      <p>{service.serviceShortDescription}</p>

                      <Link
                        href={service.serviceDetailsUrl}
                        className="default-btn"
                      >
                        {service.readMoreText}{" "}
                        <i className="ri-arrow-right-line"></i>
                      </Link>
                    </div>
                  </motion.div>
                </Col>
              ))}
          </Row>
        </Container>
      </div>
    </>
  );
};

export default Corpedia;