<file_sep>const mongoose = require("mongoose");

const dbUrl = "mongodb+srv://Waleed:1458@cluster0.h9e71.mongodb.net/<dbname>?retryWrites=true&w=majority";
mongoose
  .connect(dbUrl, {
    useNewUrlParser: true,
    useCreateIndex: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.log("Database Connect Sucessful");
  })
  .catch((err) => {
    console.log(`Database Not Connect ${err}`);
  });
<file_sep>import React, { Component } from "react";
import Header from "../components/hashcraft/Header";
import PageTitle from "../components/hashcraft/PageTitle";
import Footer from "../components/hashcraft/Footer";
import FaqContent from "../components/hashcraft/ContentBody";
import WhyChoose from "../components/hashcraft/WhyChoose";

class ServiceDetails extends Component {
  render() {
    return (
      <React.Fragment>
        <Header />
        <PageTitle title="Mobile App Development" />

        <section className="services-details-area ptb-80">
          <div className="container">
            <div className="row ">
              <div className="col-lg-6 services-details">
                <div className="services-details-desc">
                  <h3>
                    Robust Mobile Applications For Improved Client And Workforce
                    Engagement
                  </h3>
                  <p>
                    We employ platform-specific SDKs for Android and iOS,
                    cross-platform approaches relying on HTML5, and conversion
                    tools, to develop cost-effective enterprise mobile
                    solutions.
                  </p>

                  <p>
                    Our iOS applications help you take informed decisions and
                    give you the flexibility to perform critical tasks with
                    ease. Our services extend across various domains and skill
                    sets to help you innovate business processes across
                    departments.
                  </p>
                  <p>
                    Our expert team can help deliver customized, secure, and
                    robust native Android applications including e-commerce,
                    augmented reality and integration applications that help you
                    meet your business objectives.
                  </p>
                  <p>
                    We have expertise in building mobile solutions that meet
                    your multiplatform requirements, ensuring a uniform
                    experience across numerous devices and platforms. Whether a
                    smartphone, tablet or laptop running on iOS, Android, or
                    Windows, our developers can build the right solutions.
                  </p>
                  <a className="btn btn-primary" href="#proposal">
                    Request a proposal
                  </a>
                </div>
              </div>

              <div className="col-lg-6 services-details-image">
                <img
                  src={require("../static/images/home/mobileapp.jpg")}
                  className="wow fadeInUp"
                  alt="image"
                />
              </div>
            </div>
          </div>
        </section>
        <WhyChoose />
        <FaqContent />
        <Footer />
      </React.Fragment>
    );
  }
}

export default ServiceDetails;
<file_sep>import React, { Component } from "react";
import ModalVideo from "react-modal-video";
import * as Icon from "react-feather";
import "../../../../node_modules/react-modal-video/css/modal-video.min.css";
import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";

const images = [
  require("../../../../static/images/home/fotisto1.png"),
  require("../../../../static/images/home/fotisto2.png"),
  require("../../../../static/images/home/fotisto4.png"),
  require("../../../../static/images/home/fotisto3.png"),
];

export default class DetailsBody extends Component {
  state = {
    isOpen: false,
    photoIndex: 0,
    isOpenImage: false,
  };

  openModal = () => {
    this.setState({ isOpen: true });
  };

  render() {
    const { photoIndex, isOpenImage } = this.state;
    return (
      <section className="project-details-area ptb-80">
        <div className="container">
          <div className="row">
            <div className="col-lg-6 col-md-6">
              <div
                className="project-details-image"
                onClick={() => this.setState({ isOpenImage: true })}
              >
                <img
                  src={require("../../../../static/images/home/fotisto1.png")}
                  alt="work"
                />

                <Icon.Plus />
              </div>
            </div>

            {isOpenImage && (
              <Lightbox
                mainSrc={images[photoIndex]}
                nextSrc={images[(photoIndex + 1) % images.length]}
                prevSrc={
                  images[(photoIndex + images.length - 1) % images.length]
                }
                onCloseRequest={() => this.setState({ isOpenImage: false })}
                onMovePrevRequest={() =>
                  this.setState({
                    photoIndex:
                      (photoIndex + images.length - 1) % images.length,
                  })
                }
                onMoveNextRequest={() =>
                  this.setState({
                    photoIndex: (photoIndex + 1) % images.length,
                  })
                }
              />
            )}

            <div className="col-lg-6 col-md-6">
              <div
                className="project-details-image"
                onClick={() => this.setState({ isOpenImage: true })}
              >
                <img
                  src={require("../../../../static/images/home/fotisto2.png")}
                  alt="work"
                />

                <Icon.Plus />
              </div>
            </div>

            <div className="col-lg-12 col-md-12">
              <div className="project-details-desc">
                <h3>Fotisto</h3>

                <p>
                  At Fotisto, we are committed to provide businesses with
                  exclusive brand support, and a variety of features in their
                  content creation process. Simply hire us and get ready for
                  stress-free content production today!.Fotisto is a marketplace
                  that uses AI and Cloud-based tools to bridge clients with
                  photographers & videographers. We have an eye for detail and can
                  capture special moments the way you imagined. Be it fashion,
                  wedding, or 360° shoots, we do it all .Initiate the process of
                  an exquisite content creation personalized for your brand by
                  selecting from the list of genres from our content types
                </p>

                <div className="project-details-information">
                  <div className="single-info-box">
                    <h4>Happy Client</h4>
                    <p><NAME></p>
                  </div>

                  <div className="single-info-box">
                    <h4>Category</h4>
                    <p>Portfolio, Personal</p>
                  </div>

                  <div className="single-info-box">
                    <h4>Date</h4>
                    <p>February 28, 2019</p>
                  </div>

                  <div className="single-info-box">
                    <h4>Share</h4>
                    <ul>
                      <li>
                        <a href="#">
                          <Icon.Facebook />
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <Icon.Twitter />
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <Icon.Instagram />
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <Icon.Linkedin />
                        </a>
                      </li>
                    </ul>
                  </div>

                  <div className="single-info-box">
                    <a href="#" className="btn btn-primary">
                      Live Preview
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }
}
<file_sep>import React, { Component } from "react";
import ModalVideo from "react-modal-video";
import * as Icon from "react-feather";
import "../../../../node_modules/react-modal-video/css/modal-video.min.css";
import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";

const images = [
  require("../../../../static/images//home/vonza1.png"),
  require("../../../../static/images//home/vonza2.png"),
  require("../../../../static/images//home/vonza3.png"),
  require("../../../../static/images//home/vonza5.png"),
  require("../../../../static/images//home/vonza4.png"),
];

export default class DetailsBody extends Component {
  state = {
    isOpen: false,
    photoIndex: 0,
    isOpenImage: false,
  };

  openModal = () => {
    this.setState({ isOpen: true });
  };

  render() {
    const { photoIndex, isOpenImage } = this.state;
    return (
      <section className="project-details-area ptb-80">
        <div className="container">
          <div className="row">
            <div className="col-lg-6 col-md-6">
              <div
                className="project-details-image"
                onClick={() => this.setState({ isOpenImage: true })}
              >
                <img
                  src={require("../../../../static/images/home/vonza1.png")}
                  alt="work"
                />

                <Icon.Plus />
              </div>
            </div>

            {isOpenImage && (
              <Lightbox
                mainSrc={images[photoIndex]}
                nextSrc={images[(photoIndex + 1) % images.length]}
                prevSrc={
                  images[(photoIndex + images.length - 1) % images.length]
                }
                onCloseRequest={() => this.setState({ isOpenImage: false })}
                onMovePrevRequest={() =>
                  this.setState({
                    photoIndex:
                      (photoIndex + images.length - 1) % images.length,
                  })
                }
                onMoveNextRequest={() =>
                  this.setState({
                    photoIndex: (photoIndex + 1) % images.length,
                  })
                }
              />
            )}

            <div className="col-lg-6 col-md-6">
              <div
                className="project-details-image"
                onClick={() => this.setState({ isOpenImage: true })}
              >
                <img
                  src={require("../../../../static/images//home/vonza2.png")}
                  alt="work"
                />

                <Icon.Plus />
              </div>
            </div>

            <div className="col-lg-12 col-md-12">
              <div className="project-details-desc">
                <h3>Vonza</h3>

                <p>
                  Vonza is the ultimate platform to build online courses, sell
                  products, offer services, construct sales funnels, schedule
                  appointments, launch email marketing campaigns and develop
                  amazing websites.Vonza makes it seamless for entrepreneurs and
                  creatives to run a successful online business all in one
                  place, not all over the place! While saving them time, money
                  and tech frustrations.Before Vonza, when coaches and
                  entrepreneurs wanted to share their knowledge, sell a course
                  online or run their online business, they needed several
                  different platforms, multiple subscriptions, tools, apps, tech
                  people, plugins and a ton of duct-tape to run their online
                  business. Some platforms only provided online courses, some
                  coaching tools, some email marketing while others sales
                  funnels - running an online business was complicated and
                  seemed all over the place! Coaches and business owners were
                  wasting precious time, money and losing their sanity.
                </p>

                <p>
                  After Vonza, you don’t need annoying programmers and plugins.
                  You don’t need to remember 20 different passwords. You don’t
                  need to write any code. Your business doesn’t have to be all
                  over the place. You get to put all your focus on your
                  customers and in your business. To put the cherry on top, you
                  also get to save money, time and enjoy the freedom of
                  entrepreneurship. Within minutes, you will get a fully
                  functioning online website platform with the features and
                  tools you need to run a successful online business. One simple
                  login and the world is your audience. We welcome you to Vonza!
                </p>

                <div className="project-details-information">
                  <div className="single-info-box">
                    <h4>Happy Client</h4>
                    <p><NAME></p>
                  </div>

                  <div className="single-info-box">
                    <h4>Category</h4>
                    <p>Portfolio, Personal</p>
                  </div>

                  <div className="single-info-box">
                    <h4>Date</h4>
                    <p>February 28, 2019</p>
                  </div>

                  <div className="single-info-box">
                    <h4>Share</h4>
                    <ul>
                      <li>
                        <a href="#">
                          <Icon.Facebook />
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <Icon.Twitter />
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <Icon.Instagram />
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <Icon.Linkedin />
                        </a>
                      </li>
                    </ul>
                  </div>

                  <div className="single-info-box">
                    <a href="#" className="btn btn-primary">
                      Live Preview
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }
}
<file_sep>import React, { Component } from 'react'
import ModalVideo from 'react-modal-video'
import * as Icon from 'react-feather'
import '../../node_modules/react-modal-video/css/modal-video.min.css'
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';

const images = [
    require('../../static/images/works-image/works-image2.jpg'),
    require('../../static/images/works-image/works-image4.jpg')
]

export default class DetailsBody extends Component {
    state = {
        isOpen: false,
        photoIndex: 0,
        isOpenImage: false,
    }

    openModal = () => {
        this.setState({isOpen: true})
    }

    render() {
        const { photoIndex, isOpenImage } = this.state;
        return (
            <section className="project-details-area ptb-80">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-6 col-md-6">
                            <div className="project-details-image">
                                <img src={require("../../static/images/works-image/works-image1.jpg")} alt="work" />

                                <Icon.Play onClick={this.openModal} />
                            </div>
                        </div>
                        <ModalVideo 
                            channel='youtube' 
                            isOpen={this.state.isOpen} 
                            videoId='bk7McNUjWgw' 
                            onClose={() => this.setState({isOpen: false})} 
                        />

                        <div className="col-lg-6 col-md-6">
                            <div className="project-details-image">
                                <img src={require("../../static/images/works-image/works-image2.jpg")} alt="work" />

                                <Icon.Plus onClick={() => this.setState({ isOpenImage: true })} />
                            </div>
                        </div>

                        {isOpenImage && (
                            <Lightbox
                                mainSrc={images[photoIndex]}
                                nextSrc={images[(photoIndex + 1) % images.length]}
                                prevSrc={images[(photoIndex + images.length - 1) % images.length]}
                                onCloseRequest={() => this.setState({ isOpenImage: false })}
                                onMovePrevRequest={() =>
                                this.setState({
                                    photoIndex: (photoIndex + images.length - 1) % images.length,
                                })
                                }
                                onMoveNextRequest={() =>
                                this.setState({
                                    photoIndex: (photoIndex + 1) % images.length,
                                })
                                }
                            />
                        )}

                        <div className="col-lg-6 col-md-6">
                            <div className="project-details-image">
                                <img src={require("../../static/images/works-image/works-image4.jpg")} alt="work" />

                                <Icon.Plus onClick={() => this.setState({ isOpenImage: true })} />
                            </div>
                        </div>

                        <div className="col-lg-6 col-md-6">
                            <div className="project-details-image">
                                <img src={require("../../static/images/works-image/works-image3.jpg")} alt="work" />

                                <Icon.Play onClick={this.openModal} />
                            </div>
                        </div>

                        <div className="col-lg-12 col-md-12">
                            <div className="project-details-desc">
                                <h3>Network Marketing</h3>
                                
                                <p>Lorem ipsum dolor sit amet, conse cte tuer adipiscing elit, sed diam no nu m nibhie eui smod. Facil isis atve eros et accumsan etiu sto odi dignis sim qui blandit praesen lup ta de er. At molestiae appellantur pro. Vis wisi oportere per ic ula ad, ei latine prop riae na, mea cu purto debitis. Primis nost rud no eos, no impedit dissenti as mea, ea vide labor amus neglegentur vix. Ancillae intellegat vix et. Sit causae laoreet nolu ise.  Ad po exerci nusquam eos te. Cu altera expet enda qui, munere oblique theo phrastu ea vix. Ne nec modus civibus modera tius, sit ei lorem doctus. Ne docen di verterem reformidans eos. Cu altera expetenda qui, munere oblique theophr astus ea vix modus civiu mod eratius.</p>

                                <p>Lorem ipsum dolor sit amet, conse cte tuer adipiscing elit, sed diam no nu m nibhie eui smod. Facil isis atve eros et accumsan etiu sto odi dignis sim qui blandit praesen lup ta de er. At molestiae appellantur pro. Vis wisi oportere per ic ula ad, ei latine prop riae na, mea cu purto debitis. Primis nost rud no eos, no impedit dissenti as mea, ea vide labor amus neglegentur vix. Ancillae intellegat vix et. Sit causae laoreet nolu ise.  Ad po exerci nusquam eos te. Cu altera expet enda qui, munere oblique theo phrastu ea vix. Ne nec modus civibus modera tius, sit ei lorem doctus. Ne docen di verterem reformidans eos. Cu altera expetenda qui, munere oblique theophr astus ea vix modus civiu mod eratius.</p>

                                <div className="project-details-information">
                                    <div className="single-info-box">
                                        <h4>Happy Client</h4>
                                        <p><NAME></p>
                                    </div>

                                    <div className="single-info-box">
                                        <h4>Category</h4>
                                        <p>Portfolio, Personal</p>
                                    </div>

                                    <div className="single-info-box">
                                        <h4>Date</h4>
                                        <p>February 28, 2019</p>
                                    </div>

                                    <div className="single-info-box">
                                        <h4>Share</h4>
                                        <ul>
                                            <li>
                                                <a href="#"><Icon.Facebook/></a>
                                            </li>
                                            <li>
                                                <a href="#"><Icon.Twitter/></a>
                                            </li>
                                            <li>
                                                <a href="#"><Icon.Instagram/></a>
                                            </li>
                                            <li>
                                                <a href="#"><Icon.Linkedin/></a>
                                            </li>
                                        </ul>
                                    </div>

                                    <div className="single-info-box">
                                        <a href="#" className="btn btn-primary">Live Preview</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        )
    }
}
<file_sep>import React, { Component } from "react";
import Header from "../components/hashcraft/Header";
import PageTitle from "../components/hashcraft/PageTitle";
import Footer from "../components/hashcraft/Footer";
import FaqContent from "../components/hashcraft/ContentBody";
import WhyChoose from "../components/hashcraft/WhyChoose";

class ServiceDetails extends Component {
  render() {
    return (
      <React.Fragment>
        <Header />
        <PageTitle title='UI/UX Design'/>

        <section className="services-details-area ptb-80">
          <div className="container">
            <div className="row ">
              <div className="col-lg-6 services-details">
                <div className="services-details-desc">
                <h3>
                    Innovative & User Centered, Delightful Customer Experiences.
                  </h3>
                  <p>
                    Our UX Designers and Software Architects will create an
                    interactive prototype for the software using Axure RP (Rapid
                    Prototyping).
                  </p>

                  <p>
                    We can help your product speak for itself. Check out our
                    projects portfolio, client pages and their websites. You
                    need designs that your customers will love and a compelling
                    digital media presence that will cause your competition step
                    up their game. The right experience cultivates customer
                    loyalty and builds brand value.
                  </p>
                  <p>
                    A decade in design has allowed our team to perfect the
                    process of delivering UI andUX services.We follow
                    established design standards, workflows, and guidelines —
                    you get the product you need, delivered by expert designers
                    within the set timeframe.
                  </p>

                  <a className="btn btn-primary" href="#proposal">
                    Request a proposal
                  </a>
                </div>
              </div>

              <div className="col-lg-6 services-details-image">
                <img
                  src={require("../static/images/home/uiux.png")}
                  className="wow fadeInUp"
                  alt="image"
                />
              </div>
            </div>
          </div>
        </section>
        <WhyChoose />
        <FaqContent />
        <Footer />
      </React.Fragment>
    );
  }
}

export default ServiceDetails;
<file_sep>import React from "react";
import * as Icon from "react-feather";
import ReactWOW from "react-wow";
import Link from "../common/ActiveLink";

class ServicesArea extends React.Component {
  render() {
    return (
      <React.Fragment>
        <section className="services-area ptb-80 ">
          <div className="container">
            <div className="row h-100 justify-content-center align-items-center">
              <div className="col-lg-6 col-md-12 services-content">
                <div className="section-title">
                  <h2>WHAT WE CRAFT</h2>
                  <div className="bar"></div>
                  <p>
                    We’ll help you bring your most complex software vision to
                    life with our leading custom application development
                    services.
                  </p>
                </div>

                <div className="row">
                  <Link href="/ui-ux">
                    <div className="col-lg-6 col-md-6">
                      <div className="box">
                        <Icon.Database /> UI/UX Design
                      </div>
                    </div>
                  </Link>

                  <Link href="/web-app">
                    <div className="col-lg-6 col-md-6">
                      <div className="box">
                        <Icon.File /> Website App Development
                      </div>
                    </div>
                  </Link>

                  <Link href="/mobile-app">
                    <div className="col-lg-6 col-md-6">
                      <div className="box">
                        <Icon.TrendingUp /> Mobile App Development
                      </div>
                    </div>
                  </Link>

                  <Link href="/ecommerce">
                    <div className="col-lg-6 col-md-6">
                      <div className="box">
                        <Icon.Folder /> E-commerce Development
                      </div>
                    </div>
                  </Link>

                  <Link href="/hybrid-app">
                    <div className="col-lg-6 col-md-6">
                      <div className="box">
                        <Icon.Monitor /> Hybrid App Development
                      </div>
                    </div>
                  </Link>

                  <Link href="/digital-marketing">
                    <div className="col-lg-6 col-md-6">
                      <div className="box">
                        <Icon.Mail /> Digital Marketing
                      </div>
                    </div>
                  </Link>

                  <Link href="/app-deployment">
                    <div className="col-lg-6 col-md-6">
                      <div className="box">
                        <Icon.Globe /> Application Deployment
                      </div>
                    </div>
                  </Link>

                  <Link href="/dedicated-team">
                    <div className="col-lg-6 col-md-6">
                      <div className="box">
                        <Icon.Cloud /> Dedicated Team
                      </div>
                    </div>
                  </Link>
                </div>
              </div>

              <div className="col-lg-6 col-md-12 services-right-image">
                <ReactWOW delay="0.6s" animation="fadeInDown">
                  <img
                    src={require("../../static/images/services-right-image/book-self.png")}
                    className="wow fadeInDown"
                    data-wow-delay="0.6s"
                    alt="book-self"
                  />
                </ReactWOW>
                <ReactWOW delay="0.6s" animation="fadeInUp">
                  <img
                    src={require("../../static/images/services-right-image/box.png")}
                    className="wow fadeInUp"
                    data-wow-delay="0.6s"
                    alt="box"
                  />
                </ReactWOW>
                <ReactWOW delay="0.6s" animation="fadeInLeft">
                  <img
                    src={require("../../static/images/services-right-image/chair.png")}
                    className="wow fadeInLeft"
                    data-wow-delay="0.6s"
                    alt="chair"
                  />
                </ReactWOW>
                <ReactWOW delay="0.6s" animation="zoomIn">
                  <img
                    src={require("../../static/images/services-right-image/cloud.png")}
                    className="wow zoomIn"
                    data-wow-delay="0.6s"
                    alt="cloud"
                  />
                </ReactWOW>
                <ReactWOW delay="0.6s" animation="bounceIn">
                  <img
                    src={require("../../static/images/services-right-image/cup.png")}
                    className="wow bounceIn"
                    data-wow-delay="0.6s"
                    alt="cup"
                  />
                </ReactWOW>
                <ReactWOW delay="0.6s" animation="fadeInDown">
                  <img
                    src={require("../../static/images/services-right-image/flower-top.png")}
                    className="wow fadeInDown"
                    data-wow-delay="0.6s"
                    alt="flower"
                  />
                </ReactWOW>
                <ReactWOW delay="0.6s" animation="zoomIn">
                  <img
                    src={require("../../static/images/services-right-image/head-phone.png")}
                    className="wow zoomIn"
                    data-wow-delay="0.6s"
                    alt="head-phone"
                  />
                </ReactWOW>
                <ReactWOW delay="0.6s" animation="fadeInUp">
                  <img
                    src={require("../../static/images/services-right-image/monitor.png")}
                    className="wow fadeInUp"
                    data-wow-delay="0.6s"
                    alt="monitor"
                  />
                </ReactWOW>
                <ReactWOW delay="0.6s" animation="rotateIn">
                  <img
                    src={require("../../static/images/services-right-image/mug.png")}
                    className="wow rotateIn"
                    data-wow-delay="0.6s"
                    alt="mug"
                  />
                </ReactWOW>
                <ReactWOW delay="0.6s" animation="fadeInUp">
                  <img
                    src={require("../../static/images/services-right-image/table.png")}
                    className="wow fadeInUp"
                    data-wow-delay="0.6s"
                    alt="table"
                  />
                </ReactWOW>
                <ReactWOW delay="0.6s" animation="zoomIn">
                  <img
                    src={require("../../static/images/services-right-image/tissue.png")}
                    className="wow zoomIn"
                    data-wow-delay="0.6s"
                    alt="tissue"
                  />
                </ReactWOW>
                <ReactWOW delay="0.6s" animation="zoomIn">
                  <img
                    src={require("../../static/images/services-right-image/water-bottle.png")}
                    className="wow zoomIn"
                    data-wow-delay="0.6s"
                    alt="water-bottle"
                  />
                </ReactWOW>
                <ReactWOW delay="0.6s" animation="fadeInLeft">
                  <img
                    src={require("../../static/images/services-right-image/wifi.png")}
                    className="wow fadeInLeft"
                    data-wow-delay="0.6s"
                    alt="wifi"
                  />
                </ReactWOW>
                <img
                  src={require("../../static/images/services-right-image/cercle-shape.png")}
                  className="bg-image rotateme"
                  alt="shape"
                />
                <ReactWOW delay="0.6s" animation="fadeInUp">
                  <img
                    src={require("../../static/images/services-right-image/service-right-main-pic.png")}
                    className="wow fadeInUp"
                    data-wow-delay="0.6s"
                    alt="main-pic"
                  />
                </ReactWOW>
              </div>
            </div>
          </div>
        </section>
      </React.Fragment>
    );
  }
}

export default ServicesArea;
<file_sep>import React, { Component } from "react";
import ModalVideo from "react-modal-video";
import * as Icon from "react-feather";
import "../../../../node_modules/react-modal-video/css/modal-video.min.css";
import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";

const images = [
  require("../../../../static/images/home/rapid1.png"),
  require("../../../../static/images/home/rapid2.png"),
  require("../../../../static/images/home/rapid3.png"),
];

export default class DetailsBody extends Component {
  state = {
    isOpen: false,
    photoIndex: 0,
    isOpenImage: false,
  };

  openModal = () => {
    this.setState({ isOpen: true });
  };

  render() {
    const { photoIndex, isOpenImage } = this.state;
    return (
      <section className="project-details-area ptb-80">
        <div className="container">
          <div className="row">
            <div className="col-lg-6 col-md-6">
              <div
                className="project-details-image"
                onClick={() => this.setState({ isOpenImage: true })}
              >
                <img
                  src={require("../../../../static/images/home/rapid1.png")}
                  alt="work"
                />

                <Icon.Plus />
              </div>
            </div>

            {isOpenImage && (
              <Lightbox
                mainSrc={images[photoIndex]}
                nextSrc={images[(photoIndex + 1) % images.length]}
                prevSrc={
                  images[(photoIndex + images.length - 1) % images.length]
                }
                onCloseRequest={() => this.setState({ isOpenImage: false })}
                onMovePrevRequest={() =>
                  this.setState({
                    photoIndex:
                      (photoIndex + images.length - 1) % images.length,
                  })
                }
                onMoveNextRequest={() =>
                  this.setState({
                    photoIndex: (photoIndex + 1) % images.length,
                  })
                }
              />
            )}

            <div className="col-lg-6 col-md-6">
              <div
                className="project-details-image"
                onClick={() => this.setState({ isOpenImage: true })}
              >
                <img
                  src={require("../../../../static/images/home/rapid2.png")}
                  alt="work"
                />

                <Icon.Plus />
              </div>
            </div>

            <div className="col-lg-12 col-md-12">
              <div className="project-details-desc">
                <h3>Rapid Solution</h3>

                <p>
                  Founded in 2010, Rapid Solution is headquartered in Lahore
                  with an active presence in Karachi and Islamabad. Hashcrafts
                  provides innovatives products and high value-added services
                  including Print Solutions, Hardware Solutions, Accessories
                  Parts, Repairs and Services Contracts with focus on
                  understanding the unique needs of each customer and creating
                  solutions to match their requirment in a professional and
                  efficient manner with in the costumer’s budget and a determind
                  time frame. Hashcrafts has now decided to go Online with
                  Doorstep Repair Facility named as Rapid Solution. We tend to
                  use our experience to provide better services to our customers
                  with professionalism.
                </p>

                <p>
                  We always Demonstrate the core values of professionalism
                  leading to long lasting Business relationships wih Customers.
                  Doorstep Repair Service Saving customers' time and energy, We
                  put in ours to ensure your Laptop's fixation at Doorstep and
                  at earliest. Cost Effective Solutions We also sale parts and
                  accessories taking into concern our customers that are looking
                  for Cost Effective Solutions.As we Believe in long lasting
                  Business Relationships, we focus on maintaining customers'
                  trust throughout. Experience For the services we provide, we
                  bring in our 6+ years experience into work to ensure Quality.
                  Innovation Generating new ideas and implementing them, we
                  regularly bring in up innovations within our services.
                </p>

                <div className="project-details-information">
                  <div className="single-info-box">
                    <h4>Happy Client</h4>
                    <p><NAME></p>
                  </div>

                  <div className="single-info-box">
                    <h4>Category</h4>
                    <p>Portfolio, Personal</p>
                  </div>

                  <div className="single-info-box">
                    <h4>Date</h4>
                    <p>February 28, 2019</p>
                  </div>

                  <div className="single-info-box">
                    <h4>Share</h4>
                    <ul>
                      <li>
                        <a href="#">
                          <Icon.Facebook />
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <Icon.Twitter />
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <Icon.Instagram />
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <Icon.Linkedin />
                        </a>
                      </li>
                    </ul>
                  </div>

                  <div className="single-info-box">
                    <a href="#" className="btn btn-primary">
                      Live Preview
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }
}
<file_sep># Hashcrafts
My Company
<file_sep>import React, { Component } from "react";
import ReactWOW from "react-wow";

class WhyChoose extends Component {
  render() {
    return (
      <section className="why-choose-us ptb-80">
        <div className="container">
          <div className="row align-items-center">
            <div className="col-lg-6 col-md-12">
              <div className="section-title">
                <h2>Why Choose Us</h2>
                <div className="bar"></div>
                <p>
                  We always focus on results. For us it’s all about what adds
                  value for you and your business
                </p>
              </div>

              <div className="why-choose-us-image">
                <ReactWOW animation="fadeInLeft">
                  <img
                    src={require("../../static/images/why-choose-us-image/man-stand.png")}
                    className="wow fadeInLeft"
                    alt="image"
                  />
                </ReactWOW>
                <ReactWOW animation="fadeInRight">
                  <img
                    src={require("../../static/images/why-choose-us-image/database.png")}
                    className="wow fadeInRight"
                    alt="image"
                  />
                </ReactWOW>
                <ReactWOW animation="rotateme">
                  <img
                    src={require("../../static/images/services-left-image/cercle-shape.png")}
                    className="rotateme"
                    alt="image"
                  />
                </ReactWOW>
                <ReactWOW animation="fadeInUp">
                  <img
                    src={require("../../static/images/why-choose-us-image/main-static.png")}
                    className="main-pic"
                    alt="image"
                  />
                </ReactWOW>
              </div>
            </div>

            <div className="col-lg-6 col-md-12">
              <div className="row">
                <div className="col-lg-6 col-md-6">
                  <div className="single-why-choose-us">
                    <div className="icon">
                      <i className="flaticon-team"></i>
                    </div>
                    <h3>Proficient & Friendly</h3>
                    <p>
                      We're Proficient as well as accountable to our clients and
                      to each other, and respond to problems with solutions, not
                      blame.
                    </p>
                  </div>
                </div>

                <div className="col-lg-6 col-md-6">
                  <div className="single-why-choose-us">
                    <div className="icon">
                      <i className="flaticon-rocket"></i>
                    </div>
                    <h3>Extremely Fast</h3>
                    <p>
                      We build applications with minimalist and sleek design to
                      give it a performance boost and make it extremely fast.
                    </p>
                  </div>
                </div>

                <div className="col-lg-6 col-md-6">
                  <div className="single-why-choose-us">
                    <div className="icon">
                      <i className="flaticon-shield"></i>
                    </div>
                    <h3>100% Safe & Security</h3>
                    <p>
                      Give us your most ambitious projects and get in return
                      meticulous digital products that are fast, secure,
                      fault-tolerant, scalable, and maintainable.
                    </p>
                  </div>
                </div>

                <div className="col-lg-6 col-md-6">
                  <div className="single-why-choose-us">
                    <div className="icon">
                      <i className="flaticon-diamond"></i>
                    </div>
                    <h3>Top-Rated</h3>
                    <p>
                      Smart usability sparks at the design and technology,
                      keeping your audiences delighted which adds extra element
                      of emotion that our competitors covet.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }
}

export default WhyChoose;
<file_sep>import React from "react";
import { Preloader, Placeholder } from "react-preloading-screen";
import NoSSR from "react-no-ssr";
import Header from "../components/hashcraft/Header";
import Funfacts from "../components/hashcraft/Funfacts";
import Footer from "../components/hashcraft/Footer";
import GoTop from "../components/hashcraft/GoTop";
import PageTitle from "../components/hashcraft/PageTitle";
import AboutArea from "../components/hashcraft/AboutArea";
import WhyChoose from "../components/hashcraft/WhyChoose";
import CtaArea from "../components/hashcraft/AgencyCtaArea";

const About = () => {
  return (
    <NoSSR>
      <Preloader>
        <Placeholder>
          <div className="preloader">
            <div className="spinner"></div>
          </div>
        </Placeholder>
        <Header />
        <PageTitle title="About Us" />
        <AboutArea />
        <WhyChoose />
        <Funfacts />
        <CtaArea />
        <Footer />
        <GoTop scrollStepInPx="50" delayInMs="16.66" />
      </Preloader>
    </NoSSR>
  );
};

export default About;
<file_sep>import React from "react";
import "react-accessible-accordion/dist/fancy-example.css";
import "isomorphic-fetch";

export default class ContentBody extends React.Component {
  state = {
    submitting: false,
    submitted: false,
    buttonState: "",
    formFields: {
      name: "",
      email: "",
      subject: "",
      phone: "",
      text: "",
    },
  };

  onSubmit = (e) => {
    e.preventDefault();
    const data = this.state.formFields;
    fetch("/api/contact", {
      method: "post",
      headers: {
        Accept: "application/json, text/plain",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    }).then((res) => {
      res.status === 200 ? this.setState({ submitted: true }) : "";
      let formFields = Object.assign({}, this.state.formFields);
      formFields.name = "";
      formFields.email = "";
      formFields.phone = "";
      formFields.subject = "";
      formFields.text = "";
      this.setState({ formFields });
    });
  };

  nameChangeHandler = (e) => {
    let formFields = Object.assign({}, this.state.formFields);
    formFields.name = e.target.value;
    this.setState({ formFields });
  };

  emailChangeHandler = (e) => {
    let formFields = Object.assign({}, this.state.formFields);
    formFields.email = e.target.value;
    this.setState({ formFields });
  };

  phoneChangeHandler = (e) => {
    let formFields = Object.assign({}, this.state.formFields);
    formFields.phone = e.target.value;
    this.setState({ formFields });
  };

  subjectChangeHandler = (e) => {
    let formFields = Object.assign({}, this.state.formFields);
    formFields.subject = e.target.value;
    this.setState({ formFields });
  };

  textChangeHandler = (e) => {
    let formFields = Object.assign({}, this.state.formFields);
    formFields.text = e.target.value;
    this.setState({ formFields });
  };

  onHideSuccess = () => {
    this.setState({ submitted: false });
  };

  successMessage = () => {
    if (this.state.submitted) {
      return (
        <div className="alert alert-success">
          <strong>Thank you!</strong> Your message is send to the owner
          <button onClick={this.onHideSuccess} type="button" className="close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      );
    }
  };

  render() {
    return (
      <section className="faq-area ptb-80">
        <div className="container">
          <section id="proposal"></section>
          <div className="faq-contact">
            <h3>Ask Your Question</h3>
            <form onSubmit={this.onSubmit}>
              <div className="row">
                <div className="col-lg-6 col-md-6">
                  <div className="form-group">
                    <input
                      type="text"
                      name="name"
                      className="form-control"
                      required
                      data-error="Please enter your name"
                      placeholder="Name"
                      value={this.state.formFields.name}
                      onChange={this.nameChangeHandler}
                    />
                  </div>
                </div>

                <div className="col-lg-6 col-md-6">
                  <div className="form-group">
                    <input
                      type="email"
                      name="email"
                      className="form-control"
                      required
                      data-error="Please enter your email"
                      placeholder="Email"
                      value={this.state.formFields.email}
                      onChange={this.emailChangeHandler}
                    />
                  </div>
                </div>

                <div className="col-lg-6 col-md-6">
                  <div className="form-group">
                    <input
                      type="text"
                      name="phone"
                      className="form-control"
                      placeholder="Phone"
                      value={this.state.formFields.phone}
                      onChange={this.phoneChangeHandler}
                    />
                  </div>
                </div>

                <div className="col-lg-6 col-md-6">
                  <div className="form-group">
                    <input
                      type="text"
                      name="subject"
                      className="form-control"
                      placeholder="Subject"
                      value={this.state.formFields.subject}
                      onChange={this.subjectChangeHandler}
                    />
                  </div>
                </div>

                <div className="col-lg-12 col-md-12">
                  <div className="form-group">
                    <textarea
                      name="message"
                      className="form-control"
                      id="message"
                      cols="30"
                      rows="5"
                      required
                      data-error="Write your message"
                      placeholder="Your Message"
                      value={this.state.formFields.text}
                      onChange={this.textChangeHandler}
                    />
                  </div>
                </div>

                <div className="col-lg-12 col-md-12">
                  <button className="btn btn-primary" type="submit">
                    Submit Now!
                  </button>
                </div>
              </div>
              {this.successMessage()}
            </form>
          </div>
        </div>
      </section>
    );
  }
}
<file_sep>import React, { Component } from "react";
import Header from "../components/hashcraft/Header";
import Footer from "../components/hashcraft/Footer";
import FaqContent from "../components/hashcraft/ContentBody";
import WhyChoose from "../components/hashcraft/WhyChoose";
import PageTitle from "../components/hashcraft/PageTitle";

class ServiceDetails extends Component {
  render() {
    return (
      <React.Fragment>
        <Header />
        <PageTitle title='Digital Marketing' />

        <section className="services-details-area ptb-80">
          <div className="container">
            <div className="row ">
              <div className="col-lg-6 services-details">
                <div className="services-details-desc">
                  <h3>Unique and creative design tailored to each client</h3>
                  <p>
                    At <b>Hashcrafts</b>, we provide our clients with written
                    and visual content using methods that are proven. The right
                    content can help you to become authoritative, visible and
                    engaging in a way you couldn’t otherwise imagine. Customers
                    want to transact with a brand where they can be part of a
                    conversation online; powerful content can facilitate
                    meaningful engagement.
                  </p>

                  <p>
                    When it comes to choosing a vendor to help with your digital
                    marketing plans, you should rely on a company that provides
                    quality content and helps you make an informed decision.
                    <b>Hashcrafts</b> has a team of skilled writers, designers,
                    developers and marketers who can build a meaningful content
                    marketing plan and can help you become a trusted source for
                    your target audience. Some of the key reasons we are
                    different from others in the market is our lifecycle and
                    workflow.
                  </p>
                  <p>
                    Through our digital services we can begin by focussing the
                    digital changes that directly influence a client’s business
                    strategy and where we can easily deliver return on
                    investment, where we then expand into larger scale digital
                    initiatives from discovery, to launch and beyond.
                  </p>

                  <a className="btn btn-primary" href="#proposal">
                    Request a proposal
                  </a>
                </div>
              </div>

              <div className="col-lg-6 services-details-image">
                <img
                  src={require("../static/images/home/digitalmarketing.jpg")}
                  className="wow fadeInUp"
                  alt="image"
                />
              </div>
            </div>
          </div>
        </section>
        <WhyChoose />
        <FaqContent />
        <Footer />
      </React.Fragment>
    );
  }
}

export default ServiceDetails;
<file_sep>import React, { Component } from "react";
import Link from "next/link";
import * as Icon from "react-feather";

class Services extends Component {
  render() {
    return (
      <section className="iot-services-area ptb-80">
        <div className="container">
          <div className="section-title">
            <h2>Core Modules</h2>
            <div className="bar"></div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>

          <div className="row">
            <div className="col-lg-3 col-md-4">
              <div className="single-repair-services">
                <div className="icon">
                  <Icon.Monitor />
                </div>

                <h3>Front Shop & Dashboard</h3>
              </div>
            </div>

            <div className="col-lg-3 col-md-4">
              <div className="single-repair-services">
                <div className="icon">
                  <i>
                    <Icon.Smile />
                  </i>
                </div>

                <h3>User Friendly</h3>
                <br />
              </div>
            </div>

            <div className="col-lg-3 col-md-4">
              <div className="single-repair-services">
                <div className="icon">
                  <i>
                    <Icon.Edit />
                  </i>
                </div>

                <h3>User Generated Reviews</h3>
              </div>
            </div>

            <div className="col-lg-3 col-md-4">
              <div className="single-repair-services">
                <div className="icon">
                  <i>
                    <Icon.List />
                  </i>
                </div>

                <h3>Wish List</h3>
                <br />
              </div>
            </div>

            <div className="col-lg-3 col-md-4">
              <div className="single-repair-services">
                <div className="icon">
                  <i>
                    <Icon.Search />
                  </i>
                </div>

                <h3>Related Items</h3>
              </div>
            </div>

            <div className="col-lg-3 col-md-4">
              <div className="single-repair-services">
                <div className="icon">
                  <i>
                    <Icon.Award />
                  </i>
                </div>

                <h3>Fully Secured</h3>
              </div>
            </div>

            <div className="col-lg-3 col-md-4">
              <div className="single-repair-services">
                <div className="icon">
                  <i>
                    <Icon.CreditCard />
                  </i>
                </div>

                <h3>Online Payment</h3>
              </div>
            </div>

            <div className="col-lg-3 col-md-4">
              <div className="single-repair-services">
                <div className="icon">
                  <i>
                    <Icon.Settings />
                  </i>
                </div>

                <h3>Fully Customizable</h3>
              </div>
            </div>

            <div className="col-lg-3 col-md-4">
              <div className="single-repair-services">
                <div className="icon">
                  <i>
                    <Icon.Truck />
                  </i>
                </div>

                <h3>Order & Shipping Management </h3>
              </div>
            </div>

            <div className="col-lg-3 col-md-4">
              <div className="single-repair-services">
                <div className="icon">
                  <i>
                    <Icon.MoreHorizontal />
                  </i>
                </div>

                <h3>& Many More</h3>
                <br />
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }
}

export default Services;
<file_sep>import React from 'react'

export default function PageTitle(props) {
    return (
        <div className="page-title-area">
            <div className="d-table">
                <div className="d-table-cell">
                    <div className="container">
                        <h2>{props.title}</h2>
                    </div>
                </div>
            </div>
            
            <div className="shape1"><img src={require("../../static/images/shape1.png")} alt="shape" /></div>
            <div className="shape2 rotateme"><img src={require("../../static/images/shape2.svg")} alt="shape" /></div>
            <div className="shape3"><img src={require("../../static/images/shape3.svg")} alt="shape" /></div>
            <div className="shape4"><img src={require("../../static/images/shape4.svg")} alt="shape" /></div>
            <div className="shape5"><img src={require("../../static/images/shape5.png")} alt="shape" /></div>
            <div className="shape6 rotateme"><img src={require("../../static/images/shape4.svg")} alt="shape" /></div>
            <div className="shape7"><img src={require("../../static/images/shape4.svg")} alt="shape" /></div>
            <div className="shape8 rotateme"><img src={require("../../static/images/shape2.svg")} alt="shape" /></div>
        </div>
    )
}
<file_sep>import React from 'react'
import { Preloader, Placeholder } from 'react-preloading-screen'
import Header from '../components/hashcraft/Header'
import Footer from '../components/hashcraft/Footer'
import GoTop from '../components/hashcraft/GoTop'
import PageTitle from '../components/hashcraft/PageTitle'
import DetailsBody from '../components/hashcraft/portfolio/fotisto/DetailsBody'
import CtaArea from "../components/hashcraft/AgencyCtaArea";

export default () => (
    <Preloader>
        <Placeholder>
            <div className="preloader">
                <div className="spinner"></div>
            </div>
        </Placeholder>
        <Header />
        <PageTitle title='Fotisto'/>
        <DetailsBody />
        <CtaArea />
        <Footer />
        <GoTop scrollStepInPx="50" delayInMs="16.66" />
    </Preloader>
)
<file_sep>import React from "react";
import { Preloader, Placeholder } from "react-preloading-screen";
import NoSSR from "react-no-ssr";
import Header from "../components/hashcraft/Header";
import MainBanner from "../components/hashcraft/MainBanner";
import BoxArea from "../components/hashcraft/BoxArea";
import ServicesArea from "../components/hashcraft/ServicesArea";
import Features from "../components/hashcraft/Features";
import RecentWork from "../components/hashcraft/RecentWork";
import Feedback from "../components/hashcraft/Feedback";
import Funfacts from "../components/hashcraft/Funfacts";
import CtaArea from "../components/hashcraft/AgencyCtaArea";
import Footer from "../components/hashcraft/Footer";
import GoTop from "../components/hashcraft/GoTop";

const Index = () => {
  return (
    <NoSSR>
      <Preloader>
        <Placeholder>
          <div className="preloader">
            <div className="spinner"></div>
          </div>
        </Placeholder>
        <Header />
        <MainBanner />
        <BoxArea />
        <ServicesArea />
        <Features />
        <Funfacts />
        <RecentWork />
        <Feedback />
        <CtaArea />
        <Footer />
        <GoTop scrollStepInPx="50" delayInMs="16.66" />
      </Preloader>
    </NoSSR>
  );
};

export default Index;

// "start": "NODE_ENV=production node server.js -p $PORT"
<file_sep>import React, { Component } from "react";
import Link from "next/link";

class Services extends Component {
  render() {
    return (
      <section className="ml-services-area ptb-80 bg-f7fafd">
        <div className="container">
          <div className="row">
            <div className="col-lg-4 col-sm-6 col-md-6">
              <Link href="/ui-ux">
                <div className="single-ml-services-box">
                  <div className="image">
                    <img
                      src={require("../../static/images/home/uiux.png")}
                      alt="image"
                    />
                  </div>
                  <h3>
                    <a>UI/UX Design</a>
                  </h3>
                  <p>
                    Lorem ipsum dolor sit amet elit, adipiscing, sed do eiusmod
                    tempor incididunt ut labore dolore magna aliqua.
                  </p>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-sm-6 col-md-6">
              <Link href="/web-app">
                <div className="single-ml-services-box">
                  <div className="image1">
                    <img
                      src={require("../../static/images/home/webapp.jpg")}
                      alt="image"
                    />
                  </div>
                  <h3>
                    <a>Web Development</a>
                  </h3>
                  <p>
                    Lorem ipsum dolor sit amet elit, adipiscing, sed do eiusmod
                    tempor incididunt ut labore dolore magna aliqua.
                  </p>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-sm-6 col-md-6">
              <Link href="/mobile-app">
                <div className="single-ml-services-box">
                  <div className="image">
                    <img
                      src={require("../../static/images/home/mobileapp.jpg")}
                      alt="image"
                    />
                  </div>
                  <h3>
                    <a>Mobile App Development</a>
                  </h3>
                  <p>
                    Lorem ipsum dolor sit amet elit, adipiscing, sed do eiusmod
                    tempor incididunt ut labore dolore magna aliqua.
                  </p>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-sm-6 col-md-6">
              <Link href="/ecommerce">
                <div className="single-ml-services-box">
                  <div className="image1">
                    <img
                      src={require("../../static/images/home/home.png")}
                      alt="image"
                    />
                  </div>
                  <h3>
                    <a>E-Commerce Development</a>
                  </h3>
                  <p>
                    Lorem ipsum dolor sit amet elit, adipiscing, sed do eiusmod
                    tempor incididunt ut labore dolore magna aliqua.
                  </p>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-sm-6 col-md-6">
              <Link href="/digital-marketing">
                <div className="single-ml-services-box">
                  <div className="image1">
                    <img
                      src={require("../../static/images/home/digitalmarketing.jpg")}
                      alt="image"
                    />
                  </div>
                  <h3>
                    <a>Digital Marketing</a>
                  </h3>
                  <p>
                    Lorem ipsum dolor sit amet elit, adipiscing, sed do eiusmod
                    tempor incididunt ut labore dolore magna aliqua.
                  </p>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-sm-6 col-md-6">
              <Link href="/dedicated-team">
                <div className="single-ml-services-box">
                  <div className="image">
                    <img
                      src={require("../../static/images/home/dedicatedteam.jpg")}
                      alt="image"
                    />
                  </div>
                  <h3>
                    <a>Dedicated Team</a>
                  </h3>
                  <p>
                    Lorem ipsum dolor sit amet elit, adipiscing, sed do eiusmod
                    tempor incididunt ut labore dolore magna aliqua.
                  </p>
                </div>
              </Link>
            </div>
          </div>
        </div>

        {/* Shape Images */}
        <div className="shape1">
          <img src={require("../../static/images/shape1.png")} alt="shape" />
        </div>
        <div className="shape2 rotateme">
          <img src={require("../../static/images/shape2.svg")} alt="shape" />
        </div>
        <div className="shape3">
          <img src={require("../../static/images/shape3.svg")} alt="shape" />
        </div>
        <div className="shape4">
          <img src={require("../../static/images/shape4.svg")} alt="shape" />
        </div>
        <div className="shape7">
          <img src={require("../../static/images/shape4.svg")} alt="shape" />
        </div>
        <div className="shape8 rotateme">
          <img src={require("../../static/images/shape2.svg")} alt="shape" />
        </div>
      </section>
    );
  }
}

export default Services;
<file_sep>import React from "react";
import Link from "next/link";

export default function ProjectContent() {
  return (
    <section className="works-area ptb-80 bg-f7fafd">
      <div className="container">
        <div className="row">
          <div className="col-lg-4 col-md-6">
            <Link href="/vonza">
              <div className="single-works">
                <img
                  src={require("../../../static/images/home/vonza1.png")}
                  alt="image"
                />
                <div className="works-content">
                  <h3>Vonza</h3>
                  <p>
                    Vonza is the ultimate platform to build online courses, sell
                    products, offer services, construct sales funnels, schedule
                    appointments, launch email marketing campaigns and develop
                    amazing websites.
                  </p>
                </div>
              </div>
            </Link>
          </div>

          <div className="col-lg-4 col-md-6">
            <Link href="/rapidsolution">
              <div className="single-works">
                <img
                  src={require("../../../static/images/home/rapid1.png")}
                  alt="image"
                />

                <div className="works-content">
                  <h3>Rapid Solution</h3>
                  <p>
                    Rapid Solution is the first laptop repair service in Lahore
                    to provide all sort of laptop repair solutions at your
                    doorstep.
                  </p>
                </div>
              </div>
            </Link>
          </div>

          <div className="col-lg-4 col-md-6">
            <Link href="/fotisto">
              <div className="single-works">
                <img
                  src={require("../../../static/images/home/fotisto1.png")}
                  alt="image"
                />

                <div className="works-content">
                  <h3>Fotisto</h3>
                  <p>
                    Fotisto is a marketplace that uses AI and Cloud-based tools
                    to bridge clients with photographers/videographers.
                  </p>
                </div>
              </div>
            </Link>
          </div>

          <div className="col-lg-4 col-md-6">
            <Link href="/psms">
              <div className="single-works">
                <img
                  src={require("../../../static/images/home/school1.png")}
                  alt="image"
                />

                <div className="works-content">
                  <h3>School Information System</h3>
                  <p>
                    Our School Management System is specialized to manage
                    education based organization like school, colleges,
                    Universities etc
                  </p>
                </div>
              </div>
            </Link>
          </div>

          <div className="col-lg-4 col-md-6">
            <Link href="/swatrader">
              <div className="single-works">
                <img
                  src={require("../../../static/images/home/furniture.png")}
                  alt="image"
                />

                <div className="works-content">
                  <h3>SWA Trader</h3>
                  <p>
                    SWA Trader is one stop online shopping store. Having
                    all kinds of products from clothing and apparel to
                    electronics and mobile phones.
                  </p>
                </div>
              </div>
            </Link>
          </div>
        </div>
      </div>

      <div className="shape8 rotateme">
        <img src={require("../../../static/images/shape2.svg")} alt="shape" />
      </div>
      <div className="shape2 rotateme">
        <img src={require("../../../static/images/shape2.svg")} alt="shape" />
      </div>
      <div className="shape7">
        <img src={require("../../../static/images/shape4.svg")} alt="shape" />
      </div>
      <div className="shape4">
        <img src={require("../../../static/images/shape4.svg")} alt="shape" />
      </div>
    </section>
  );
}
<file_sep>import React from 'react'
import Link from 'next/link'
import dynamic from 'next/dynamic'

const Odometer = dynamic(import('react-odometerjs'),{
    ssr: false,
    loading: () => 0
});
import 'odometer/themes/odometer-theme-default.css';

class Funfacts extends React.Component {

    state = {
        download: 0,
        feedback: 0,
        worker: 0,
        contributor: 0
    };

    componentDidMount(){
        this.setState({ 
            download: 180,
            feedback: 250,
            worker: 500,
            contributor: 70
        });
    }

    render(){
        const { download, feedback, worker, contributor } = this.state;
        return (
            <section className="funfacts-area ptb-80">
                <div className="container">
                    <div className="section-title">
                        <h2>We always try to understand users expectation</h2>
                        <div className="bar"></div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
    
                    <div className="row">
                        <div className="col-lg-3 col-md-3 col-6">
                            <div className="funfact">
                                <h3>
                                    <Odometer format="d" duration={500} value={download} />K
                                </h3>
                                <p>Downloaded</p>
                            </div>
                        </div>
    
                        <div className="col-lg-3 col-md-3 col-6">
                            <div className="funfact">
                                <h3>
                                    <Odometer format="d" duration="500" value={feedback} />K
                                </h3>
                                <p>Feedback</p>
                            </div>
                        </div>
    
                        <div className="col-lg-3 col-md-3 col-6">
                            <div className="funfact">
                                <h3>
                                    <Odometer format="d" duration="500" value={worker} />+
                                </h3>
                                <p>Workers</p>
                            </div>
                        </div>
    
                        <div className="col-lg-3 col-md-3 col-6">
                            <div className="funfact">
                                <h3>
                                    <Odometer format="d" duration="500" value={contributor} />+
                                </h3>
                                <p>Contributors</p>
                            </div>
                        </div>
                    </div>
    
                    <div className="contact-cta-box">
                        <h3>Have any question about us?</h3>
                        <p>Don't hesitate to contact us</p>
                        <Link href="#">
                            <a className="btn btn-primary">Contact Us</a>
                        </Link>
                        
                    </div>
    
                    <div className="map-bg">
                        <img src={require("../../static/images/map.png")} alt="map" />
                    </div>
                </div>
            </section>
        )
    }
}

export default Funfacts<file_sep>import React from "react";
import { withRouter } from "next/router";
import Link from "../common/ActiveLink";
import * as Icon from "react-feather";

class DefaultStyle extends React.Component {
  state = {
    collapsed: true,
  };

  toggleNavbar = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  componentDidMount() {
    let elementId = document.getElementById("navbar");
    document.addEventListener("scroll", () => {
      if (window.scrollY > 170) {
        elementId.classList.add("is-sticky");
      } else {
        elementId.classList.remove("is-sticky");
      }
    });
    window.scrollTo(0, 0);
  }

  render() {
    const { collapsed } = this.state;
    const classOne = collapsed
      ? "collapse navbar-collapse"
      : "collapse navbar-collapse show";
    const classTwo = collapsed
      ? "navbar-toggler navbar-toggler-right collapsed"
      : "navbar-toggler navbar-toggler-right";

    let { pathname } = this.props.router;
    let layOutCls = "";
    if (pathname == "/home-three") {
      layOutCls = "p-relative";
    }
    return (
      <header id="header">
        <div id="navbar" className={`startp-nav ${layOutCls}`}>
          <div className="container">
            <nav className="navbar navbar-expand-md navbar-light">
              <Link href="/">
                <a
                  className="navbar-brand"
                  onClick={() => window.location.refresh()}
                >
                  <img
                    src={require("../../static/images/logop1.png")}
                    alt="logo"
                  />
                </a>
              </Link>

              <button
                onClick={this.toggleNavbar}
                className={classTwo}
                type="button"
                data-toggle="collapse"
                data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <span className="navbar-toggler-icon"></span>
              </button>

              <div className={classOne} id="navbarSupportedContent">
                <ul className="navbar-nav nav ml-auto">
                  <li className="nav-item">
                    <Link activeClassName="active" href="/about">
                      <a className="nav-link">COMPANY</a>
                    </Link>
                  </li>

                  <li className="nav-item">
                    <Link activeClassName="active" href="/services">
                      <a href="#" className="nav-link">
                        SERVICES <Icon.ChevronDown />
                      </a>
                    </Link>
                    <ul className="dropdown_menu">
                      <li className="nav-item">
                        <Link activeClassName="active" href="/ui-ux">
                          <a className="nav-link">UI/UX Design</a>
                        </Link>
                      </li>

                      <li className="nav-item">
                        <Link activeClassName="active" href="/web-app">
                          <a className="nav-link">Web Development</a>
                        </Link>
                      </li>

                      <li className="nav-item">
                        <Link activeClassName="active" href="/mobile-app">
                          <a className="nav-link">Mobile App Development</a>
                        </Link>
                      </li>

                      <li className="nav-item">
                        <Link activeClassName="active" href="/ecommerce">
                          <a className="nav-link">E-commerce Development</a>
                        </Link>
                      </li>
                      
                      <li className="nav-item">
                        <Link activeClassName="active" href="/digital-marketing">
                          <a className="nav-link">Digital Marketing</a>
                        </Link>
                      </li>
                      
                      <li className="nav-item">
                        <Link activeClassName="active" href="/dedicated-team">
                          <a className="nav-link">Dedicated Team</a>
                        </Link>
                      </li>
                    </ul>
                  </li>

                  <li className="nav-item">
                    <a href="/solution" className="nav-link">
                      SOLUTIONS <Icon.ChevronDown />
                    </a>
                    <ul className="dropdown_menu">
                      <li className="nav-item">
                        <Link activeClassName="active" href="/sms">
                          <a className="nav-link">School Information System</a>
                        </Link>
                      </li>

                      <li className="nav-item">
                        <Link activeClassName="active" href="/pos">
                          <a className="nav-link">Point of Sale</a>
                        </Link>
                      </li>

                      <li className="nav-item">
                        <Link activeClassName="active" href="/e-commerce">
                          <a className="nav-link">E Commerce</a>
                        </Link>
                      </li>
                    </ul>
                  </li>

                  <li className="nav-item">
                    <Link activeClassName="active" href="/portfolio">
                      <a className="nav-link">PORTFOLIO</a>
                    </Link>
                  </li>

                  <li className="nav-item">
                    <Link activeClassName="active" href="/contact">
                      <a className="nav-link">CONTACT</a>
                    </Link>
                  </li>
                </ul>
              </div>

              <div className="others-option">
                <Link href="/contact#quotes">
                  <a className="btn btn-primary">
                    Request&nbsp; a &nbsp;quotes
                  </a>
                </Link>
              </div>
            </nav>
          </div>
        </div>
      </header>
    );
  }
}

export default withRouter(DefaultStyle);
<file_sep>import React from "react";

export default function About() {
  return (
    <section className="about-area ptb-80">
      <div className="container">
        <div className="row">
          <div className="col-lg-6 col-md-12">
            <div className="about-image">
              <img
                src={require("../../static/images/home/aboutus.jpg")}
                alt="image"
              />
            </div>
          </div>

          <div className="col-lg-6 col-md-12">
            <div className="about-content">
              <div className="section-title">
                <h2>About Us</h2>
                <div className="bar"></div>
                <p>
                  Basic service delivery isn't enough to differentiate any web
                  development firm in today's competitive marketplace.
                  Understanding not only our client's web needs but their
                  business needs has propelled <b>Hashcrafts</b> beyond customer
                  satisfaction to loyalty.
                </p>
              </div>

              <p>
                <b>Hashcrafts</b> have established a reputation for consistently
                delivering mission critical, technically challenging projects
                under tight time lines, while also providing exceptional
                customer service and support to our clients. This in turn has
                led to extremely positive long-term working relationships with
                both clients and solution partners alike.
              </p>

              <p>
                {" "}
                The natural benefit for clients is an efficient team that is
                driven by the market to produce quality. The best teams win and
                the proven engineering processes that have allowed our founders
                to exit multiple firms are built into our efforts.{" "}
              </p>

              <p>
                From business process inquiry to systems engineering, we provide
                services tailored to your specific needs to enable an enterprise
                where all the systems are integrated as work as a whole. We
                provide ERP, CRM and custom applications to not only increase
                the productivity of your team but also makes managing them a
                breeze.
              </p>
            </div>
          </div>
        </div>

        <div className="about-inner-area">
          <div className="row">
            <div className="col-lg-6 col-md-6">
              <div className="about-text">
                <h3>Our Mission</h3>
                <p>
                  Whether it is a consumer-oriented app or a transformative
                  enterprise-class solution, the company leads the process from
                  ideation and concept to delivery, and provides ongoing support
                  through our framework. You’re investing more than money — it’s
                  also energy, intelligence, brand, and the expanding potential
                  of your business. Hashcrafts translates this investment into
                  meaningful impact for you and your audience.
                </p>
              </div>
            </div>

            <div className="col-lg-6 col-md-6 offset-lg-0 offset-md-3">
              <div className="about-text">
                <h3>Who we are</h3>
                <p>
                  We are <b>Hashcrafts</b>, one of the Pakistan’s leading
                  bespoke software development companies with topranked
                  professional employees. We design intelligent, cost-effective
                  and intuitive web applications, desktop applications and
                  mobile apps that help streamline processes for businesses as
                  well as create new revenue streams for start-ups and
                  established businesses alike
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
<file_sep>import React, { Component } from "react";
import Link from "next/link";

class Services extends Component {
  render() {
    return (
      <section className="ml-services-area ptb-80">
        <div className="container">
          <div className="section-title">
            {/* <span className="sub-title">Our Solutions</span> */}
            <h2>Our Services</h2>
            <div className="bar"></div>
            {/* <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p> */}
          </div>

          <div className="row">
            <div className="col-lg-4 col-sm-6 col-md-6">
              <Link href="ui-ux">
                <div className="single-ml-services-box">
                  <div className="image">
                    <img
                      src={require("../../static/images/services-image/service-image1.png")}
                      alt="image"
                    />
                  </div>
                  <h3>
                    <a>UI/UX Design</a>
                  </h3>
                  <p>
                    Lorem ipsum dolor sit amet elit, adipiscing, sed do eiusmod
                    tempor incididunt ut labore dolore magna aliqua.
                  </p>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-sm-6 col-md-6">
              <Link href="web-app">
                <div className="single-ml-services-box">
                  <div className="image">
                    <img
                      src={require("../../static/images/services-image/service-image2.png")}
                      alt="image"
                    />
                  </div>
                  <h3>
                    <a>Web Development</a>
                  </h3>
                  <p>
                    Lorem ipsum dolor sit amet elit, adipiscing, sed do eiusmod
                    tempor incididunt ut labore dolore magna aliqua.
                  </p>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-sm-6 col-md-6">
              <Link href="/mobile-app">
                <div className="single-ml-services-box">
                  <div className="image">
                    <img
                      src={require("../../static/images/services-image/service-image3.png")}
                      alt="image"
                    />
                  </div>
                  <h3>
                    <a>Mobile App Development</a>
                  </h3>
                  <p>
                    Lorem ipsum dolor sit amet elit, adipiscing, sed do eiusmod
                    tempor incididunt ut labore dolore magna aliqua.
                  </p>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-sm-6 col-md-6">
              <Link href="/ecommerce">
                <div className="single-ml-services-box">
                  <div className="image">
                    <img
                      src={require("../../static/images/services-image/service-image4.png")}
                      alt="image"
                    />
                  </div>
                  <h3>
                    <a>E-Commerce Development</a>
                  </h3>
                  <p>
                    Lorem ipsum dolor sit amet elit, adipiscing, sed do eiusmod
                    tempor incididunt ut labore dolore magna aliqua.
                  </p>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-sm-6 col-md-6">
              <Link href="/hybrid-app">
                <div className="single-ml-services-box">
                  <div className="image">
                    <img
                      src={require("../../static/images/services-image/service-image5.png")}
                      alt="image"
                    />
                  </div>
                  <h3>
                    <a>Hybrid App Development</a>
                  </h3>
                  <p>
                    Lorem ipsum dolor sit amet elit, adipiscing, sed do eiusmod
                    tempor incididunt ut labore dolore magna aliqua.
                  </p>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-sm-6 col-md-6">
              <Link href="/digital-marketing">
                <div className="single-ml-services-box">
                  <div className="image">
                    <img
                      src={require("../../static/images/services-image/service-image6.png")}
                      alt="image"
                    />
                  </div>
                  <h3>
                    <a>Digital Marketing</a>
                  </h3>
                  <p>
                    Lorem ipsum dolor sit amet elit, adipiscing, sed do eiusmod
                    tempor incididunt ut labore dolore magna aliqua.
                  </p>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-sm-6 col-md-6">
              <Link href="/app-deployment">
                <div className="single-ml-services-box">
                  <div className="image">
                    <img
                      src={require("../../static/images/services-image/service-image6.png")}
                      alt="image"
                    />
                  </div>
                  <h3>
                    <a>Application Deployment</a>
                  </h3>
                  <p>
                    Lorem ipsum dolor sit amet elit, adipiscing, sed do eiusmod
                    tempor incididunt ut labore dolore magna aliqua.
                  </p>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-sm-6 col-md-6">
              <Link href="/dedicated-team">
                <div className="single-ml-services-box">
                  <div className="image">
                    <img
                      src={require("../../static/images/services-image/service-image6.png")}
                      alt="image"
                    />
                  </div>
                  <h3>
                    <a>Dedicated Team</a>
                  </h3>
                  <p>
                    Lorem ipsum dolor sit amet elit, adipiscing, sed do eiusmod
                    tempor incididunt ut labore dolore magna aliqua.
                  </p>
                </div>
              </Link>
            </div>
          </div>
        </div>

        {/* Shape Images */}
        <div className="shape1">
          <img src={require("../../static/images/shape1.png")} alt="shape" />
        </div>
        <div className="shape2 rotateme">
          <img src={require("../../static/images/shape2.svg")} alt="shape" />
        </div>
        <div className="shape3">
          <img src={require("../../static/images/shape3.svg")} alt="shape" />
        </div>
        <div className="shape4">
          <img src={require("../../static/images/shape4.svg")} alt="shape" />
        </div>
        <div className="shape7">
          <img src={require("../../static/images/shape4.svg")} alt="shape" />
        </div>
        <div className="shape8 rotateme">
          <img src={require("../../static/images/shape2.svg")} alt="shape" />
        </div>
      </section>
    );
  }
}

export default Services;
<file_sep>import React from "react";
import Link from "next/link";
import * as Icon from "react-feather";

export default class Footer extends React.Component {
  render() {
    return (
      <footer className="footer-area bg-f7fafd">
        <div className="container">
          <div className="row">
            <div className="col-lg-3 col-md-6">
              <div className="single-footer-widget">
                <div className="logo">
                  <Link href="#">
                    <a>
                      <img
                        src={require("../../static/images/logo.png")}
                        alt="logo"
                      />
                    </a>
                  </Link>
                </div>
                <p>
                  Hashcrafts is a premium IT company that focuses on quality,
                  innovation, & speed. We utilize technology to bring results to
                  grow our clients businesses. We pride ourselves in great work
                  ethic, integrity, and end-results.
                </p>
              </div>
            </div>

            <div className="col-lg-3 col-md-6">
              <div className="single-footer-widget pl-5">
                <h3>Company</h3>
                <ul className="list">
                  <li>
                    <Link href="/">
                      <a>Home</a>
                    </Link>
                  </li>
                  <li>
                    <Link href="/about">
                      <a>About Us</a>
                    </Link>
                  </li>
                  <li>
                    <Link href="/services">
                      <a>Services</a>
                    </Link>
                  </li>

                  <li>
                    <Link href="/solution">
                      <a>Solution</a>
                    </Link>
                  </li>
                  <li>
                    <Link href="/portfolio">
                      <a>Portfolio</a>
                    </Link>
                  </li>
                  <li>
                    <Link href="/contact">
                      <a>Contact Us</a>
                    </Link>
                  </li>
                </ul>
              </div>
            </div>

            <div className="col-lg-3 col-md-6">
              <div className="single-footer-widget">
                <h3>Services</h3>
                <ul className="list">
                  <li>
                    <Link href="/ui-ux">
                      <a>UI/UX Design</a>
                    </Link>
                  </li>
                  <li>
                    <Link href="/web-app">
                      <a>Web Development</a>
                    </Link>
                  </li>
                  <li>
                    <Link href="/mobile-app">
                      <a>Mobile App Development</a>
                    </Link>
                  </li>
                  <li>
                    <Link href="/ecommerce">
                      <a>E-commerce Development</a>
                    </Link>
                  </li>
                  <li>
                    <Link href="/digital-marketing">
                      <a>Digital Marketing</a>
                    </Link>
                  </li>
                  <li>
                    <Link href="/dedicated-team">
                      <a>Dedicated Team</a>
                    </Link>
                  </li>
                </ul>
              </div>
            </div>

            <div className="col-lg-3 col-md-6">
              <div className="single-footer-widget">
                <h3>Address</h3>

                <ul className="footer-contact-info">
                  <li>
                    <Icon.MapPin />
                    IT Tower Gulberg, Lahore
                  </li>
                  <li>
                    <Icon.Mail />
                    {/* <Link href="#"> */}
                    <a><EMAIL></a>
                    {/* </Link> */}
                  </li>
                  <li>
                    <Icon.PhoneCall />
                    {/* <Link href="#"> */}
                    <a>+923248402906</a>
                    <br />
                    <a>+923224991944</a>
                    {/* </Link> */}
                  </li>
                </ul>
                <ul className="social-links">
                  <li>
                    <Link href="#">
                      <a className="facebook">
                        <Icon.Facebook />
                      </a>
                    </Link>
                  </li>
                  <li>
                    <Link href="#">
                      <a className="twitter">
                        <Icon.Twitter />
                      </a>
                    </Link>
                  </li>
                  <li>
                    <Link href="#">
                      <a className="instagram">
                        <Icon.Instagram />
                      </a>
                    </Link>
                  </li>
                  <li>
                    <Link href="#">
                      <a className="linkedin">
                        <Icon.Linkedin />
                      </a>
                    </Link>
                  </li>
                </ul>
              </div>
            </div>

            <div className="col-lg-12 col-md-12">
              <div className="copyright-area">
                <p>&copy; Copyright 2020 hashcrafts. All rights reserved</p>
              </div>
            </div>
          </div>
        </div>

        <img
          src={require("../../static/images/map.png")}
          className="map"
          alt="map"
        />
      </footer>
    );
  }
}
<file_sep>import React, { Component } from "react";
import * as Icon from "react-feather";
import "../../../../node_modules/react-modal-video/css/modal-video.min.css";
import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";

const images = [
  require("../../../../static/images/home/dashboard.png"),
  require("../../../../static/images/home/bags.png"),
  require("../../../../static/images/home/furniture.png"),
  require("../../../../static/images/home/checkout.png"),
  require("../../../../static/images/home/checkout1.png"),
];

export default class DetailsBody extends Component {
  state = {
    isOpen: false,
    photoIndex: 0,
    isOpenImage: false,
  };

  openModal = () => {
    this.setState({ isOpen: true });
  };

  render() {
    const { photoIndex, isOpenImage } = this.state;
    return (
      <section className="project-details-area ptb-80">
        <div className="container">
          <div className="row">
            <div className="col-lg-6 col-md-6">
              <div
                className="project-details-image"
                onClick={() => this.setState({ isOpenImage: true })}
              >
                <img
                  src={require("../../../../static/images/home/dashboard.png")}
                  alt="work"
                />
                <Icon.Plus />
              </div>
            </div>

            {isOpenImage && (
              <Lightbox
                mainSrc={images[photoIndex]}
                nextSrc={images[(photoIndex + 1) % images.length]}
                prevSrc={
                  images[(photoIndex + images.length - 1) % images.length]
                }
                onCloseRequest={() => this.setState({ isOpenImage: false })}
                onMovePrevRequest={() =>
                  this.setState({
                    photoIndex:
                      (photoIndex + images.length - 1) % images.length,
                  })
                }
                onMoveNextRequest={() =>
                  this.setState({
                    photoIndex: (photoIndex + 1) % images.length,
                  })
                }
              />
            )}

            <div className="col-lg-6 col-md-6">
              <div
                className="project-details-image"
                onClick={() => this.setState({ isOpenImage: true })}
              >
                <img
                  src={require("../../../../static/images/home/bags.png")}
                  alt="work"
                />
                <Icon.Plus />
              </div>
            </div>

            <div className="col-lg-12 col-md-12">
              <div className="project-details-desc">
                <h3>E-commerce Solution</h3>
                <p>
                  Take your e-commerce efforts to the next level to be the best
                  in your niche or start your full-on digital transformation. We
                  can help you be the best online business in your category,
                  improve existing workflow, analyze visitors’ shopping patterns
                  and drive value for your business’s digital presence and your
                  customers. Your e-commerce presence can be the tip of the
                  spear for customers engaging with your product and your brand.
                  Tying together inventory management, shipping, billing and
                  product analytics can materially drive return on investment.
                  The e-commerce landscape is rapidly evolving and fiercely
                  competitive. Whether you are implementing a new platform,
                  updating existing infrastructure, leverage our experienced
                  team to help you filter out the noise. When you invest in a
                  robust commerce experience, it powers your sales team to be
                  more efficient and spend more time fostering customer
                  relationships. Our eCommerce solution gives your customers the
                  power to interact with your business how they want, when they
                  want, and at their moment of relevance.
                </p>
                <p>
                  Our super-fast E-commerce template was made to help anyone
                  start their very own online store at ease. Built with React,
                  NextJS, TypeScript, GraphQL, Type-GraphQL & Styled-Components,
                  our template promises to deliver an interface for your
                  business that is quick and easy to set up! For GraphQL we used
                  GraphQL and type-graphql, you can build your schema very
                  easily. GraphQL playground makes its own documentation, your
                  frontend team will love using it. We have added REST API
                  integration with SWR for the customers who had already a
                  REST-based backend for remote data fetching.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }
}
<file_sep>import React from "react";
import { Preloader, Placeholder } from "react-preloading-screen";
import Header from "../components/hashcraft/Header";
import Footer from "../components/hashcraft/Footer";
import GoTop from "../components/hashcraft/GoTop";
import PageTitle from "../components/hashcraft/PageTitle";
import ProjectContent from "../components/hashcraft/portfolio/ProjectContent";
import CtaArea from "../components/hashcraft/AgencyCtaArea";

class Project extends React.Component {
  render() {
    return (
      <Preloader>
        <Placeholder>
          <div className="preloader">
            <div className="spinner"></div>
          </div>
        </Placeholder>
        <Header />
        <PageTitle title="Our Portfolio" />
        <ProjectContent />
        <CtaArea />
        <Footer />
        <GoTop scrollStepInPx="50" delayInMs="16.66" />
      </Preloader>
    );
  }
}

export default Project;
<file_sep>const express = require("express");
const next = require("next");
const path = require("path");
const bodyParser = require("body-parser");
const dev = process.env.NODE_ENV !== "production";
const app = next({ dir: ".", dev });
const handle = app.getRequestHandler();
const UserModel = require("./server/Model/user");

//DB connection
require("./server/Helper/db");

app.prepare().then(() => {
  const server = express();
  server.use(
    "/images",
    express.static(path.join(__dirname, "images"), {
      maxAge: dev ? "0" : "365d",
    })
  );

  server.use(bodyParser.json());

  server.get("*", (req, res) => {
    return handle(req, res);
  });

  server.post("/api/contact", (req, res) => {
    const { name, email, phone, subject, text } = req.body;

    const user = new UserModel({
        name,
        email,
        phone,
        subject,
        message: text
    });

    user
      .save()
      .then((data) => {
        res.status(200).send("success");
        console.log(data);
      })
      .catch((err) => res.send(err));
  });
  const PORT = process.env.PORT || 3000;

  server.listen(PORT, (err) => {
    if (err) throw err;
    console.log(`> Read on http://localhost:${PORT}`);
  });
});
<file_sep>const nodemailer = require('nodemailer')
const sgTransport = require('nodemailer-sendgrid-transport')

const transporter = nodemailer.createTransport(sgTransport({
    auth: {
      api_key: '<KEY>'
    }
}))

const send = ({ name, email, phone, subject, text }) => {

    const textBody = `Name: ${name}   
                Subject: ${subject}             
                Email: ${email}
                Phone: ${phone}
                Body: ${text}
                This email came from StartP React.js & Next.js template
                `

    const from = name && email ? `${name} <${email}>` : `${name || email}`

    const message = {
        from,
        to: '<EMAIL>',
        subject: subject,
        text: textBody,
        replyTo: from
    }

    return new Promise((resolve, reject) => {
        transporter.sendMail(message, (error, info) =>
            error ? reject(error) : resolve(info)
        )
    })
}

module.exports = send<file_sep>import React, { Component } from "react";
import ModalVideo from "react-modal-video";
import * as Icon from "react-feather";
import "../../../../node_modules/react-modal-video/css/modal-video.min.css";
import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";

const images = [
  require("../../../../static/images/home/school1.png"),
  require("../../../../static/images/home/school3.png"),
  require("../../../../static/images/home/school4.png"),
  require("../../../../static/images/home/school5.png"),
  require("../../../../static/images/home/school2.png"),
];

export default class DetailsBody extends Component {
  state = {
    isOpen: false,
    photoIndex: 0,
    isOpenImage: false,
  };

  openModal = () => {
    this.setState({ isOpen: true });
  };

  render() {
    const { photoIndex, isOpenImage } = this.state;
    return (
      <section className="project-details-area ptb-80">
        <div className="container">
          <div className="row">
            <div className="col-lg-6 col-md-6">
              <div
                className="project-details-image"
                onClick={() => this.setState({ isOpenImage: true })}
              >
                <img
                  src={require("../../../../static/images/home/school1.png")}
                  alt="work"
                />

                <Icon.Plus />
              </div>
            </div>

            {isOpenImage && (
              <Lightbox
                mainSrc={images[photoIndex]}
                nextSrc={images[(photoIndex + 1) % images.length]}
                prevSrc={
                  images[(photoIndex + images.length - 1) % images.length]
                }
                onCloseRequest={() => this.setState({ isOpenImage: false })}
                onMovePrevRequest={() =>
                  this.setState({
                    photoIndex:
                      (photoIndex + images.length - 1) % images.length,
                  })
                }
                onMoveNextRequest={() =>
                  this.setState({
                    photoIndex: (photoIndex + 1) % images.length,
                  })
                }
              />
            )}

            <div className="col-lg-6 col-md-6">
              <div
                className="project-details-image"
                onClick={() => this.setState({ isOpenImage: true })}
              >
                <img
                  src={require("../../../../static/images/home/school4.png")}
                  alt="work"
                />

                <Icon.Plus />
              </div>
            </div>

            <div className="col-lg-12 col-md-12">
              <div className="project-details-desc">
                <h3>School Management System</h3>

                <p>
                  Our School Management System is uses for manage education
                  based organization like school, collage, Universities etc. It
                  is a powerful user-friendly System designed as per user's
                  perspective with multiple MIS reports & multiple login. The
                  number of schools is multiplying faster. Parents have become
                  more attentive about their child, their activities & progress
                  in the school. With our School Management System, parents will
                  receive complete information of their child their Attendance,
                  Daily Time table, Progress reports (current as well as
                  previous) from the comfort of their home.SMS & eMail facility
                  ensures the parents to remain updated with school activities.
                  Our school system can process-centric & continues its
                  functioning with a lesser number of staff. Now no tension
                  about employee job changing & finding data. Everything is now
                  electronically preserved.
                </p>

                <p>
                  Our School Management system is known for its spotless
                  structure and design and for its resourceful competence. Our
                  School Management Software, specifically designed and
                  developed to simplify the process of educational institutions
                  meets with all the technological and administrative
                  requirements of schools. The many tools enable proper workflow
                  in different departments leaving no room for errors with a
                  view to encourage and make positive difference in students.
                  This complete school management system automates and
                  administers different academic and non-academic tasks in
                  school making them easy, fast, efficient and accurate, aiding
                  multiple departments, prospective students, faculties, staff
                  and others. This school automation system has been created to
                  help every institution manage all their data in a seamless and
                  systematic manner. The product ensures to provide quality and
                  result oriented solutions to all your worries.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }
}
<file_sep>import React from 'react'
import { Preloader, Placeholder } from 'react-preloading-screen'
import Header from '../components/hashcraft/Header'
import Footer from '../components/hashcraft/Footer'
import GoTop from '../components/hashcraft/GoTop'
import PageTitle from '../components/hashcraft/PageTitle'
import ProjectContent from '../components/hashcraft/solutions/ProjectContent'
import CtaArea from "../components/hashcraft/AgencyCtaArea";

class Project extends React.Component {
    render() {
        return (
            <Preloader>
                <Placeholder>
                    <div className="preloader">
                        <div className="spinner"></div>
                    </div>
                </Placeholder>
                <Header />
                <PageTitle title='Our Solutions'/>
                <ProjectContent />
                
                <CtaArea />
                <Footer />
                <GoTop scrollStepInPx="50" delayInMs="16.66" />
            </Preloader>
        )
    }
}

export default Project<file_sep>import React, { Component } from "react";
import OwlCarousel from "react-owl-carousel3";

const options = {
  loop: false,
  nav: false,
  dots: true,
  autoplay: true,
  smartSpeed: 1000,
  autoplayTimeout: 5000,
  items: 1,
};

class Feedback extends Component {
  render() {
    return (
      <section className="feedback-area ptb-80">
        <div className="container">
          <div className="section-title">
            <h2>What clients saying</h2>
            <div className="bar"></div>
            <p>
              We deliver globally, providing result-driven project management
              and seamless communication.
            </p>
          </div>

          <OwlCarousel
            className="testimonials-slides owl-carousel owl-theme"
            {...options}
          >
            <div className="single-feedback-item">
              <div className="client-info align-items-center">
                <div className="image">
                  <img
                    src={require("../../static/images/client-image/client1.jpg")}
                    alt="image"
                  />
                </div>

                <div className="title">
                  <h3><NAME></h3>
                  <span>Lead Developer at Envato</span>
                </div>
              </div>

              <p>
                Quis ipsum suspendisse ultrices gravida. Risus commodo viverra
                maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit
                amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.
              </p>
            </div>

            <div className="single-feedback-item">
              <div className="client-info align-items-center">
                <div className="image">
                  <img
                    src={require("../../static/images/client-image/client2.jpg")}
                    alt="image"
                  />
                </div>

                <div className="title">
                  <h3><NAME></h3>
                  <span>Lead Developer at Envato</span>
                </div>
              </div>

              <p>
                Quis ipsum suspendisse ultrices gravida. Risus commodo viverra
                maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit
                amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.
              </p>
            </div>

            <div className="single-feedback-item">
              <div className="client-info align-items-center">
                <div className="image">
                  <img
                    src={require("../../static/images/client-image/client3.jpg")}
                    alt="image"
                  />
                </div>

                <div className="title">
                  <h3><NAME></h3>
                  <span>Lead Developer at Envato</span>
                </div>
              </div>

              <p>
                Quis ipsum suspendisse ultrices gravida. Risus commodo viverra
                maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit
                amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.
              </p>
            </div>
          </OwlCarousel>
        </div>

        <div className="shape5">
          <img src={require("../../static/images/shape5.png")} alt="shape" />
        </div>
      </section>
    );
  }
}

export default Feedback;
<file_sep>import React from "react";
import Link from "next/link";
import ReactWOW from "react-wow";
import Banner from "../../static/images/home/home.png";

const MainBanner = () => {
  return (
    <div className="main-banner">
      <div className="d-table">
        <div className="d-table-cell">
          <div className="container">
            <div className="row h-100 justify-content-center align-items-center">
              <div className="col-lg-5">
                <ReactWOW delay="0.5s" animation="fadeInLeft">
                  <div className="hero-content">
                    <h1>Craft Your Business With Us</h1>
                    <p>
                      We consult, design & engineer successful web, mobile &
                      custom software solutions, that fuel innovation & increase
                      business efficiency!
                    </p>

                    <Link href="#">
                      <a className="btn btn-primary">Get Started</a>
                    </Link>
                  </div>
                </ReactWOW>
              </div>

              <div className="col-lg-6 offset-lg-1">
                <ReactWOW delay="0.5s" animation="fadeInUp">
                  <img
                    src={Banner}
                    className="wow fadeInUp"
                    data-wow-delay="0"
                    alt="main-pic"
                  />
                </ReactWOW>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainBanner;
<file_sep>import React, { Component } from "react";
import Header from "../components/hashcraft/Header";
import PageTitle from "../components/hashcraft/PageTitle";
import Footer from "../components/hashcraft/Footer";
import FaqContent from "../components/hashcraft/ContentBody";
import WhyChoose from "../components/hashcraft/WhyChoose";

class ServiceDetails extends Component {
  render() {
    return (
      <React.Fragment>
        <Header />
        <PageTitle title='Web App Development'/>

        <section className="services-details-area ptb-80">
          <div className="container">
            <div className="row ">
              <div className="col-lg-6 services-details">
                <div className="services-details-desc">
                <h3>Productive & Engaging Web Solutions For Your Business</h3>
                  <p>
                    We empower our clients with adaptive web applications built
                    using React, PostgreSQL, Python, MongoDB, Angular, Node.js
                    to simplify complex business workflows.
                  </p>

                  <p>
                    We strive for efficiency in custom web applications by
                    subjecting them to accepted design standards and testing.
                    The agile practices followed by us ensure that the projects
                    are delivered within the stipulated time and budget.
                  </p>
                  <p>
                    Customized web applications fosters growth in valuation and
                    intellectual property in the long run. Businesses can better
                    streamline their daily operations and processes to fulfill
                    key challenges and achieve targeted goals.
                  </p>
                  <p>
                    We have carved out a niche in web application development,
                    alongside valued consulting and analysis solutions, to serve
                    growing businesses and industry leaders
                  </p>
                  <a className="btn btn-primary" href="#proposal">
                    Request a proposal
                  </a>
                </div>
              </div>

              <div className="col-lg-6 services-details-image">
                <img
                  src={require("../static/images/home/webapp.jpg")}
                  className="wow fadeInUp"
                  alt="image"
                />
              </div>
            </div>
          </div>
        </section>
        <WhyChoose />
        <FaqContent />
        <Footer />
      </React.Fragment>
    );
  }
}

export default ServiceDetails;
<file_sep>import React from "react";
import Link from "next/link";
import * as Icon from "react-feather";
import OwlCarousel from "react-owl-carousel3";

const slideOptions = {
  items: 4,
  loop: true,
  nav: false,
  autoplay: true,
  dots: false,
  responsive: {
    0: {
      items: 1,
    },
    768: {
      items: 2,
    },
    1200: {
      items: 3,
    },
    1500: {
      items: 4,
    },
  },
};

class RecentWork extends React.Component {
  render() {
    return (
      <section className="works-area ptb-80 bg-f7fafd">
        <div className="container">
          <div className="section-title">
            <h2>Our Recent Works</h2>
            <div className="bar"></div>
            <p>
              Some highlights of our favorite projects we've done for forward
              thinking clients.
            </p>
          </div>
        </div>

        <div className="row m-0">
          <OwlCarousel
            className="works-slides owl-carousel owl-theme"
            {...slideOptions}
          >
            <div className="item">
              <div className="col-lg-12">
                <Link href="/vonza">
                  <div className="single-works">
                    <img
                      src={require("../../static/images/home/vonza1.png")}
                      alt="image"
                    />

                    <div className="works-content">
                      <h3>Vonza</h3>
                      <p>
                        Vonza is the ultimate platform to build online courses,
                        sell products, offer services, construct sales funnels,
                        schedule appointments, launch email marketing campaigns
                        and develop amazing websites.
                      </p>
                    </div>
                  </div>
                </Link>
              </div>
            </div>

            <div className="item">
              <div className="col-lg-12">
                <Link href="/fotisto">
                  <div className="single-works">
                    <img
                      src={require("../../static/images/home/fotisto1.png")}
                      alt="image"
                    />

                    <div className="works-content">
                      <h3>Fotisto</h3>
                      <p>
                        Fotisto is a marketplace that uses AI and Cloud-based
                        tools to bridge clients with
                        photographers/videographers.
                      </p>
                    </div>
                  </div>
                </Link>
              </div>
            </div>

            <div className="item">
              <div className="col-lg-12">
                <Link href="/swatrader">
                  <div className="single-works">
                    <img
                      src={require("../../static/images/home/furniture.png")}
                      alt="image"
                    />

                    <div className="works-content">
                      <h3>SWA Trader</h3>
                      <p>
                        SWA Trader is one stop online shopping store. Having all
                        kinds of products from clothing and apparel to
                        electronics and mobile phones.
                      </p>
                    </div>
                  </div>
                </Link>
              </div>
            </div>

            <div className="item">
              <div className="col-lg-12">
                <Link href="/rapidsolution">
                  <div className="single-works">
                    <img
                      src={require("../../static/images/home/rapid1.png")}
                      alt="image"
                    />

                    <div className="works-content">
                      <h3>Rapid Solution</h3>
                      <p>
                        Rapid Solution is the first laptop repair service in
                        Lahore to provide all sort of laptop repair solutions at
                        your doorstep.
                      </p>
                    </div>
                  </div>
                </Link>
              </div>
            </div>
          </OwlCarousel>
        </div>
      </section>
    );
  }
}

export default RecentWork;
<file_sep>import React from "react";
import * as Icon from "react-feather";

const BoxArea = (props) => {
  return (
    <section className="boxes-area">
      <div className="container">
        <div className="row">
          <div className="col-lg-3 col-md-6">
            <div className="single-box">
              <div className="icon">
                <Icon.TrendingUp />
              </div>
              <h3>Business Strategy</h3>
              <p>
                We provide latest business specific strategies, identifying
                product strengths, adjusting pricing, acquiring new business.
              </p>
            </div>
          </div>

          <div className="col-lg-3 col-md-6">
            <div className="single-box bg-f78acb">
              <div className="icon">
                <Icon.Monitor />
              </div>
              <h3>Engineering monitoring</h3>
              <p>
                performance evaluation and close watch on developing project so
                that project will be in right shape and gives best desired
                performance.
              </p>
            </div>
          </div>

          <div className="col-lg-3 col-md-6">
            <div className="single-box bg-c679e3">
              <div className="icon">
                <Icon.Settings />
              </div>
              <h3>Maintenance</h3>
              <p>
                We assure our customers for satisfactory service and result.
                During maintenance we edit, revise, change and bring new content
                to the website.
              </p>
            </div>
          </div>

          <div className="col-lg-3 col-md-6">
            <div className="single-box bg-eb6b3d">
              <div className="icon">
                <Icon.Pocket />
              </div>
              <h3>Quality Assurance</h3>
              <p>
                {" "}
                We conduct thorough and rigorous quality checks on all of our
                projects to ensure you're getting what you expect from us.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default BoxArea;
<file_sep>import React, { Component } from 'react';
import Link from 'next/link';

class MainBanner extends Component {
    render() {
        return (
            <div className="agency-main-banner">
                <div className="container-fluid">
                    <div className="row align-items-center">
                        <div className="col-lg-6 col-md-12">
                            <div className="agency-banner-content">
                                <span className="sub-title">We are creative</span>
                                <h1>Digital Agency</h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>

                                <Link href="#">
                                    <a className="btn btn-secondary">Get Started</a>
                                </Link>
                            </div>
                        </div>

                        <div className="col-lg-6 col-md-12">
                            <div className="agency-banner-image">
                                <img src={require("../../static/images/agency-image/agency-banner-img.jpg")} alt="image" />
                            </div>
                        </div>
                    </div>
                </div>

                {/* Shape Images */}
                <div className="shape2 rotateme">
                    <img src={require("../../static/images/shape2.svg")} alt="shape" />
                </div>
                <div className="shape8 rotateme">
                    <img src={require("../../static/images/shape2.svg")} alt="shape" />
                </div>
                <div className="shape3">
                    <img src={require("../../static/images/shape3.svg")} alt="shape" />
                </div>
                <div className="shape4">
                    <img src={require("../../static/images/shape4.svg")} alt="shape" />
                </div>
            </div>
        );
    }
}

export default MainBanner;<file_sep>import React, { Component } from "react";
import * as Icons from "react-feather";

class Features extends Component {
  render() {
    return (
      <section className="hosting-features-area ptb-80 bg-f9f6f6">
        <div className="container">
          <div className="section-title">
            <h2>Our Features</h2>
            <div className="bar"></div>
            <p>
              Sharing our expertise and passion to build solutions that empower
              your business
            </p>
          </div>

          <div className="row">
            <div className="col-lg-4 col-md-6">
              <div className="single-hosting-features">
                <div className="icon">
                  <Icons.Settings />
                </div>

                <h3>Incredible Infrastructure</h3>
                <p>
                  {" "}
                  Our team of experienced professionals and proven methodologies
                  to offer purpose fit infrastructure solutions and deliverables
                  to meet specific business needs.
                </p>
              </div>
            </div>

            <div className="col-lg-4 col-md-6">
              <div className="single-hosting-features">
                <div className="icon bg-c679e3">
                  <Icons.TrendingUp />
                </div>

                <h3>Software Consultancy</h3>
                <p>
                  Consulting with you for a period of time to understand your
                  business, reviewing your current technology and giving you
                  recommendation for improvement
                </p>
              </div>
            </div>

            <div className="col-lg-4 col-md-6">
              <div className="single-hosting-features">
                <div className="icon">
                  <Icons.BarChart2 />
                </div>

                <h3>Business Analysis</h3>
                <p>
                  {" "}
                  We always talk to our customers to understand their needs. Our
                  team can analyze your project's functionality, business logics
                  & software architecture
                </p>
              </div>
            </div>

            <div className="col-lg-4 col-md-6">
              <div className="single-hosting-features">
                <div className="icon bg-c679e3">
                  <Icons.Cpu />
                </div>

                <h3>Dependability</h3>
                <p>
                  We endeavor to always deliver what we promise you, to meet
                  every deadline, and to communicate proactively
                </p>
                <br />
              </div>
            </div>

            <div className="col-lg-4 col-md-6">
              <div className="single-hosting-features">
                <div className="icon">
                  <Icons.Activity />
                </div>

                <h3>Empathy</h3>
                <p>
                  We put ourselves in the customers’ shoes to visualize the
                  world from their perspective, this allows us to create a
                  product that meets their needs and expectations.
                </p>
              </div>
            </div>

            <div className="col-lg-4 col-md-6">
              <div className="single-hosting-features">
                <div className="icon bg-c679e3">
                  <Icons.Anchor />
                </div>

                <h3>Creativity</h3>
                <p>
                  We encourage out-of-the-box thinking. Our teammates
                  collaborate, throw ideas around, speak with one another, and
                  clients to get those creative juices flowing.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }
}

export default Features;
<file_sep>import React, { Component } from "react";
import Header from "../components/hashcraft/Header";
import Footer from "../components/hashcraft/Footer";
import FaqContent from "../components/hashcraft/ContentBody";
import WhyChoose from "../components/hashcraft/WhyChoose";
import PageTitle from "../components/hashcraft/PageTitle";

class ServiceDetails extends Component {
  render() {
    return (
      <React.Fragment>
        <Header />
        <PageTitle title='Dedicated Team' />

        <section className="services-details-area ptb-80">
          <div className="container">
            <div className="row ">
              <div className="col-lg-6 services-details">
                <div className="services-details-desc">
                <h3>
                    Software experts who work exactly where, when, and how you
                    need them most
                  </h3>
                  <p>
                    For those of our customers desiring complete control of
                    every aspect of the development process, <b>Hashcrafts</b>{" "}
                    offers the Dedicated Software Development Team service.
                  </p>

                  <p>
                    Instead of hiring a recruiting agency and spending extra
                    time and money, cut out the middle man and get immediate
                    access to expert developers with Hashcrafts.
                  </p>
                  <p>
                    We use a rigorous hiring and training system to ensure that
                    our engineers are some of the best in the industry. Every
                    Hashcrafts engineer has expertise with at least two
                    different technology stacks and versatile development
                    experience to meet your unique business needs.We offers
                    fair, transparent pricing at every stage of your project.
                    And if your business needs change, our Dedicated Development
                    teams are trained to adjust their performance.
                  </p>
                  <p>
                    we've cultivated a unique company culture that's focused on
                    customers. All of our employees share common passion for
                    helping your business thrive by delivering high-quality
                    software. When you hire a Hashcrafts team, you're gaining a
                    true technology partner.
                  </p>
                  <a className="btn btn-primary" href="#proposal">
                    Request a proposal
                  </a>
                </div>
              </div>

              <div className="col-lg-6 services-details-image">
                <img
                  src={require("../static/images/home/dedicatedteam.jpg")}
                  className="wow fadeInUp"
                  alt="image"
                />
              </div>
            </div>
          </div>
        </section>
        <WhyChoose />
        <FaqContent />
        <Footer />
      </React.Fragment>
    );
  }
}

export default ServiceDetails;
<file_sep>import React, { Component } from 'react';
import Link from 'next/link';

class AboutArea extends Component {
    render() {
        return (
            <section className="agency-about-area">
                <div className="container-fluid">
                    <div className="row align-items-center">
                        <div className="col-lg-6 col-md-12">
                            <div className="agency-about-img">
                                <img src={require("../../static/images/agency-image/agency-about-img.jpg")} alt="image" />
                            </div>
                        </div>

                        <div className="col-lg-6 col-md-12">
                            <div className="agency-about-content">
                                <span className="sub-title">About Us</span>
                                <h2>Engaging New Audiences Through Smart Approach</h2>
                                <div className="bar"></div>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.Donec vitae sapien ut libero venenatis faucibus tempus.</p>

                                <Link href="#">
                                    <a className="btn btn-secondary">Discover More</a>
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Shape Images */}
                <div className="shape2 rotateme">
                    <img src={require("../../static/images/shape2.svg")} alt="shape" />
                </div>
                <div className="shape3">
                    <img src={require("../../static/images/shape3.svg")} alt="shape" />
                </div>
                <div className="shape6 rotateme">
                    <img src={require("../../static/images/shape4.svg")} alt="shape" />
                </div>
                <div className="shape7">
                    <img src={require("../../static/images/shape4.svg")} alt="shape" />
                </div>
                <div className="shape8 rotateme">
                    <img src={require("../../static/images/shape2.svg")} alt="shape" />
                </div>
                <div className="shape10">
                    <img src={require("../../static/images/agency-image/agency-shape2.png")} alt="image" />
                </div>
            </section>
        );
    }
}

export default AboutArea;<file_sep>import React from "react";
import Link from "next/link";
import * as Icon from "react-feather";
import OwlCarousel from "react-owl-carousel3";

const slideOptions = {
  items: 4,
  loop: true,
  nav: false,
  autoplay: true,
  dots: false,
  responsive: {
    0: {
      items: 1,
    },
    768: {
      items: 2,
    },
    1200: {
      items: 3,
    },
    1500: {
      items: 4,
    },
  },
};

class RecentWork extends React.Component {
  render() {
    return (
      <section className="works-area ptb-80 bg-f7fafd">
        <div className="container">
          <div className="section-title">
            <h2>Our Recent Works</h2>
            <div className="bar"></div>
            <p>
              Some highlights of our favorite projects we've done for forward
              thinking clients.
            </p>
          </div>
        </div>

        <div className="row m-0">
          <OwlCarousel
            className="works-slides owl-carousel owl-theme"
            {...slideOptions}
          >
            <div className="item">
              <div className="col-lg-12">
                <div className="single-works">
                  <img
                    src={require("../../static/images/works-image/works-image1.jpg")}
                    alt="image"
                  />

                  <Link href="#">
                    <a className="icon">
                      <Icon.Settings />
                    </a>
                  </Link>

                  <div className="works-content">
                    <h3>
                      <Link href="#">
                        <a>Incredible infrastructure</a>
                      </Link>
                    </h3>
                    <p>
                      Lorem ipsum dolor amet, adipiscing, sed do eiusmod tempor
                      incididunt ut labore dolore magna aliqua.
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div className="item">
              <div className="col-lg-12">
                <div className="single-works">
                  <img
                    src={require("../../static/images/works-image/works-image2.jpg")}
                    alt="image"
                  />

                  <Link href="#">
                    <a className="icon">
                      <Icon.Settings />
                    </a>
                  </Link>

                  <div className="works-content">
                    <h3>
                      <Link href="#">
                        <a>Incredible infrastructure</a>
                      </Link>
                    </h3>
                    <p>
                      Lorem ipsum dolor amet, adipiscing, sed do eiusmod tempor
                      incididunt ut labore dolore magna aliqua.
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div className="item">
              <div className="col-lg-12">
                <div className="single-works">
                  <img
                    src={require("../../static/images/works-image/works-image3.jpg")}
                    alt="image"
                  />

                  <Link href="#">
                    <a className="icon">
                      <Icon.Settings />
                    </a>
                  </Link>

                  <div className="works-content">
                    <h3>
                      <Link href="#">
                        <a>Incredible infrastructure</a>
                      </Link>
                    </h3>
                    <p>
                      Lorem ipsum dolor amet, adipiscing, sed do eiusmod tempor
                      incididunt ut labore dolore magna aliqua.
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div className="item">
              <div className="col-lg-12">
                <div className="single-works">
                  <img
                    src={require("../../static/images/works-image/works-image4.jpg")}
                    alt="image"
                  />

                  <Link href="#">
                    <a className="icon">
                      <Icon.Settings />
                    </a>
                  </Link>

                  <div className="works-content">
                    <h3>
                      <Link href="#">
                        <a>Incredible infrastructure</a>
                      </Link>
                    </h3>
                    <p>
                      Lorem ipsum dolor amet, adipiscing, sed do eiusmod tempor
                      incididunt ut labore dolore magna aliqua.
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div className="item">
              <div className="col-lg-12">
                <div className="single-works">
                  <img
                    src={require("../../static/images/works-image/works-image5.jpg")}
                    alt="image"
                  />

                  <Link href="#">
                    <a className="icon">
                      <Icon.Settings />
                    </a>
                  </Link>

                  <div className="works-content">
                    <h3>
                      <Link href="#">
                        <a>Incredible infrastructure</a>
                      </Link>
                    </h3>
                    <p>
                      Lorem ipsum dolor amet, adipiscing, sed do eiusmod tempor
                      incididunt ut labore dolore magna aliqua.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </OwlCarousel>
        </div>
      </section>
    );
  }
}

export default RecentWork;
