feat: new en offical web

website/en/.dockerignore

@@ -1,3 +0,0 @@
-node_modules
-build
-.next

website/en/.eslintrc

@@ -0,0 +1,3 @@
+{
+    "extends": "next/core-web-vitals"
+}

website/en/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

website/en/.gitignore

@@ -4,7 +4,6 @@
 /node_modules
 /.pnp
 .pnp.js
-.yarn/install-state.gz
 
 # testing
 /coverage
@@ -26,11 +25,13 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*.local
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
 # vercel
 .vercel
 
-# typescript
-*.tsbuildinfo
-next-env.d.ts
+.vscode

website/en/README.md

@@ -1,36 +1,49 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Next.js + ButterCMS Starter Project
+Live Demo: https://nextjs-starter-buttercms.vercel.app/
 
-## Getting Started
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FButterCMS%2Fnextjs-starter-buttercms&env=NEXT_PUBLIC_BUTTER_CMS_API_KEY&envDescription=Your%20ButterCMS%20API%20Token&envLink=https%3A%2F%2Fbuttercms.com%2Fsettings%2F&project-name=nextjs-starter-buttercms&repo-name=nextjs-starter-buttercms&redirect-url=https%3A%2F%2Fbuttercms.com%2Fonboarding%2Fvercel-starter-deploy-callback%2F&production-deploy-hook=Deploy%20Triggered%20from%20ButterCMS&demo-title=ButterCMS%20Next.js%20Starter&demo-description=Fully%20integrated%20with%20your%20ButterCMS%20account&demo-url=https%3A%2F%2Fnextjs-starter-buttercms.vercel.app%2F&demo-image=https://cdn.buttercms.com/r0tGK8xFRti2iRKBJ0eY&repository-name=nextjs-starter-buttercms)
 
-First, run the development server:
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/ButterCMS/nextjs-starter-buttercms&env%5BNEXT_PUBLIC_BUTTER_CMS_API_KEY%5D=check%20https://buttercms.com/settings)
 
+This Next.js starter project fully integrates with dynamic sample content from your ButterCMS account, including main menu, pages, blog posts, categories, and tags, all with a beautiful, custom theme with already-implemented search functionality. All of the included sample content is automatically created in your account dashboard when you sign up for a free trial of ButterCMS.
+
+A copy of this starter project can be easily and quickly deployed to Vercel or Heroku with the click of a button.
+## 1) Installation
+
+First, install the dependencies by cloning the repo and running one of the following commands, depending on your current setup:
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+git clone https://github.com/ButterCMS/nextjs-starter-buttercms.git
+cd nextjs-starter-buttercms
+npm install # or yarn install
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## 2) Set API Token
+
+To fetch your ButterCMS content, add your API token as an environment variable.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+```bash
+$ echo 'NEXT_PUBLIC_BUTTER_CMS_API_KEY=<Your API Token>' >> .env
+```
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+## 3) Run the local server
+
+To view the app in a browser, you'll need to run the local development server:
+
+```bash
+npm run dev # or yarn dev
+```
 
-## Learn More
+Congratulations! Your starter project is now live: [http://localhost:3000](http://localhost:3000).
 
-To learn more about Next.js, take a look at the following resources:
+## 4) Deploy
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+Deploy your Butterized proof of concept app and spread your love of Butter, to either 
+Vercel, the creators of Next.js, or to Heroku. With the click of a button, you'll create a copy of our starter project in your Git provider account, instantly deploy it, and institute a full content workflow connected to your ButterCMS account. Smooth.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FButterCMS%2Fnextjs-starter-buttercms&env=NEXT_PUBLIC_BUTTER_CMS_API_KEY&envDescription=Your%20ButterCMS%20API%20Token&envLink=https%3A%2F%2Fbuttercms.com%2Fsettings%2F&project-name=nextjs-starter-buttercms&repo-name=nextjs-starter-buttercms&redirect-url=https%3A%2F%2Fbuttercms.com%2Fonboarding%2Fvercel-starter-deploy-callback%2F&production-deploy-hook=Deploy%20Triggered%20from%20ButterCMS&demo-title=ButterCMS%20Next.js%20Starter&demo-description=Fully%20integrated%20with%20your%20ButterCMS%20account&demo-url=https%3A%2F%2Fnextjs-starter-buttercms.vercel.app%2F&demo-image=https://cdn.buttercms.com/r0tGK8xFRti2iRKBJ0eY&repository-name=nextjs-starter-buttercms)
 
-## Deploy on Vercel
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/ButterCMS/nextjs-starter-buttercms&env%5BNEXT_PUBLIC_BUTTER_CMS_API_KEY%5D=check%20https://buttercms.com/settings)
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## 5) Previewing
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Your starter project is automatically configured to show draft changes saved in your Butter account when run locally or deployed to a hosting provider. To disable this behavior, set the following value in your .env file: PREVIEW=false.

website/en/app.json

@@ -0,0 +1,18 @@
+{
+    "name": "ButterCMS NextJS Starter Project ",
+    "description": "Drop-in proof-of-concept NextJs app, fully integrated with your ButterCMS account.",
+    "repository": "https://github.com/ButterCMS/nextjs-starter-buttercms",
+    "logo": "https://cdn.buttercms.com/R3fbtvoRT2CqEQSmk8hb",
+    "keywords": ["Next.js", "buttercms", "cms", "blog"],
+    "buildpacks": [
+        {
+          "url": "heroku/nodejs"
+        }
+    ],
+    "env": {
+        "NEXT_PUBLIC_BUTTER_CMS_API_KEY": {
+            "description": "The API token of your ButterCMS account",
+            "value": ""
+        }
+    }
+}

website/en/components/author-card.js

@@ -0,0 +1,12 @@
+export default function AuthorCard({ author }) {
+    const authorAvatar = author.profile_image ? author.profile_image : '/images/team/team-1.png'
+    return (
+        <a>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+                src={authorAvatar}
+                alt={`Profile image ${author.first_name} ${author.last_name}`} />
+            {author.first_name} {author.last_name}
+        </a>
+    )
+}

website/en/components/footer-section.js

@@ -0,0 +1,80 @@
+import Image from "next/image";
+
+export default function FooterSection({}) {
+  const links = [].map((link) => ({
+    ...link,
+    url: link.url[0] === "#" ? `/${link.url}` : link.url,
+  }));
+
+  return (
+    <footer className="footer pt-120">
+      <div className="container">
+        <div className="row">
+          <div className="col-xl-3 col-lg-4 col-md-6 col-sm-10">
+            <div className="footer-widget">
+              <div className="logo">
+                <img
+                  src="/images/logo.png"
+                  alt="Logo"
+                  width={190}
+                  height={46}
+                  style={{
+                    maxWidth: "100%",
+                    height: "auto",
+                  }}
+                />
+              </div>
+              <p className="desc">The Best WAF for Webmaster</p>
+              <ul className="social-links">
+                <li>
+                  <a href="https://discord.gg/wyshSVuvxC" target="_blank">
+                    <svg className="icon_svg" width="24px">
+                      <use xlinkHref="#icon-discord" />
+                    </svg>
+                  </a>
+                </li>
+                <li>
+                  <a href="https://github.com/chaitin/SafeLine" target="_blank">
+                    <svg className="icon_svg" width="24px">
+                      <use xlinkHref="#icon-github-fill" />
+                    </svg>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className="col-xl-5 col-lg-4 col-md-12 col-sm-12 offset-xl-1">
+            <div className="footer-widget">
+              <h3>About Us</h3>
+              <ul className="links">
+                <li>
+                  <a
+                    href="https://docs.waf.chaitin.com/"
+                    target="_blank"
+                    style={{ textDecoration: "none", color: "unset" }}
+                  >
+                    Docs
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="col-xl-3 col-lg-4 col-md-6">
+            <div className="footer-widget">
+              <p>
+                SafeLine is a simple, lightweight, locally deployable WAF that
+                protects your website from network attacks that including OWASP
+                attacks ...
+              </p>
+              {/* <form action="#">
+                <input type="email" placeholder="Email" />
+                <button className="main-btn btn-hover">Subscribe</button>
+              </form> */}
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

website/en/components/header-section.js

@@ -0,0 +1,53 @@
+import { useEffect, useState, useRef } from "react";
+
+import Image from "next/image";
+
+import MainMenu from "./main-menu/main-menu";
+
+export default function HeaderSection() {
+  const [isNavbarSticky, setIsNavbarSticky] = useState(false);
+  const navbarAreaEl = useRef(null);
+
+  function fixNavBar() {
+    if (navbarAreaEl.current) {
+      setIsNavbarSticky(window.pageYOffset > navbarAreaEl.current.offsetTop);
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener("scroll", fixNavBar);
+
+    return () => {
+      window.removeEventListener("scroll", fixNavBar);
+    };
+  }, []);
+
+  return (
+    <header className="header">
+      <div
+        ref={navbarAreaEl}
+        className={`navbar-area ${isNavbarSticky ? "sticky" : ""}`}
+      >
+        <div className="container">
+          <div className="row align-items-center">
+            <div className="col-lg-12">
+              <nav className="navbar navbar-expand-lg">
+                <img
+                  src="/images/logo.png"
+                  alt="Logo"
+                  width={190}
+                  height={46}
+                  style={{
+                    maxWidth: "100%",
+                    height: "auto",
+                  }}
+                />
+                <MainMenu />
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

website/en/components/human-date.js

@@ -0,0 +1,6 @@
+import { parseISO, format } from "date-fns";
+
+export default function HumanDate({ dateString }) {
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "MMM	d, yyyy")}</time>;
+}

website/en/components/landing-page-sections/feature.js

@@ -0,0 +1,22 @@
+import Image from "next/image";
+
+export default function Feature({ headline, description, icon }) {
+  return (
+    <div className="col-lg-4 col-md-4">
+      <div className="single-feature">
+        <div className="feature-icon">
+          <svg
+            className="icon_svg"
+            style={{ width: "20px", height: "20px", marginLeft: "8px" }}
+          >
+            <use xlinkHref={`#${icon}`} />
+          </svg>
+        </div>
+        <div className="feature-content">
+          <h4>{headline}</h4>
+          <p>{description}</p>
+        </div>
+      </div>
+    </div>
+  );
+}

website/en/components/landing-page-sections/features.js

@@ -0,0 +1,66 @@
+import Feature from "./feature";
+
+export default function Features({
+  headline,
+  subheadline,
+  features,
+  scrollAnchorId,
+}) {
+  return (
+    <section id={scrollAnchorId} className="feature-section">
+      <div className="container">
+        <div className="row">
+          <div className="col-lg-12" style={{ paddingLeft: "12px" }}>
+            <div className="row">
+              {[
+                {
+                  headline: "Defenses For OWASP Attacks",
+                  description:
+                    "SafeLine use as an important tool to defense against OWASP Top 10 Attack, such as SQL injection, XSS, Insecure deserialization etc.",
+                  icon: "icon-OWASP",
+                },
+                {
+                  headline: "Defenses For 0-Day Attacks",
+                  description:
+                    "SafeLine use intelligent rule-free detection algorithm to against 0-Day attacks with unknown attack signatures.",
+                  icon: "icon-a-0day",
+                },
+                {
+                  headline: "Proactive Bot defense",
+                  description:
+                    "SafeLine uses advanced algorithms to send capthcha challenge for suspicious users to against automated robot attacks.",
+                  icon: "icon-zhudongfangyu",
+                },
+                {
+                  headline: "In-Browser Code Encryption",
+                  description:
+                    "SafeLine can dynamically encrypt and obfuscate static code in the browser (such as HTML, JavaScript) to against reverse engineering.",
+                  icon: "icon-liulanqidaimajiami",
+                },
+                {
+                  headline: "Web Authentication",
+                  description:
+                    "SafeLine prompting the user for authentication to web apps that lacks valid authentication credentials, Illegal users will be blocked.",
+                  icon: "icon-shenfenyanzheng",
+                },
+                {
+                  headline: "Web Access Control List",
+                  description:
+                    "SafeLine offering fine-grained control over traffic allows you to define a set of rules that determine which requests are allowed or denied.",
+                  icon: "icon-a-Webkongzhifangwen",
+                },
+              ].map(({ headline, description, icon }) => (
+                <Feature
+                  key={headline}
+                  headline={headline}
+                  description={description}
+                  icon={icon}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

website/en/components/landing-page-sections/hero.js

@@ -0,0 +1,92 @@
+import { useEffect } from "react";
+
+export default function Hero({ scrollAnchorId }) {
+  useEffect(() => {
+    import("tiny-slider").then(({ tns }) => {
+      tns({
+        container: ".testimonial-active",
+        autoplay: true,
+        autoplayTimeout: 3000,
+        autoplayButtonOutput: false,
+        mouseDrag: true,
+        gutter: 0,
+        nav: false,
+        navPosition: "bottom",
+        controls: false,
+        autoplayHoverPause: true,
+        items: 1,
+      });
+      const testimonialDom = document.getElementsByClassName(
+        "testimonial-active-wrapper"
+      )?.[0];
+      testimonialDom.style.display = "block";
+    });
+  }, []);
+  return (
+    <section id={scrollAnchorId} className="hero-section">
+      <div className="container">
+        <div className="row align-items-center">
+          <div className="col-xl-6 col-lg-6 col-md-10">
+            <div className="hero-content" style={{ color: "#000" }}>
+              <h1
+                style={{
+                  fontFamily: "GilroyBold",
+                  fontSize: 70,
+                  marginBottom: "3px",
+                }}
+              >
+                SafeLine
+              </h1>
+              <h2
+                style={{
+                  fontFamily: "GilroyBold",
+                  fontSize: 36,
+                  margin: "4px auto 14px auto",
+                }}
+              >
+                The Best WAF For Webmaster
+              </h2>
+              <p style={{ letterSpacing: "1px", color: "rgba(0, 0, 0, 0.7)" }}>
+                SafeLine is a simple, lightweight, locally deployable WAF that
+                protects your website from network attacks that including OWASP
+                attacks, zero-day attacks, web crawlers, vulnerability scanning,
+                vulnerability exploit, http flood and so on.
+              </p>
+              <a
+                href="https://docs.waf.chaitin.com/en/toturials/install"
+                className="main-btn btn-hover"
+                target="_blank"
+              >
+                Get Started
+              </a>
+            </div>
+          </div>
+
+          <div className="col-xxl-6 col-xl-6 col-lg-6 testimonial-section">
+            <div className="hero-image text-center text-lg-end">
+              <div
+                className="testimonial-active-wrapper"
+                style={{
+                  display: "none",
+                  borderRadius: "12px",
+                  overflow: "hidden",
+                  boxShadow: "0 30px 50px rgba(145,158,171,0.3);",
+                }}
+              >
+                <div className="testimonial-active">
+                  {Array.from({ length: 4 }).map((_, index) => (
+                    <img
+                      key={index}
+                      src={`/images/screenshot-${index}.png`}
+                      className="single-testimonial"
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

website/en/components/landing-page-sections/landing-page-section.js

@@ -0,0 +1,19 @@
+import camelcaseKeys from "camelcase-keys";
+;
+import MissingSection from "./missing-section";
+import hero from "@/components/landing-page-sections/hero";
+import two_column_with_image from "@/components/landing-page-sections/two-column-with-image";
+import features from "@/components/landing-page-sections/features";
+import testimonials from "@/components/landing-page-sections/testimonials";
+
+export default function LandingPageSection({ sectionData }) {
+  const sectionsComponentPaths = () => ({
+    hero,
+    two_column_with_image,
+    features,
+    testimonials,
+  });
+  const SectionComponent = sectionsComponentPaths();
+
+  return <SectionComponent type={type} {...camelcaseKeys(sectionData)} />;
+}

website/en/components/landing-page-sections/missing-section.js

@@ -0,0 +1,11 @@
+
+export default function MissingSection({ type, ...sectionData }) {
+  console.log(`Missing section ${type} data ${sectionData}`)
+
+  return (
+    <div>
+      <h3>Missing a template for {type}</h3>
+      <p>Check console for component details</p>
+    </div>
+  )
+}

website/en/components/landing-page-sections/testimonial.js

@@ -0,0 +1,16 @@
+export default function Testimonial({ quote, name, title }) {
+	return (
+		<div className="single-testimonial">
+			<div className="quote">
+				<i className="lni lni-quotation"></i>
+			</div>
+			<div className="content">
+				<p>{quote}</p>
+			</div>
+			<div className="info">
+				<h6>{name}</h6>
+				<p>{title}</p>
+			</div>
+		</div>
+	)
+}

website/en/components/landing-page-sections/testimonials.js

@@ -0,0 +1,46 @@
+import { useEffect } from "react";
+
+import Testimonial from "./testimonial";
+
+export default function Testimonials({
+  headline,
+  testimonial: testimonials,
+  scrollAnchorId,
+}) {
+  useEffect(() => {
+    import("tiny-slider").then(({ tns }) => {
+      tns({
+        container: ".testimonial-active",
+        autoplay: true,
+        autoplayTimeout: 3000,
+        autoplayButtonOutput: false,
+        mouseDrag: true,
+        gutter: 0,
+        nav: false,
+        navPosition: "bottom",
+        controls: false,
+        // controlsText: [
+        //   '<i class="lni lni-chevron-left"></i>',
+        //   '<i class="lni lni-chevron-right"></i>',
+        // ],
+        items: 1,
+      });
+    });
+  });
+
+  return (
+    <section id={scrollAnchorId} className="testimonial-section mt-100">
+      <div className="container">
+        <div className="row justify-content-center">
+          <div className="col-xl-7 col-lg-9"></div>
+        </div>
+      </div>
+      <div className="testimonial-active-wrapper">
+        <div className="testimonial-active">
+          <Testimonial quote="1" name="2" title="3" />
+          <Testimonial quote="4" name="5" title="6" />
+        </div>
+      </div>
+    </section>
+  );
+}

website/en/components/landing-page-sections/two-column-with-image.js

@@ -0,0 +1,63 @@
+import Image from "next/image";
+
+export default function TwoColumnWithImage({
+  headline,
+  subheadline,
+  image,
+  imagePosition,
+  scrollAnchorId,
+}) {
+  return (
+    <section id={scrollAnchorId} className="cta-section">
+      <div className="container">
+        <div className="row">
+          {image && imagePosition === "left" && (
+            <div className="col-lg-6 order-last order-lg-first">
+              <div className="left-image cta-image ">
+                <Image
+                  src={`/images/${image}`}
+                  height={400}
+                  width={600}
+                  alt=""
+                  sizes="100vw"
+                  style={{
+                    width: "100%",
+                    height: "auto",
+                  }}
+                />
+              </div>
+            </div>
+          )}
+          <div className="col-lg-6">
+            <div className="cta-content-wrapper">
+              <div className="section-title">
+                <h2 className="mb-20">{headline}</h2>
+                <div
+                  style={{ color: "rgba(0,0,0,0.7)" }}
+                  dangerouslySetInnerHTML={{ __html: subheadline }}
+                />
+              </div>
+            </div>
+          </div>
+          {image && imagePosition === "right" && (
+            <div className="col-lg-6">
+              <div className="right-image cta-image text-lg-end">
+                <Image
+                  src={`/images/${image}`}
+                  height={400}
+                  width={600}
+                  alt=""
+                  sizes="100vw"
+                  style={{
+                    width: "100%",
+                    height: "auto",
+                  }}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}

website/en/components/main-menu/main-menu-link.js

@@ -0,0 +1,9 @@
+export default function MainMenuLink({ url, label, active, callbackOnClick }) {
+  return (
+    <li className="nav-item" onClick={callbackOnClick}>
+      <a className={`page-scroll ${active ? "active" : ""}`} href={`/${url}`}>
+        {label}
+      </a>
+    </li>
+  );
+}

website/en/components/main-menu/main-menu.js

@@ -0,0 +1,144 @@
+import { useEffect, useState, useRef } from "react";
+
+export default function ManiMenu() {
+  const mainMenuLinks = [
+    { meta: { id: 740351 }, label: "Docs", url: "#home" },
+    { meta: { id: 740352 }, label: "Pricing", url: "#about" },
+    { meta: { id: 740353 }, label: "Discord", url: "#features" },
+    { meta: { id: 740354 }, label: "GitHub", url: "#tryit" },
+    { meta: { id: 740355 }, label: "Demo", url: "#testimonials" },
+  ];
+
+  function highlightLinks() {
+    const sections = document.querySelectorAll(".page-scroll");
+    const scrollPos =
+      window.pageYOffset ||
+      document.documentElement.scrollTop ||
+      document.body.scrollTop;
+
+    sections.forEach((currLink) => {
+      const val = currLink.getAttribute("href").slice(1);
+      if (val[0] !== "#") {
+        return;
+      }
+      const refElement = document.querySelector(val);
+
+      if (!refElement) {
+        return;
+      }
+
+      const scrollTopMinus = scrollPos + 73;
+
+      if (
+        refElement.offsetTop <= scrollTopMinus &&
+        refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
+      ) {
+        setActiveMenuLink(val);
+      }
+    });
+  }
+
+  useEffect(() => {
+    window.addEventListener("scroll", highlightLinks);
+
+    return () => {
+      window.removeEventListener("scroll", highlightLinks);
+    };
+  }, []);
+
+  const [isMenuActive, setMenuActive] = useState(false);
+  const menuLinksEl = useRef(null);
+
+  function inactivateMenu() {
+    setMenuActive(false);
+    if (menuLinksEl.current) {
+      menuLinksEl.current.classList.remove("show");
+    }
+  }
+
+  return (
+    <>
+      <button
+        className={`navbar-toggler ${isMenuActive ? "active" : ""}`}
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+        onClick={() => setMenuActive(!isMenuActive)}
+      >
+        <span className="toggler-icon"></span>
+        <span className="toggler-icon"></span>
+        <span className="toggler-icon"></span>
+      </button>
+
+      <div
+        className="collapse navbar-collapse sub-menu-bar"
+        ref={menuLinksEl}
+        id="navbarSupportedContent"
+      >
+        <div className="ms-auto">
+          <ul id="nav" className="navbar-nav ms-auto">
+            <li className="nav-item">
+              <a href="https://docs.waf.chaitin.com/" target="_blank">
+                Docs
+              </a>
+            </li>
+            <li
+              className="nav-item nav-item_tooltip"
+              style={{ position: "relative" }}
+            >
+              <a style={{ color: "rgba(0,0,0,0.2)" }}>Pricing</a>
+              <div className="nav-btn_tooltip">Comming soon...</div>
+            </li>
+
+            <li className="nav-item">
+              <a
+                target="_blank"
+                className="nav-item_icon"
+                href="https://discord.gg/wyshSVuvxC"
+              >
+                <svg className="icon_svg">
+                  <use xlinkHref="#icon-discord" />
+                </svg>
+                Discord
+              </a>
+            </li>
+            <li className="nav-item">
+              <a
+                className="nav-item_icon"
+                href="https://github.com/chaitin/SafeLine"
+                target="_blank"
+              >
+                <svg
+                  className="icon_svg"
+                  style={{ width: "20px", height: "20px" }}
+                >
+                  <use xlinkHref="#icon-github-fill" />
+                </svg>
+                Gitlub 10k+
+                <svg
+                  className="icon_svg"
+                  style={{ width: "16px", height: "16px", marginLeft: "8px" }}
+                >
+                  <use xlinkHref="#icon-xingxing1" />
+                </svg>
+              </a>
+            </li>
+            <li className="nav-item nav-item__demo">
+              <a
+                href={"https://demo.waf.chaitin.com:9443/"}
+                className="main-btn btn-hover"
+                style={{ color: "#fff" }}
+                target="_blank"
+              >
+                Demo
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </>
+  );
+}

website/en/components/preloader.js

@@ -0,0 +1,20 @@
+
+export default function Preloader() {
+    return (
+    <div className="preloader">
+		<div className="loader">
+			<div className="spinner">
+				<div className="spinner-container">
+					<div className="spinner-rotator">
+						<div className="spinner-left">
+							<div className="spinner-circle"></div>
+						</div>
+						<div className="spinner-right">
+							<div className="spinner-circle"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+    </div>
+)}

website/en/components/scroll-to-top-button.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+export default function ScrollToButtonButton() {
+
+    const [hasScrollToTopButton, setHasScrollToTopButton] = useState(false);
+
+    function toggleScrollTopButton() {
+        setHasScrollToTopButton(
+            document.body.scrollTop > 50 || document.documentElement.scrollTop > 50
+        )
+    }
+
+    useEffect(() => {
+        window.addEventListener('scroll', toggleScrollTopButton);
+
+        return () => {
+            window.removeEventListener('scroll', toggleScrollTopButton);
+
+        }
+    }, [])
+
+    return (
+        <>
+            {hasScrollToTopButton && (
+                <a href="#" className="scroll-top btn-hover">
+                    <i className="lni lni-chevron-up"></i>
+                </a>
+            )}
+        </>
+    )
+}

website/en/css/lineicons.css

@@ -0,0 +1,2211 @@
+/*--------------------------------
+
+LineIcons Web Font
+Author: lineicons.com
+
+-------------------------------- */
+@font-face {
+  font-family: 'LineIcons';
+  src: url('fonts/LineIcons.eot');
+  src: url('fonts/LineIcons.eot') format('embedded-opentype'), url('fonts/LineIcons.woff2') format('woff2'), url('fonts/LineIcons.woff') format('woff'), url('fonts/LineIcons.ttf') format('truetype'), url('fonts/LineIcons.svg') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/*------------------------
+	base class definition
+-------------------------*/
+.lni {
+  display: inline-block;
+  font: normal normal normal 1em/1 'LineIcons';
+  color: inherit;
+  flex-shrink: 0;
+  speak: none;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: -.125em;
+  /* Better Font Rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/*------------------------
+  change icon size
+-------------------------*/
+/* relative units */
+.lni-sm {
+  font-size: 0.8em;
+}
+.lni-lg {
+  font-size: 1.2em;
+}
+/* absolute units */
+.lni-16 {
+  font-size: 16px;
+}
+.lni-32 {
+  font-size: 32px;
+}
+
+/*------------------------
+  spinning icons
+-------------------------*/
+.lni-is-spinning {
+  animation: lni-spin 1s infinite linear;
+}
+@keyframes lni-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/*------------------------
+  rotated/flipped icons
+-------------------------*/
+.lni-rotate-90 {
+  transform: rotate(90deg);
+}
+.lni-rotate-180 {
+  transform: rotate(180deg);
+}
+.lni-rotate-270 {
+  transform: rotate(270deg);
+}
+.lni-flip-y {
+  transform: scaleY(-1);
+}
+.lni-flip-x {
+  transform: scaleX(-1);
+}
+/*------------------------
+	icons
+-------------------------*/
+
+.lni-500px::before {
+  content: "\ea03";
+}
+
+.lni-add-files::before {
+  content: "\ea01";
+}
+
+.lni-adobe::before {
+  content: "\ea06";
+}
+
+.lni-agenda::before {
+  content: "\ea02";
+}
+
+.lni-airbnb::before {
+  content: "\ea07";
+}
+
+.lni-alarm-clock::before {
+  content: "\ea08";
+}
+
+.lni-alarm::before {
+  content: "\ea04";
+}
+
+.lni-amazon-original::before {
+  content: "\ea05";
+}
+
+.lni-amazon-pay::before {
+  content: "\ea09";
+}
+
+.lni-amazon::before {
+  content: "\ea0a";
+}
+
+.lni-ambulance::before {
+  content: "\ea0b";
+}
+
+.lni-amex::before {
+  content: "\ea0c";
+}
+
+.lni-anchor::before {
+  content: "\ea0d";
+}
+
+.lni-android-original::before {
+  content: "\ea0e";
+}
+
+.lni-android::before {
+  content: "\ea0f";
+}
+
+.lni-angellist::before {
+  content: "\ea10";
+}
+
+.lni-angle-double-down::before {
+  content: "\ea11";
+}
+
+.lni-angle-double-left::before {
+  content: "\ea12";
+}
+
+.lni-angle-double-right::before {
+  content: "\ea13";
+}
+
+.lni-angle-double-up::before {
+  content: "\ea14";
+}
+
+.lni-angular::before {
+  content: "\ea15";
+}
+
+.lni-apartment::before {
+  content: "\ea16";
+}
+
+.lni-app-store::before {
+  content: "\ea17";
+}
+
+.lni-apple-music::before {
+  content: "\ea18";
+}
+
+.lni-apple-pay::before {
+  content: "\ea19";
+}
+
+.lni-apple::before {
+  content: "\ea1a";
+}
+
+.lni-archive::before {
+  content: "\ea1f";
+}
+
+.lni-arrow-down-circle::before {
+  content: "\ea1b";
+}
+
+.lni-arrow-down::before {
+  content: "\ea1c";
+}
+
+.lni-arrow-left-circle::before {
+  content: "\ea1d";
+}
+
+.lni-arrow-left::before {
+  content: "\ea1e";
+}
+
+.lni-arrow-right-circle::before {
+  content: "\ea20";
+}
+
+.lni-arrow-right::before {
+  content: "\ea21";
+}
+
+.lni-arrow-top-left::before {
+  content: "\ea22";
+}
+
+.lni-arrow-top-right::before {
+  content: "\ea23";
+}
+
+.lni-arrow-up-circle::before {
+  content: "\ea24";
+}
+
+.lni-arrow-up::before {
+  content: "\ea25";
+}
+
+.lni-arrows-horizontal::before {
+  content: "\ea26";
+}
+
+.lni-arrows-vertical::before {
+  content: "\ea27";
+}
+
+.lni-atlassian::before {
+  content: "\ea28";
+}
+
+.lni-aws::before {
+  content: "\ea29";
+}
+
+.lni-azure::before {
+  content: "\ea2a";
+}
+
+.lni-backward::before {
+  content: "\ea2b";
+}
+
+.lni-baloon::before {
+  content: "\ea2c";
+}
+
+.lni-ban::before {
+  content: "\ea2d";
+}
+
+.lni-bar-chart::before {
+  content: "\ea2e";
+}
+
+.lni-basketball::before {
+  content: "\ea2f";
+}
+
+.lni-behance-original::before {
+  content: "\ea30";
+}
+
+.lni-behance::before {
+  content: "\ea31";
+}
+
+.lni-bi-cycle::before {
+  content: "\ea32";
+}
+
+.lni-bitbucket::before {
+  content: "\ea33";
+}
+
+.lni-bitcoin::before {
+  content: "\ea34";
+}
+
+.lni-blackboard::before {
+  content: "\ea35";
+}
+
+.lni-blogger::before {
+  content: "\ea36";
+}
+
+.lni-bluetooth-original::before {
+  content: "\ea37";
+}
+
+.lni-bluetooth::before {
+  content: "\ea38";
+}
+
+.lni-bold::before {
+  content: "\ea39";
+}
+
+.lni-bolt-alt::before {
+  content: "\ea3a";
+}
+
+.lni-bolt::before {
+  content: "\ea40";
+}
+
+.lni-book::before {
+  content: "\ea3b";
+}
+
+.lni-bookmark-alt::before {
+  content: "\ea3c";
+}
+
+.lni-bookmark::before {
+  content: "\ea3d";
+}
+
+.lni-bootstrap::before {
+  content: "\ea3e";
+}
+
+.lni-bricks::before {
+  content: "\ea3f";
+}
+
+.lni-bridge::before {
+  content: "\ea41";
+}
+
+.lni-briefcase::before {
+  content: "\ea42";
+}
+
+.lni-brush-alt::before {
+  content: "\ea43";
+}
+
+.lni-brush::before {
+  content: "\ea44";
+}
+
+.lni-btc::before {
+  content: "\ea45";
+}
+
+.lni-bubble::before {
+  content: "\ea46";
+}
+
+.lni-bug::before {
+  content: "\ea47";
+}
+
+.lni-bulb::before {
+  content: "\ea48";
+}
+
+.lni-bullhorn::before {
+  content: "\ea49";
+}
+
+.lni-burger::before {
+  content: "\ea4a";
+}
+
+.lni-bus::before {
+  content: "\ea4b";
+}
+
+.lni-cake::before {
+  content: "\ea4c";
+}
+
+.lni-calculator::before {
+  content: "\ea4d";
+}
+
+.lni-calendar::before {
+  content: "\ea4e";
+}
+
+.lni-camera::before {
+  content: "\ea4f";
+}
+
+.lni-candy-cane::before {
+  content: "\ea50";
+}
+
+.lni-candy::before {
+  content: "\ea51";
+}
+
+.lni-capsule::before {
+  content: "\ea52";
+}
+
+.lni-car-alt::before {
+  content: "\ea53";
+}
+
+.lni-car::before {
+  content: "\ea54";
+}
+
+.lni-caravan::before {
+  content: "\ea55";
+}
+
+.lni-cart-full::before {
+  content: "\ea56";
+}
+
+.lni-cart::before {
+  content: "\ea57";
+}
+
+.lni-certificate::before {
+  content: "\ea58";
+}
+
+.lni-check-box::before {
+  content: "\ea59";
+}
+
+.lni-checkmark-circle::before {
+  content: "\ea5a";
+}
+
+.lni-checkmark::before {
+  content: "\ea5b";
+}
+
+.lni-chef-hat::before {
+  content: "\ea5c";
+}
+
+.lni-chevron-down-circle::before {
+  content: "\ea5d";
+}
+
+.lni-chevron-down::before {
+  content: "\ea5e";
+}
+
+.lni-chevron-left-circle::before {
+  content: "\ea5f";
+}
+
+.lni-chevron-left::before {
+  content: "\ea60";
+}
+
+.lni-chevron-right-circle::before {
+  content: "\ea61";
+}
+
+.lni-chevron-right::before {
+  content: "\ea62";
+}
+
+.lni-chevron-up-circle::before {
+  content: "\ea63";
+}
+
+.lni-chevron-up::before {
+  content: "\ea64";
+}
+
+.lni-chrome::before {
+  content: "\ea65";
+}
+
+.lni-chromecast::before {
+  content: "\ea66";
+}
+
+.lni-circle-minus::before {
+  content: "\ea67";
+}
+
+.lni-circle-plus::before {
+  content: "\ea68";
+}
+
+.lni-clipboard::before {
+  content: "\ea69";
+}
+
+.lni-close::before {
+  content: "\ea6a";
+}
+
+.lni-cloud-check::before {
+  content: "\ea6b";
+}
+
+.lni-cloud-download::before {
+  content: "\ea6c";
+}
+
+.lni-cloud-network::before {
+  content: "\ea6d";
+}
+
+.lni-cloud-sync::before {
+  content: "\ea6e";
+}
+
+.lni-cloud-upload::before {
+  content: "\ea6f";
+}
+
+.lni-cloud::before {
+  content: "\ea70";
+}
+
+.lni-cloudflare::before {
+  content: "\ea71";
+}
+
+.lni-cloudy-sun::before {
+  content: "\ea72";
+}
+
+.lni-code-alt::before {
+  content: "\ea73";
+}
+
+.lni-code::before {
+  content: "\ea74";
+}
+
+.lni-codepen::before {
+  content: "\ea75";
+}
+
+.lni-coffee-cup::before {
+  content: "\ea76";
+}
+
+.lni-cog::before {
+  content: "\ea77";
+}
+
+.lni-cogs::before {
+  content: "\ea78";
+}
+
+.lni-coin::before {
+  content: "\ea79";
+}
+
+.lni-comments-alt::before {
+  content: "\ea7a";
+}
+
+.lni-comments-reply::before {
+  content: "\ea7b";
+}
+
+.lni-comments::before {
+  content: "\ea7c";
+}
+
+.lni-compass::before {
+  content: "\ea7d";
+}
+
+.lni-connectdevelop::before {
+  content: "\ea7e";
+}
+
+.lni-construction-hammer::before {
+  content: "\ea7f";
+}
+
+.lni-construction::before {
+  content: "\ea80";
+}
+
+.lni-consulting::before {
+  content: "\ea81";
+}
+
+.lni-control-panel::before {
+  content: "\ea82";
+}
+
+.lni-cool::before {
+  content: "\ea83";
+}
+
+.lni-cpanel::before {
+  content: "\ea84";
+}
+
+.lni-creative-commons::before {
+  content: "\ea85";
+}
+
+.lni-credit-cards::before {
+  content: "\ea86";
+}
+
+.lni-crop::before {
+  content: "\ea87";
+}
+
+.lni-cross-circle::before {
+  content: "\ea88";
+}
+
+.lni-crown::before {
+  content: "\ea89";
+}
+
+.lni-css3::before {
+  content: "\ea8a";
+}
+
+.lni-cup::before {
+  content: "\ea8b";
+}
+
+.lni-customer::before {
+  content: "\ea8c";
+}
+
+.lni-cut::before {
+  content: "\ea8d";
+}
+
+.lni-dashboard::before {
+  content: "\ea8e";
+}
+
+.lni-database::before {
+  content: "\ea8f";
+}
+
+.lni-delivery::before {
+  content: "\ea90";
+}
+
+.lni-dev::before {
+  content: "\ea91";
+}
+
+.lni-diamond-alt::before {
+  content: "\ea92";
+}
+
+.lni-diamond::before {
+  content: "\ea93";
+}
+
+.lni-digitalocean::before {
+  content: "\ea94";
+}
+
+.lni-diners-club::before {
+  content: "\ea95";
+}
+
+.lni-dinner::before {
+  content: "\ea96";
+}
+
+.lni-direction-alt::before {
+  content: "\ea97";
+}
+
+.lni-direction-ltr::before {
+  content: "\ea98";
+}
+
+.lni-direction-rtl::before {
+  content: "\ea99";
+}
+
+.lni-direction::before {
+  content: "\ea9a";
+}
+
+.lni-discord::before {
+  content: "\ea9b";
+}
+
+.lni-discover::before {
+  content: "\ea9c";
+}
+
+.lni-display-alt::before {
+  content: "\ea9d";
+}
+
+.lni-display::before {
+  content: "\ea9e";
+}
+
+.lni-docker::before {
+  content: "\ea9f";
+}
+
+.lni-dollar::before {
+  content: "\eaa0";
+}
+
+.lni-domain::before {
+  content: "\eaa1";
+}
+
+.lni-download::before {
+  content: "\eaa2";
+}
+
+.lni-dribbble::before {
+  content: "\eaa3";
+}
+
+.lni-drop::before {
+  content: "\eaa4";
+}
+
+.lni-dropbox-original::before {
+  content: "\eaa5";
+}
+
+.lni-dropbox::before {
+  content: "\eaa6";
+}
+
+.lni-drupal-original::before {
+  content: "\eaa7";
+}
+
+.lni-drupal::before {
+  content: "\eaa8";
+}
+
+.lni-dumbbell::before {
+  content: "\eaa9";
+}
+
+.lni-edge::before {
+  content: "\eaaa";
+}
+
+.lni-empty-file::before {
+  content: "\eaab";
+}
+
+.lni-enter::before {
+  content: "\eaac";
+}
+
+.lni-envato::before {
+  content: "\eaad";
+}
+
+.lni-envelope::before {
+  content: "\eaae";
+}
+
+.lni-eraser::before {
+  content: "\eaaf";
+}
+
+.lni-euro::before {
+  content: "\eab0";
+}
+
+.lni-exit-down::before {
+  content: "\eab1";
+}
+
+.lni-exit-up::before {
+  content: "\eab2";
+}
+
+.lni-exit::before {
+  content: "\eab3";
+}
+
+.lni-eye::before {
+  content: "\eab4";
+}
+
+.lni-facebook-filled::before {
+  content: "\eab5";
+}
+
+.lni-facebook-messenger::before {
+  content: "\eab6";
+}
+
+.lni-facebook-original::before {
+  content: "\eab7";
+}
+
+.lni-facebook-oval::before {
+  content: "\eab8";
+}
+
+.lni-facebook::before {
+  content: "\eab9";
+}
+
+.lni-figma::before {
+  content: "\eaba";
+}
+
+.lni-files::before {
+  content: "\eabb";
+}
+
+.lni-firefox-original::before {
+  content: "\eabc";
+}
+
+.lni-firefox::before {
+  content: "\eabd";
+}
+
+.lni-fireworks::before {
+  content: "\eabe";
+}
+
+.lni-first-aid::before {
+  content: "\eabf";
+}
+
+.lni-flag-alt::before {
+  content: "\eac0";
+}
+
+.lni-flag::before {
+  content: "\eac1";
+}
+
+.lni-flags::before {
+  content: "\eac2";
+}
+
+.lni-flickr::before {
+  content: "\eac3";
+}
+
+.lni-flower::before {
+  content: "\eac4";
+}
+
+.lni-folder::before {
+  content: "\eac5";
+}
+
+.lni-forward::before {
+  content: "\eac6";
+}
+
+.lni-frame-expand::before {
+  content: "\eac7";
+}
+
+.lni-fresh-juice::before {
+  content: "\eac8";
+}
+
+.lni-friendly::before {
+  content: "\eac9";
+}
+
+.lni-full-screen::before {
+  content: "\eaca";
+}
+
+.lni-funnel::before {
+  content: "\eacb";
+}
+
+.lni-gallery::before {
+  content: "\eacc";
+}
+
+.lni-game::before {
+  content: "\eacd";
+}
+
+.lni-gatsby::before {
+  content: "\eace";
+}
+
+.lni-gift::before {
+  content: "\eacf";
+}
+
+.lni-git::before {
+  content: "\ead0";
+}
+
+.lni-github-original::before {
+  content: "\ead1";
+}
+
+.lni-github::before {
+  content: "\ead2";
+}
+
+.lni-goodreads::before {
+  content: "\ead3";
+}
+
+.lni-google-drive::before {
+  content: "\ead4";
+}
+
+.lni-google-pay::before {
+  content: "\ead5";
+}
+
+.lni-google-wallet::before {
+  content: "\ead6";
+}
+
+.lni-google::before {
+  content: "\ead7";
+}
+
+.lni-graduation::before {
+  content: "\ead8";
+}
+
+.lni-graph::before {
+  content: "\ead9";
+}
+
+.lni-grid-alt::before {
+  content: "\eada";
+}
+
+.lni-grid::before {
+  content: "\eadb";
+}
+
+.lni-grow::before {
+  content: "\eadc";
+}
+
+.lni-hacker-news::before {
+  content: "\eadd";
+}
+
+.lni-hammer::before {
+  content: "\eade";
+}
+
+.lni-hand::before {
+  content: "\eadf";
+}
+
+.lni-handshake::before {
+  content: "\eae0";
+}
+
+.lni-happy::before {
+  content: "\eae1";
+}
+
+.lni-harddrive::before {
+  content: "\eae2";
+}
+
+.lni-headphone-alt::before {
+  content: "\eae3";
+}
+
+.lni-headphone::before {
+  content: "\eae4";
+}
+
+.lni-heart-filled::before {
+  content: "\eae5";
+}
+
+.lni-heart-monitor::before {
+  content: "\eae6";
+}
+
+.lni-heart::before {
+  content: "\eae7";
+}
+
+.lni-helicopter::before {
+  content: "\eae8";
+}
+
+.lni-helmet::before {
+  content: "\eae9";
+}
+
+.lni-help::before {
+  content: "\eaea";
+}
+
+.lni-highlight-alt::before {
+  content: "\eaeb";
+}
+
+.lni-highlight::before {
+  content: "\eaec";
+}
+
+.lni-home::before {
+  content: "\eaed";
+}
+
+.lni-hospital::before {
+  content: "\eaee";
+}
+
+.lni-hourglass::before {
+  content: "\eaef";
+}
+
+.lni-html5::before {
+  content: "\eaf0";
+}
+
+.lni-image::before {
+  content: "\eaf1";
+}
+
+.lni-imdb::before {
+  content: "\eaf2";
+}
+
+.lni-inbox::before {
+  content: "\eaf3";
+}
+
+.lni-indent-decrease::before {
+  content: "\eaf4";
+}
+
+.lni-indent-increase::before {
+  content: "\eaf5";
+}
+
+.lni-infinite::before {
+  content: "\eaf6";
+}
+
+.lni-information::before {
+  content: "\eaf7";
+}
+
+.lni-instagram-filled::before {
+  content: "\eaf8";
+}
+
+.lni-instagram-original::before {
+  content: "\eaf9";
+}
+
+.lni-instagram::before {
+  content: "\eafa";
+}
+
+.lni-invention::before {
+  content: "\eafb";
+}
+
+.lni-invest-monitor::before {
+  content: "\eafc";
+}
+
+.lni-investment::before {
+  content: "\eafd";
+}
+
+.lni-island::before {
+  content: "\eafe";
+}
+
+.lni-italic::before {
+  content: "\eaff";
+}
+
+.lni-java::before {
+  content: "\eb00";
+}
+
+.lni-javascript::before {
+  content: "\eb01";
+}
+
+.lni-jcb::before {
+  content: "\eb02";
+}
+
+.lni-joomla-original::before {
+  content: "\eb03";
+}
+
+.lni-joomla::before {
+  content: "\eb04";
+}
+
+.lni-jsfiddle::before {
+  content: "\eb05";
+}
+
+.lni-juice::before {
+  content: "\eb06";
+}
+
+.lni-key::before {
+  content: "\eb07";
+}
+
+.lni-keyboard::before {
+  content: "\eb08";
+}
+
+.lni-keyword-research::before {
+  content: "\eb09";
+}
+
+.lni-laptop-phone::before {
+  content: "\eb0a";
+}
+
+.lni-laptop::before {
+  content: "\eb0b";
+}
+
+.lni-laravel::before {
+  content: "\eb0c";
+}
+
+.lni-layers::before {
+  content: "\eb0d";
+}
+
+.lni-layout::before {
+  content: "\eb0e";
+}
+
+.lni-leaf::before {
+  content: "\eb0f";
+}
+
+.lni-library::before {
+  content: "\eb10";
+}
+
+.lni-license::before {
+  content: "\eb11";
+}
+
+.lni-lifering::before {
+  content: "\eb12";
+}
+
+.lni-line-dashed::before {
+  content: "\eb13";
+}
+
+.lni-line-dotted::before {
+  content: "\eb14";
+}
+
+.lni-line-double::before {
+  content: "\eb15";
+}
+
+.lni-line-spacing::before {
+  content: "\eb16";
+}
+
+.lni-line::before {
+  content: "\eb17";
+}
+
+.lni-lineicons-alt::before {
+  content: "\eb18";
+}
+
+.lni-lineicons::before {
+  content: "\eb19";
+}
+
+.lni-link::before {
+  content: "\eb1a";
+}
+
+.lni-linkedin-original::before {
+  content: "\eb1b";
+}
+
+.lni-linkedin::before {
+  content: "\eb1c";
+}
+
+.lni-list::before {
+  content: "\eb1d";
+}
+
+.lni-lock-alt::before {
+  content: "\eb1e";
+}
+
+.lni-lock::before {
+  content: "\eb1f";
+}
+
+.lni-magento::before {
+  content: "\eb20";
+}
+
+.lni-magnet::before {
+  content: "\eb21";
+}
+
+.lni-magnifier::before {
+  content: "\eb22";
+}
+
+.lni-mailchimp::before {
+  content: "\eb23";
+}
+
+.lni-map-marker::before {
+  content: "\eb24";
+}
+
+.lni-map::before {
+  content: "\eb25";
+}
+
+.lni-markdown::before {
+  content: "\eb26";
+}
+
+.lni-mashroom::before {
+  content: "\eb27";
+}
+
+.lni-mastercard::before {
+  content: "\eb28";
+}
+
+.lni-medium::before {
+  content: "\eb29";
+}
+
+.lni-menu::before {
+  content: "\eb2a";
+}
+
+.lni-mic::before {
+  content: "\eb2b";
+}
+
+.lni-microphone::before {
+  content: "\eb2c";
+}
+
+.lni-microscope::before {
+  content: "\eb2d";
+}
+
+.lni-microsoft-edge::before {
+  content: "\eb2e";
+}
+
+.lni-microsoft::before {
+  content: "\eb2f";
+}
+
+.lni-minus::before {
+  content: "\eb30";
+}
+
+.lni-mobile::before {
+  content: "\eb31";
+}
+
+.lni-money-location::before {
+  content: "\eb32";
+}
+
+.lni-money-protection::before {
+  content: "\eb33";
+}
+
+.lni-more-alt::before {
+  content: "\eb34";
+}
+
+.lni-more::before {
+  content: "\eb35";
+}
+
+.lni-mouse::before {
+  content: "\eb36";
+}
+
+.lni-move::before {
+  content: "\eb37";
+}
+
+.lni-music::before {
+  content: "\eb38";
+}
+
+.lni-netlify::before {
+  content: "\eb39";
+}
+
+.lni-network::before {
+  content: "\eb3a";
+}
+
+.lni-night::before {
+  content: "\eb3b";
+}
+
+.lni-nodejs-alt::before {
+  content: "\eb3c";
+}
+
+.lni-nodejs::before {
+  content: "\eb3d";
+}
+
+.lni-notepad::before {
+  content: "\eb3e";
+}
+
+.lni-npm::before {
+  content: "\eb3f";
+}
+
+.lni-offer::before {
+  content: "\eb40";
+}
+
+.lni-opera::before {
+  content: "\eb41";
+}
+
+.lni-package::before {
+  content: "\eb42";
+}
+
+.lni-page-break::before {
+  content: "\eb43";
+}
+
+.lni-pagination::before {
+  content: "\eb44";
+}
+
+.lni-paint-bucket::before {
+  content: "\eb45";
+}
+
+.lni-paint-roller::before {
+  content: "\eb46";
+}
+
+.lni-pallet::before {
+  content: "\eb47";
+}
+
+.lni-paperclip::before {
+  content: "\eb48";
+}
+
+.lni-patreon::before {
+  content: "\eb49";
+}
+
+.lni-pause::before {
+  content: "\eb4a";
+}
+
+.lni-paypal-original::before {
+  content: "\eb4b";
+}
+
+.lni-paypal::before {
+  content: "\eb4c";
+}
+
+.lni-pencil-alt::before {
+  content: "\eb4d";
+}
+
+.lni-pencil::before {
+  content: "\eb4e";
+}
+
+.lni-phone-set::before {
+  content: "\eb4f";
+}
+
+.lni-phone::before {
+  content: "\eb50";
+}
+
+.lni-php::before {
+  content: "\eb51";
+}
+
+.lni-pie-chart::before {
+  content: "\eb52";
+}
+
+.lni-pilcrow::before {
+  content: "\eb53";
+}
+
+.lni-pin::before {
+  content: "\eb54";
+}
+
+.lni-pinterest::before {
+  content: "\eb55";
+}
+
+.lni-pizza::before {
+  content: "\eb56";
+}
+
+.lni-plane::before {
+  content: "\eb57";
+}
+
+.lni-play-store::before {
+  content: "\eb58";
+}
+
+.lni-play::before {
+  content: "\eb59";
+}
+
+.lni-playstation::before {
+  content: "\eb5a";
+}
+
+.lni-plug::before {
+  content: "\eb5b";
+}
+
+.lni-plus::before {
+  content: "\eb5c";
+}
+
+.lni-pointer-down::before {
+  content: "\eb5d";
+}
+
+.lni-pointer-left::before {
+  content: "\eb5e";
+}
+
+.lni-pointer-right::before {
+  content: "\eb5f";
+}
+
+.lni-pointer-top::before {
+  content: "\eb60";
+}
+
+.lni-pointer::before {
+  content: "\eb61";
+}
+
+.lni-popup::before {
+  content: "\eb62";
+}
+
+.lni-postcard::before {
+  content: "\eb63";
+}
+
+.lni-pound::before {
+  content: "\eb64";
+}
+
+.lni-power-switch::before {
+  content: "\eb65";
+}
+
+.lni-printer::before {
+  content: "\eb66";
+}
+
+.lni-producthunt::before {
+  content: "\eb67";
+}
+
+.lni-protection::before {
+  content: "\eb68";
+}
+
+.lni-pulse::before {
+  content: "\eb69";
+}
+
+.lni-pyramids::before {
+  content: "\eb6a";
+}
+
+.lni-python::before {
+  content: "\eb6b";
+}
+
+.lni-question-circle::before {
+  content: "\eb6c";
+}
+
+.lni-quora::before {
+  content: "\eb6d";
+}
+
+.lni-quotation::before {
+  content: "\eb6e";
+}
+
+.lni-radio-button::before {
+  content: "\eb6f";
+}
+
+.lni-rain::before {
+  content: "\eb70";
+}
+
+.lni-react::before {
+  content: "\eb73";
+}
+
+.lni-reddit::before {
+  content: "\eb71";
+}
+
+.lni-reload::before {
+  content: "\eb72";
+}
+
+.lni-remove-file::before {
+  content: "\eb74";
+}
+
+.lni-reply::before {
+  content: "\eb75";
+}
+
+.lni-restaurant::before {
+  content: "\eb76";
+}
+
+.lni-revenue::before {
+  content: "\eb77";
+}
+
+.lni-road::before {
+  content: "\eb78";
+}
+
+.lni-rocket::before {
+  content: "\eb79";
+}
+
+.lni-rss-feed::before {
+  content: "\eb7a";
+}
+
+.lni-ruler-alt::before {
+  content: "\eb7b";
+}
+
+.lni-ruler-pencil::before {
+  content: "\eb7c";
+}
+
+.lni-ruler::before {
+  content: "\eb7d";
+}
+
+.lni-rupee::before {
+  content: "\eb7e";
+}
+
+.lni-sad::before {
+  content: "\eb7f";
+}
+
+.lni-save::before {
+  content: "\eb80";
+}
+
+.lni-school-bench-alt::before {
+  content: "\eb81";
+}
+
+.lni-school-bench::before {
+  content: "\eb82";
+}
+
+.lni-scooter::before {
+  content: "\eb83";
+}
+
+.lni-scroll-down::before {
+  content: "\eb84";
+}
+
+.lni-search-alt::before {
+  content: "\eb85";
+}
+
+.lni-search::before {
+  content: "\eb86";
+}
+
+.lni-select::before {
+  content: "\eb87";
+}
+
+.lni-seo::before {
+  content: "\eb88";
+}
+
+.lni-service::before {
+  content: "\eb89";
+}
+
+.lni-share-alt-1::before {
+  content: "\eb8a";
+}
+
+.lni-share-alt::before {
+  content: "\eb8b";
+}
+
+.lni-share::before {
+  content: "\eb8c";
+}
+
+.lni-shield::before {
+  content: "\eb8d";
+}
+
+.lni-shift-left::before {
+  content: "\eb8e";
+}
+
+.lni-shift-right::before {
+  content: "\eb8f";
+}
+
+.lni-ship::before {
+  content: "\eb90";
+}
+
+.lni-shopify::before {
+  content: "\eb91";
+}
+
+.lni-shopping-basket::before {
+  content: "\eb92";
+}
+
+.lni-shortcode::before {
+  content: "\eb93";
+}
+
+.lni-shovel::before {
+  content: "\eb94";
+}
+
+.lni-shuffle::before {
+  content: "\eb95";
+}
+
+.lni-signal::before {
+  content: "\eb96";
+}
+
+.lni-sketch::before {
+  content: "\eb97";
+}
+
+.lni-skipping-rope::before {
+  content: "\eb98";
+}
+
+.lni-skype::before {
+  content: "\eb99";
+}
+
+.lni-slack-line::before {
+  content: "\eb9a";
+}
+
+.lni-slack::before {
+  content: "\eb9b";
+}
+
+.lni-slice::before {
+  content: "\eb9c";
+}
+
+.lni-slideshare::before {
+  content: "\eb9d";
+}
+
+.lni-slim::before {
+  content: "\eb9e";
+}
+
+.lni-smile::before {
+  content: "\eb9f";
+}
+
+.lni-snapchat::before {
+  content: "\eba0";
+}
+
+.lni-sort-alpha-asc::before {
+  content: "\eba1";
+}
+
+.lni-sort-amount-asc::before {
+  content: "\eba2";
+}
+
+.lni-sort-amount-dsc::before {
+  content: "\eba3";
+}
+
+.lni-soundcloud-original::before {
+  content: "\eba4";
+}
+
+.lni-soundcloud::before {
+  content: "\eba5";
+}
+
+.lni-speechless::before {
+  content: "\eba6";
+}
+
+.lni-spellcheck::before {
+  content: "\eba7";
+}
+
+.lni-spinner-arrow::before {
+  content: "\eba8";
+}
+
+.lni-spinner-solid::before {
+  content: "\eba9";
+}
+
+.lni-spinner::before {
+  content: "\ebaa";
+}
+
+.lni-spotify-original::before {
+  content: "\ebab";
+}
+
+.lni-spotify::before {
+  content: "\ebac";
+}
+
+.lni-spray::before {
+  content: "\ebad";
+}
+
+.lni-sprout::before {
+  content: "\ebae";
+}
+
+.lni-squarespace::before {
+  content: "\ebaf";
+}
+
+.lni-stackoverflow::before {
+  content: "\ebb0";
+}
+
+.lni-stamp::before {
+  content: "\ebb1";
+}
+
+.lni-star-empty::before {
+  content: "\ebb2";
+}
+
+.lni-star-filled::before {
+  content: "\ebb3";
+}
+
+.lni-star-half::before {
+  content: "\ebb4";
+}
+
+.lni-star::before {
+  content: "\ebb5";
+}
+
+.lni-stats-down::before {
+  content: "\ebb6";
+}
+
+.lni-stats-up::before {
+  content: "\ebb7";
+}
+
+.lni-steam::before {
+  content: "\ebb8";
+}
+
+.lni-sthethoscope::before {
+  content: "\ebb9";
+}
+
+.lni-stop::before {
+  content: "\ebba";
+}
+
+.lni-strikethrough::before {
+  content: "\ebbb";
+}
+
+.lni-stripe::before {
+  content: "\ebbc";
+}
+
+.lni-stumbleupon::before {
+  content: "\ebbd";
+}
+
+.lni-sun::before {
+  content: "\ebbe";
+}
+
+.lni-support::before {
+  content: "\ebbf";
+}
+
+.lni-surf-board::before {
+  content: "\ebc0";
+}
+
+.lni-suspect::before {
+  content: "\ebc1";
+}
+
+.lni-swift::before {
+  content: "\ebc2";
+}
+
+.lni-syringe::before {
+  content: "\ebc3";
+}
+
+.lni-tab::before {
+  content: "\ebc4";
+}
+
+.lni-tag::before {
+  content: "\ebc5";
+}
+
+.lni-target-customer::before {
+  content: "\ebc6";
+}
+
+.lni-target-revenue::before {
+  content: "\ebc7";
+}
+
+.lni-target::before {
+  content: "\ebc8";
+}
+
+.lni-taxi::before {
+  content: "\ebc9";
+}
+
+.lni-teabag::before {
+  content: "\ebca";
+}
+
+.lni-telegram-original::before {
+  content: "\ebcb";
+}
+
+.lni-telegram::before {
+  content: "\ebcc";
+}
+
+.lni-text-align-center::before {
+  content: "\ebcd";
+}
+
+.lni-text-align-justify::before {
+  content: "\ebce";
+}
+
+.lni-text-align-left::before {
+  content: "\ebcf";
+}
+
+.lni-text-align-right::before {
+  content: "\ebd0";
+}
+
+.lni-text-format-remove::before {
+  content: "\ebd4";
+}
+
+.lni-text-format::before {
+  content: "\ebd1";
+}
+
+.lni-thought::before {
+  content: "\ebd2";
+}
+
+.lni-thumbs-down::before {
+  content: "\ebd3";
+}
+
+.lni-thumbs-up::before {
+  content: "\ebd5";
+}
+
+.lni-thunder-alt::before {
+  content: "\ebd6";
+}
+
+.lni-thunder::before {
+  content: "\ebd7";
+}
+
+.lni-ticket-alt::before {
+  content: "\ebd8";
+}
+
+.lni-ticket::before {
+  content: "\ebd9";
+}
+
+.lni-tiktok::before {
+  content: "\ebda";
+}
+
+.lni-timer::before {
+  content: "\ebdb";
+}
+
+.lni-tounge::before {
+  content: "\ebdc";
+}
+
+.lni-train-alt::before {
+  content: "\ebdd";
+}
+
+.lni-train::before {
+  content: "\ebde";
+}
+
+.lni-trash-can::before {
+  content: "\ebdf";
+}
+
+.lni-travel::before {
+  content: "\ebe0";
+}
+
+.lni-tree::before {
+  content: "\ebe1";
+}
+
+.lni-trees::before {
+  content: "\ebe2";
+}
+
+.lni-trello::before {
+  content: "\ebe3";
+}
+
+.lni-trowel::before {
+  content: "\ebe4";
+}
+
+.lni-tshirt::before {
+  content: "\ebe5";
+}
+
+.lni-tumblr::before {
+  content: "\ebe6";
+}
+
+.lni-twitch::before {
+  content: "\ebe7";
+}
+
+.lni-twitter-filled::before {
+  content: "\ebe8";
+}
+
+.lni-twitter-original::before {
+  content: "\ebe9";
+}
+
+.lni-twitter::before {
+  content: "\ebea";
+}
+
+.lni-ubuntu::before {
+  content: "\ebeb";
+}
+
+.lni-underline::before {
+  content: "\ebec";
+}
+
+.lni-unlink::before {
+  content: "\ebed";
+}
+
+.lni-unlock::before {
+  content: "\ebee";
+}
+
+.lni-unsplash::before {
+  content: "\ebef";
+}
+
+.lni-upload::before {
+  content: "\ebf0";
+}
+
+.lni-user::before {
+  content: "\ebf1";
+}
+
+.lni-users::before {
+  content: "\ebf6";
+}
+
+.lni-ux::before {
+  content: "\ebf2";
+}
+
+.lni-vector::before {
+  content: "\ebf3";
+}
+
+.lni-video::before {
+  content: "\ebf4";
+}
+
+.lni-vimeo::before {
+  content: "\ebf5";
+}
+
+.lni-visa::before {
+  content: "\ebf7";
+}
+
+.lni-vk::before {
+  content: "\ebf8";
+}
+
+.lni-volume-high::before {
+  content: "\ebf9";
+}
+
+.lni-volume-low::before {
+  content: "\ebfa";
+}
+
+.lni-volume-medium::before {
+  content: "\ebfb";
+}
+
+.lni-volume-mute::before {
+  content: "\ebfc";
+}
+
+.lni-volume::before {
+  content: "\ebfd";
+}
+
+.lni-wallet::before {
+  content: "\ebfe";
+}
+
+.lni-warning::before {
+  content: "\ebff";
+}
+
+.lni-website-alt::before {
+  content: "\ec00";
+}
+
+.lni-website::before {
+  content: "\ec01";
+}
+
+.lni-wechat::before {
+  content: "\ec02";
+}
+
+.lni-weight::before {
+  content: "\ec03";
+}
+
+.lni-whatsapp::before {
+  content: "\ec04";
+}
+
+.lni-wheelbarrow::before {
+  content: "\ec05";
+}
+
+.lni-wheelchair::before {
+  content: "\ec06";
+}
+
+.lni-windows::before {
+  content: "\ec07";
+}
+
+.lni-wordpress-filled::before {
+  content: "\ec08";
+}
+
+.lni-wordpress::before {
+  content: "\ec09";
+}
+
+.lni-world-alt::before {
+  content: "\ec0a";
+}
+
+.lni-world::before {
+  content: "\ec0c";
+}
+
+.lni-write::before {
+  content: "\ec0b";
+}
+
+.lni-xbox::before {
+  content: "\ec0d";
+}
+
+.lni-yahoo::before {
+  content: "\ec0e";
+}
+
+.lni-ycombinator::before {
+  content: "\ec0f";
+}
+
+.lni-yen::before {
+  content: "\ec10";
+}
+
+.lni-youtube::before {
+  content: "\ec13";
+}
+
+.lni-zip::before {
+  content: "\ec11";
+}
+
+.lni-zoom-in::before {
+  content: "\ec12";
+}
+
+.lni-zoom-out::before {
+  content: "\ec14";
+}
+

website/en/css/main.css

@@ -0,0 +1,2827 @@
+@charset "UTF-8";
+
+@font-face {
+  font-family: Gilroy;
+  src: url("fonts/gilroy-regular-3.otf");
+}
+
+@font-face {
+  font-family: GilroyBold;
+  src: url("fonts/gilroy-bold-4.otf");
+}
+
+@font-face {
+  font-family: GilroyThin;
+  src: url("fonts/Gilroy-Thin-13.otf");
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: "Gilroy", "Sen", sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  color: rgba(0, 0, 0, 0.7);
+  overflow-x: hidden;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+a:focus,
+input:focus,
+textarea:focus,
+button:focus,
+.btn:focus,
+.btn.focus,
+.btn:not(:disabled):not(.disabled).active,
+.btn:not(:disabled):not(.disabled):active {
+  text-decoration: none;
+  outline: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+a:hover {
+  color: #0fc6c2;
+}
+
+a {
+  -webkit-transition: all 0.3s ease-out 0s;
+  -moz-transition: all 0.3s ease-out 0s;
+  -ms-transition: all 0.3s ease-out 0s;
+  -o-transition: all 0.3s ease-out 0s;
+  transition: all 0.3s ease-out 0s;
+}
+
+a,
+a:focus,
+a:hover {
+  text-decoration: none;
+}
+
+i,
+span,
+a {
+  display: inline-block;
+}
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+h1,
+h2,
+h3,
+.single-post-header,
+.blog-roll-card-header,
+h4,
+h5,
+h6 {
+  font-weight: 700;
+  margin: 0px;
+}
+
+h1 a,
+h2 a,
+h3 a,
+.single-post-header a,
+.blog-roll-card-header a,
+h4 a,
+h5 a,
+h6 a {
+  color: inherit;
+}
+
+h1 {
+  font-size: 55px;
+}
+
+h2 {
+  font-size: 45px;
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .section-title h2 {
+    font-size: 38px;
+  }
+}
+
+@media (max-width: 767px) {
+  .section-title h2 {
+    font-size: 38px;
+  }
+  .nav-item__demo a {
+    padding: 5px 12px 5px 12px !important;
+    margin-top: 10px;
+  }
+}
+
+h3,
+.single-post-header,
+.blog-roll-card-header {
+  font-size: 25px;
+}
+
+h4 {
+  font-size: 20px;
+}
+
+h5 {
+  font-size: 18px;
+}
+
+h6 {
+  font-size: 16px;
+}
+
+ul,
+ol {
+  margin: 0px;
+  padding: 0px;
+  list-style-type: none;
+}
+
+p {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 25px;
+  margin: 0px;
+}
+
+.img-bg {
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+}
+
+.gray-bg-1 {
+  background-color: #fafafa;
+}
+
+.gray-bg-2 {
+  background-color: #f2f2f2;
+}
+
+.error {
+  color: orangered;
+}
+
+.success {
+  color: green;
+}
+
+@media (max-width: 767px) {
+  .container {
+    padding: 0 30px;
+  }
+}
+
+/*===== All Button Style =====*/
+.main-btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding: 18px 28px;
+  font-size: 18px;
+  line-height: 1;
+  border-radius: 10px;
+  color: #fff;
+  cursor: pointer;
+  z-index: 5;
+  transition: all 0.4s ease-in-out;
+  border: 2px solid transparent;
+  background: #0fc6c2;
+  overflow: hidden;
+}
+
+.main-btn:hover {
+  color: #fff;
+}
+
+.main-btn.border-btn {
+  border: 2px solid #0fc6c2;
+  background: transparent;
+  color: #0fc6c2;
+}
+
+.main-btn.border-btn:hover::after {
+  background-color: rgba(55, 194, 204, 0.15);
+}
+
+.btn-hover {
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-hover::after {
+  content: "";
+  position: absolute;
+  width: 0%;
+  height: 0%;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.05);
+  top: 50%;
+  left: 50%;
+  padding: 50%;
+  z-index: -1;
+  -webkit-transition: all 0.3s ease-out 0s;
+  -moz-transition: all 0.3s ease-out 0s;
+  -ms-transition: all 0.3s ease-out 0s;
+  -o-transition: all 0.3s ease-out 0s;
+  transition: all 0.3s ease-out 0s;
+  -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
+  -moz-transform: translate3d(-50%, -50%, 0) scale(0);
+  -ms-transform: translate3d(-50%, -50%, 0) scale(0);
+  -o-transform: translate3d(-50%, -50%, 0) scale(0);
+  transform: translate3d(-50%, -50%, 0) scale(0);
+}
+
+.btn-hover:hover::after {
+  -webkit-transform: translate3d(-50%, -50%, 0) scale(1.3);
+  -moz-transform: translate3d(-50%, -50%, 0) scale(1.3);
+  -ms-transform: translate3d(-50%, -50%, 0) scale(1.3);
+  -o-transform: translate3d(-50%, -50%, 0) scale(1.3);
+  transform: translate3d(-50%, -50%, 0) scale(1.3);
+}
+
+.scroll-top {
+  width: 45px;
+  height: 45px;
+  background: #0fc6c2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+  color: #fff;
+  border-radius: 5px;
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  z-index: 9;
+  cursor: pointer;
+  -webkit-transition: all 0.3s ease-out 0s;
+  -moz-transition: all 0.3s ease-out 0s;
+  -ms-transition: all 0.3s ease-out 0s;
+  -o-transition: all 0.3s ease-out 0s;
+  transition: all 0.3s ease-out 0s;
+}
+
+.scroll-top:hover {
+  color: #fff;
+  background: rgba(55, 194, 204, 0.8);
+}
+
+@keyframes animation1 {
+  0% {
+    -webkit-transform: translateY(30px);
+    -moz-transform: translateY(30px);
+    -ms-transform: translateY(30px);
+    -o-transform: translateY(30px);
+    transform: translateY(30px);
+  }
+
+  50% {
+    -webkit-transform: translateY(-30px);
+    -moz-transform: translateY(-30px);
+    -ms-transform: translateY(-30px);
+    -o-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  100% {
+    -webkit-transform: translateY(30px);
+    -moz-transform: translateY(30px);
+    -ms-transform: translateY(30px);
+    -o-transform: translateY(30px);
+    transform: translateY(30px);
+  }
+}
+
+@-webkit-keyframes animation1 {
+  0% {
+    -webkit-transform: translateY(30px);
+    -moz-transform: translateY(30px);
+    -ms-transform: translateY(30px);
+    -o-transform: translateY(30px);
+    transform: translateY(30px);
+  }
+
+  50% {
+    -webkit-transform: translateY(-30px);
+    -moz-transform: translateY(-30px);
+    -ms-transform: translateY(-30px);
+    -o-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  100% {
+    -webkit-transform: translateY(30px);
+    -moz-transform: translateY(30px);
+    -ms-transform: translateY(30px);
+    -o-transform: translateY(30px);
+    transform: translateY(30px);
+  }
+}
+
+/*===== All Preloader Style =====*/
+.preloader {
+  /* Body Overlay */
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: table;
+  height: 100%;
+  width: 100%;
+  /* Change Background Color */
+  background: #fff;
+  z-index: 99999;
+}
+
+.preloader .loader {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+}
+
+.preloader .loader .spinner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 64px;
+  margin-left: -32px;
+  z-index: 18;
+  pointer-events: none;
+}
+
+.preloader .loader .spinner .spinner-container {
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  padding-bottom: 100%;
+  top: 50%;
+  left: 50%;
+  margin-top: -50%;
+  margin-left: -50%;
+  -webkit-animation: spinner-linspin 1568.23529647ms linear infinite;
+  -moz-animation: spinner-linspin 1568.23529647ms linear infinite;
+  -o-animation: spinner-linspin 1568.23529647ms linear infinite;
+  animation: spinner-linspin 1568.23529647ms linear infinite;
+}
+
+.preloader .loader .spinner .spinner-container .spinner-rotator {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-animation: spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1)
+    infinite both;
+  -moz-animation: spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite
+    both;
+  -o-animation: spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite
+    both;
+  animation: spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+.preloader .loader .spinner .spinner-container .spinner-rotator .spinner-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  overflow: hidden;
+  right: 50%;
+}
+
+.preloader .loader .spinner .spinner-container .spinner-rotator .spinner-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  left: 50%;
+}
+
+.preloader .loader .spinner-circle {
+  box-sizing: border-box;
+  position: absolute;
+  width: 200%;
+  height: 100%;
+  border-style: solid;
+  /* Spinner Color */
+  border-color: #0fc6c2 #0fc6c2 rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  border-width: 6px;
+}
+
+.preloader .loader .spinner-left .spinner-circle {
+  left: 0;
+  right: -100%;
+  border-right-color: rgba(0, 0, 0, 0.1);
+  -webkit-animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1)
+    infinite both;
+  -moz-animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite
+    both;
+  -o-animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite
+    both;
+  animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+.preloader .loader .spinner-right .spinner-circle {
+  left: -100%;
+  right: 0;
+  border-left-color: rgba(0, 0, 0, 0.1);
+  -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite
+    both;
+  -moz-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  -o-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+/* Preloader Animations */
+@-webkit-keyframes spinner-linspin {
+  to {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner-linspin {
+  to {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes spinner-easespin {
+  12.5% {
+    -webkit-transform: rotate(135deg);
+    -moz-transform: rotate(135deg);
+    -ms-transform: rotate(135deg);
+    -o-transform: rotate(135deg);
+    transform: rotate(135deg);
+  }
+
+  25% {
+    -webkit-transform: rotate(270deg);
+    -moz-transform: rotate(270deg);
+    -ms-transform: rotate(270deg);
+    -o-transform: rotate(270deg);
+    transform: rotate(270deg);
+  }
+
+  37.5% {
+    -webkit-transform: rotate(405deg);
+    -moz-transform: rotate(405deg);
+    -ms-transform: rotate(405deg);
+    -o-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+
+  50% {
+    -webkit-transform: rotate(540deg);
+    -moz-transform: rotate(540deg);
+    -ms-transform: rotate(540deg);
+    -o-transform: rotate(540deg);
+    transform: rotate(540deg);
+  }
+
+  62.5% {
+    -webkit-transform: rotate(675deg);
+    -moz-transform: rotate(675deg);
+    -ms-transform: rotate(675deg);
+    -o-transform: rotate(675deg);
+    transform: rotate(675deg);
+  }
+
+  75% {
+    -webkit-transform: rotate(810deg);
+    -moz-transform: rotate(810deg);
+    -ms-transform: rotate(810deg);
+    -o-transform: rotate(810deg);
+    transform: rotate(810deg);
+  }
+
+  87.5% {
+    -webkit-transform: rotate(945deg);
+    -moz-transform: rotate(945deg);
+    -ms-transform: rotate(945deg);
+    -o-transform: rotate(945deg);
+    transform: rotate(945deg);
+  }
+
+  to {
+    -webkit-transform: rotate(1080deg);
+    -moz-transform: rotate(1080deg);
+    -ms-transform: rotate(1080deg);
+    -o-transform: rotate(1080deg);
+    transform: rotate(1080deg);
+  }
+}
+
+@keyframes spinner-easespin {
+  12.5% {
+    -webkit-transform: rotate(135deg);
+    -moz-transform: rotate(135deg);
+    -ms-transform: rotate(135deg);
+    -o-transform: rotate(135deg);
+    transform: rotate(135deg);
+  }
+
+  25% {
+    -webkit-transform: rotate(270deg);
+    -moz-transform: rotate(270deg);
+    -ms-transform: rotate(270deg);
+    -o-transform: rotate(270deg);
+    transform: rotate(270deg);
+  }
+
+  37.5% {
+    -webkit-transform: rotate(405deg);
+    -moz-transform: rotate(405deg);
+    -ms-transform: rotate(405deg);
+    -o-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+
+  50% {
+    -webkit-transform: rotate(540deg);
+    -moz-transform: rotate(540deg);
+    -ms-transform: rotate(540deg);
+    -o-transform: rotate(540deg);
+    transform: rotate(540deg);
+  }
+
+  62.5% {
+    -webkit-transform: rotate(675deg);
+    -moz-transform: rotate(675deg);
+    -ms-transform: rotate(675deg);
+    -o-transform: rotate(675deg);
+    transform: rotate(675deg);
+  }
+
+  75% {
+    -webkit-transform: rotate(810deg);
+    -moz-transform: rotate(810deg);
+    -ms-transform: rotate(810deg);
+    -o-transform: rotate(810deg);
+    transform: rotate(810deg);
+  }
+
+  87.5% {
+    -webkit-transform: rotate(945deg);
+    -moz-transform: rotate(945deg);
+    -ms-transform: rotate(945deg);
+    -o-transform: rotate(945deg);
+    transform: rotate(945deg);
+  }
+
+  to {
+    -webkit-transform: rotate(1080deg);
+    -moz-transform: rotate(1080deg);
+    -ms-transform: rotate(1080deg);
+    -o-transform: rotate(1080deg);
+    transform: rotate(1080deg);
+  }
+}
+
+@-webkit-keyframes spinner-left-spin {
+  0% {
+    -webkit-transform: rotate(130deg);
+    -moz-transform: rotate(130deg);
+    -ms-transform: rotate(130deg);
+    -o-transform: rotate(130deg);
+    transform: rotate(130deg);
+  }
+
+  50% {
+    -webkit-transform: rotate(-5deg);
+    -moz-transform: rotate(-5deg);
+    -ms-transform: rotate(-5deg);
+    -o-transform: rotate(-5deg);
+    transform: rotate(-5deg);
+  }
+
+  to {
+    -webkit-transform: rotate(130deg);
+    -moz-transform: rotate(130deg);
+    -ms-transform: rotate(130deg);
+    -o-transform: rotate(130deg);
+    transform: rotate(130deg);
+  }
+}
+
+@keyframes spinner-left-spin {
+  0% {
+    -webkit-transform: rotate(130deg);
+    -moz-transform: rotate(130deg);
+    -ms-transform: rotate(130deg);
+    -o-transform: rotate(130deg);
+    transform: rotate(130deg);
+  }
+
+  50% {
+    -webkit-transform: rotate(-5deg);
+    -moz-transform: rotate(-5deg);
+    -ms-transform: rotate(-5deg);
+    -o-transform: rotate(-5deg);
+    transform: rotate(-5deg);
+  }
+
+  to {
+    -webkit-transform: rotate(130deg);
+    -moz-transform: rotate(130deg);
+    -ms-transform: rotate(130deg);
+    -o-transform: rotate(130deg);
+    transform: rotate(130deg);
+  }
+}
+
+@-webkit-keyframes right-spin {
+  0% {
+    -webkit-transform: rotate(-130deg);
+    -moz-transform: rotate(-130deg);
+    -ms-transform: rotate(-130deg);
+    -o-transform: rotate(-130deg);
+    transform: rotate(-130deg);
+  }
+
+  50% {
+    -webkit-transform: rotate(5deg);
+    -moz-transform: rotate(5deg);
+    -ms-transform: rotate(5deg);
+    -o-transform: rotate(5deg);
+    transform: rotate(5deg);
+  }
+
+  to {
+    -webkit-transform: rotate(-130deg);
+    -moz-transform: rotate(-130deg);
+    -ms-transform: rotate(-130deg);
+    -o-transform: rotate(-130deg);
+    transform: rotate(-130deg);
+  }
+}
+
+@keyframes right-spin {
+  0% {
+    -webkit-transform: rotate(-130deg);
+    -moz-transform: rotate(-130deg);
+    -ms-transform: rotate(-130deg);
+    -o-transform: rotate(-130deg);
+    transform: rotate(-130deg);
+  }
+
+  50% {
+    -webkit-transform: rotate(5deg);
+    -moz-transform: rotate(5deg);
+    -ms-transform: rotate(5deg);
+    -o-transform: rotate(5deg);
+    transform: rotate(5deg);
+  }
+
+  to {
+    -webkit-transform: rotate(-130deg);
+    -moz-transform: rotate(-130deg);
+    -ms-transform: rotate(-130deg);
+    -o-transform: rotate(-130deg);
+    transform: rotate(-130deg);
+  }
+}
+
+/*=========================== 
+	NAVBAR CSS 
+============================= */
+.navbar-area {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 99;
+  -webkit-transition: all 0.3s ease-out 0s;
+  -moz-transition: all 0.3s ease-out 0s;
+  -ms-transition: all 0.3s ease-out 0s;
+  -o-transition: all 0.3s ease-out 0s;
+  transition: all 0.3s ease-out 0s;
+}
+
+.sticky {
+  position: fixed;
+  z-index: 99;
+  background-color: #fff;
+  -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
+  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
+  -webkit-transition: all 0.3s ease-out 0s;
+  -moz-transition: all 0.3s ease-out 0s;
+  -ms-transition: all 0.3s ease-out 0s;
+  -o-transition: all 0.3s ease-out 0s;
+  transition: all 0.3s ease-out 0s;
+}
+
+.sticky .navbar .navbar-nav .nav-item a {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.sticky .navbar .navbar-nav .nav-item a.active,
+.sticky .navbar .navbar-nav .nav-item a:hover {
+  color: #0fc6c2;
+}
+
+.sticky .navbar .navbar-nav .nav-item a.active::before,
+.sticky .navbar .navbar-nav .nav-item a:hover::before {
+  background: #0fc6c2;
+}
+
+.sticky .navbar .header-btn .main-btn {
+  color: #fff;
+}
+
+.sticky .navbar .navbar-toggler .toggler-icon {
+  background: rgba(0, 0, 0, 0.9);
+}
+
+.navbar {
+  border-radius: 5px;
+  position: relative;
+  -webkit-transition: all 0.3s ease-out 0s;
+  -moz-transition: all 0.3s ease-out 0s;
+  -ms-transition: all 0.3s ease-out 0s;
+  -o-transition: all 0.3s ease-out 0s;
+  transition: all 0.3s ease-out 0s;
+  padding: 10px 0;
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px),
+  (max-width: 767px) {
+  .navbar {
+    padding: 15px 0;
+  }
+}
+
+.navbar-brand {
+  padding: 0;
+  display: flex;
+}
+
+.navbar-brand img {
+  max-width: 180px;
+}
+
+.navbar-toggler {
+  padding: 0;
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px),
+  (max-width: 767px) {
+  .navbar-toggler {
+    position: absolute;
+    right: 0;
+    top: 22px;
+  }
+}
+
+.navbar-toggler:focus {
+  outline: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+.navbar-toggler .toggler-icon {
+  width: 30px;
+  height: 2px;
+  background-color: rgba(0, 0, 0, 0.9);
+  display: block;
+  margin: 5px 0;
+  position: relative;
+  -webkit-transition: all 0.3s ease-out 0s;
+  -moz-transition: all 0.3s ease-out 0s;
+  -ms-transition: all 0.3s ease-out 0s;
+  -o-transition: all 0.3s ease-out 0s;
+  transition: all 0.3s ease-out 0s;
+}
+
+.navbar-toggler.active .toggler-icon:nth-of-type(1) {
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+  top: 7px;
+}
+
+.navbar-toggler.active .toggler-icon:nth-of-type(2) {
+  opacity: 0;
+}
+
+.navbar-toggler.active .toggler-icon:nth-of-type(3) {
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  transform: rotate(135deg);
+  top: -7px;
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px),
+  (max-width: 767px) {
+  .navbar-collapse {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background-color: #fff;
+    z-index: 9;
+    -webkit-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
+    padding: 5px 12px;
+  }
+}
+
+.navbar-nav .nav-item {
+  position: relative;
+  padding: 8px 0;
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px),
+  (max-width: 767px) {
+  .navbar-nav .nav-item {
+    padding: 0px;
+    margin-left: 20px;
+  }
+}
+
+@media (max-width: 767px) {
+  .navbar-nav .nav-item:first-child {
+    margin-top: 20px;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px),
+  (max-width: 767px) {
+  .navbar-nav .nav-item:last-child {
+    margin-bottom: 20px;
+  }
+}
+
+.navbar-nav .nav-item a {
+  color: rgba(0, 0, 0, 0.9);
+  -webkit-transition: all 0.3s ease-out 0s;
+  -moz-transition: all 0.3s ease-out 0s;
+  -ms-transition: all 0.3s ease-out 0s;
+  -o-transition: all 0.3s ease-out 0s;
+  transition: all 0.3s ease-out 0s;
+  padding: 8px 17px;
+  position: relative;
+  font-weight: 500;
+  font-size: 18px;
+  text-align: center;
+}
+.navbar-nav .nav-item .nav-item_icon {
+  display: inline-flex;
+  align-items: center;
+  color: #000;
+  font-weight: 500;
+  font-family: GilroyBold;
+}
+
+.nav-item .nav-item_icon:hover {
+  color: #5865f2 !important;
+}
+.nav-item_icon:hover .icon_svg {
+  fill: #5865f2 !important;
+}
+
+.navbar-nav .nav-item_icon svg {
+  font-size: 22px;
+  width: 20px;
+  height: 16px;
+  margin-right: 10px;
+  cursor: pointer;
+}
+@media only screen and (min-width: 768px) and (max-width: 991px),
+  (max-width: 767px) {
+  .navbar-nav .nav-item a {
+    display: inline-block;
+    padding: 6px 0px;
+    color: rgba(0, 0, 0, 0.9);
+  }
+}
+
+.navbar-nav .nav-item a:hover,
+.navbar-nav .nav-item a.active {
+  color: #0fc6c2;
+}
+
+@media (max-width: 767px) {
+  .header-btn {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 550px) and (max-width: 767px) {
+  .header-btn {
+    display: flex;
+  }
+}
+
+.header-btn .main-btn {
+  color: #fff;
+  background: #0fc6c2;
+  padding: 12px 22px;
+  margin-left: 15px;
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px),
+  (max-width: 767px) {
+  .header-btn .main-btn {
+    padding: 8px 20px;
+    margin-right: 60px;
+    margin-left: 0px;
+  }
+}
+
+/* ====================
+		HERO CSS
+======================= */
+.hero-section {
+  position: relative;
+  overflow: hidden;
+  height: 780px;
+  display: flex;
+  align-items: center;
+  background-image: url("../public/images/home_bg_1.png");
+  background-size: 100% 100%;
+  z-index: 1;
+}
+
+@media only screen and (min-width: 1200px) and (max-width: 1399px) {
+  .hero-section {
+    height: 650px;
+  }
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .hero-section {
+    height: 640px;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px),
+  (max-width: 767px) {
+  .hero-section {
+    height: auto;
+    padding: 100px 0;
+  }
+}
+
+@media only screen and (min-width: 1200px) and (max-width: 1399px) {
+  .hero-section::after {
+    width: 780px;
+    height: 780px;
+  }
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .hero-section::after {
+    width: 750px;
+    height: 750px;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px),
+  (max-width: 767px) {
+  .hero-section::after {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .hero-section .hero-content {
+    padding-top: 50px;
+  }
+}
+
+.hero-section .hero-content h1 {
+  margin-bottom: 15px;
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .hero-section .hero-content h1 {
+    font-size: 50px;
+  }
+}
+
+@media (max-width: 767px) {
+  .hero-section .hero-content h1 {
+    font-size: 45px;
+  }
+}
+
+.hero-section .hero-content p {
+  margin-bottom: 30px;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 18px;
+}
+
+@media only screen and (min-width: 1400px),
+  only screen and (min-width: 1200px) and (max-width: 1399px) {
+  .hero-section .hero-content p {
+    padding-right: 115px;
+  }
+  .feature-section .container {
+    padding-left: 65px;
+  }
+}
+
+.hero-section .hero-image {
+  padding-top: 50px;
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199px),
+  only screen and (min-width: 1200px) and (max-width: 1399px) {
+  .hero-section .hero-image img {
+    width: 100%;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px),
+  (max-width: 767px) {
+  .hero-section .hero-image img {
+    max-width: 100%;
+    margin: auto;
+  }
+}
+
+/* ===============================
+    FEATURE SECTION ONE CSS
+================================== */
+.feature-section {
+  position: relative;
+  background-image: url("../public/images/common-bg.svg");
+  background-size: cover;
+  background-position: bottom center;
+  padding-bottom: 125px;
+}
+
+.single-feature {
+  margin-bottom: 65px;
+}
+
+@media only screen and (min-width: 1400px) {
+  .single-feature {
+    padding-right: 65px;
+  }
+}
+
+.single-feature:hover .feature-icon::before {
+  background: #0fc6c2;
+}
+
+.single-feature:hover .feature-icon i {
+  color: #fff;
+}
+
+.single-feature .feature-icon {
+  width: 62px;
+  height: 66px;
+  position: relative;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 40px;
+}
+
+.single-feature .feature-icon img {
+  width: 100%;
+  height: auto;
+}
+
+.single-feature .feature-icon::before,
+.single-feature .feature-icon::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  -webkit-transform: skew(-3deg);
+  -moz-transform: skew(-3deg);
+  -ms-transform: skew(-3deg);
+  -o-transform: skew(-3deg);
+  transform: skew(-3deg);
+}
+
+.single-feature .feature-icon::before {
+  background: #d5f1f3;
+  -webkit-transition: all 0.3s ease-out 0s;
+  -moz-transition: all 0.3s ease-out 0s;
+  -ms-transition: all 0.3s ease-out 0s;
+  -o-transition: all 0.3s ease-out 0s;
+  transition: all 0.3s ease-out 0s;
+  z-index: -1;
+}
+
+.single-feature .feature-icon::after {
+  background: transparent;
+  border: 2px solid #d5f1f3;
+  top: 8px;
+  left: -8px;
+  z-index: -2;
+}
+
+.single-feature .feature-icon i {
+  font-size: 40px;
+  color: black;
+  -webkit-transition: all 0.3s ease-out 0s;
+  -moz-transition: all 0.3s ease-out 0s;
+  -ms-transition: all 0.3s ease-out 0s;
+  -o-transition: all 0.3s ease-out 0s;
+  transition: all 0.3s ease-out 0s;
+}
+
+.single-feature .feature-content h4 {
+  margin-bottom: 15px;
+}
+
+/* ========================
+    CTA SECTION CSS
+=========================== */
+.cta-section {
+  position: relative;
+  z-index: 1;
+  padding-top: 120px;
+}
+
+@media only screen and (min-width: 1200px) and (max-width: 1399px) {
+  .cta-section {
+    padding-top: 150px;
+  }
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .cta-section {
+    padding-top: 130px;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px),
+  (max-width: 767px) {
+  .cta-section {
+    padding-top: 0px;
+  }
+}
+
+.cta-section .left-image {
+  left: 0px;
+  bottom: 0;
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px),
+  (max-width: 767px) {
+  .cta-section .left-image {
+    position: static;
+    width: 100%;
+    margin-top: 50px;
+  }
+}
+
+.cta-section .left-image img {
+  max-width: 100%;
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px),
+  (max-width: 767px) {
+  .cta-section .left-image img {
+    max-width: 100%;
+    margin: auto;
+  }
+}
+
+@media only screen and (min-width: 1400px) {
+  .cta-section .cta-content-wrapper {
+    padding-right: 100px;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px),
+  (max-width: 767px) {
+  .cta-section .cta-image {
+    margin-top: 50px;
+  }
+}
+
+.cta-section .cta-image img {
+  width: 100%;
+}
+
+/* =====================
+    BLOG CSS
+======================== */
+.blog-section {
+  padding-top: 160px;
+  background-image: url("../public/images/common-bg.svg");
+  background-size: cover;
+  background-position: bottom-center;
+}
+
+.blog-section .section-title {
+  margin-bottom: 60px;
+}
+
+@media only screen and (min-width: 1400px),
+  only screen and (min-width: 1200px) and (max-width: 1399px) {
+  .blog-section .section-title {
+    padding: 0px 40px;
+  }
+}
+
+.blog-section .section-title h2 {
+  margin-bottom: 15px;
+}
+
+.single-blog,
+.single-post,
+.blog-roll-card {
+  background: #fff;
+  box-shadow: 0px 0px 50px rgba(183, 199, 240, 0.25);
+  border-radius: 14px;
+  padding: 52px 30px;
+  margin-bottom: 50px;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.single-blog .populer,
+.single-post .populer,
+.blog-roll-card .populer {
+  position: absolute;
+  right: 10px;
+  top: 18px;
+  color: #fff;
+  z-index: 2;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.single-blog .blog-header,
+.single-post .blog-header,
+.blog-roll-card .blog-header {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  /* changes for Image tag */
+  width: 100%;
+  height: 200px;
+  position: relative;
+  /* end of changes for Image tag */
+}
+
+.single-blog .blog-header h5,
+.single-post .blog-header h5,
+.blog-roll-card .blog-header h5 {
+  font-size: 18px;
+  margin-bottom: 20px;
+}
+
+.single-blog .blog-header h2,
+.single-post .blog-header h2,
+.blog-roll-card .blog-header h2 {
+  font-size: 40px;
+  margin-bottom: 30px;
+}
+
+.single-blog .blog-header h2 span,
+.single-post .blog-header h2 span,
+.blog-roll-card .blog-header h2 span {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.5);
+  font-weight: 400;
+}
+
+.single-blog .blog-body,
+.single-post .blog-body,
+.blog-roll-card .blog-body {
+  padding-top: 30px;
+  padding-bottom: 25px;
+}
+
+.single-blog .blog-body ul li,
+.single-post .blog-body ul li,
+.blog-roll-card .blog-body ul li {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.single-blog .blog-body ul li span.bolet,
+.single-post .blog-body ul li span.bolet,
+.blog-roll-card .blog-body ul li span.bolet {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 13px;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.single-blog .blog-body ul li span.bolet.active,
+.single-post .blog-body ul li span.bolet.active,
+.blog-roll-card .blog-body ul li span.bolet.active {
+  background: #0fc6c2;
+}
+
+.single-blog .blog-body ul li p,
+.single-post .blog-body ul li p,
+.blog-roll-card .blog-body ul li p {
+  margin-bottom: 0px;
+}
+
+.single-blog .blog-footer .main-btn,
+.single-blog .blog-roll-card-footer .main-btn,
+.single-post .blog-footer .main-btn,
+.single-post .blog-roll-card-footer .main-btn,
+.blog-roll-card .blog-footer .main-btn,
+.blog-roll-card .blog-roll-card-footer .main-btn {
+  color: #0fc6c2;
+  background: #e3fdff;
+}
+
+.single-blog .blog-footer .main-btn:hover,
+.single-blog .blog-roll-card-footer .main-btn:hover,
+.single-post .blog-footer .main-btn:hover,
+.single-post .blog-roll-card-footer .main-btn:hover,
+.blog-roll-card .blog-footer .main-btn:hover,
+.blog-roll-card .blog-roll-card-footer .main-btn:hover {
+  color: #fff;
+}
+
+.single-blog .blog-footer .main-btn:hover::after,
+.single-blog .blog-roll-card-footer .main-btn:hover::after,
+.single-post .blog-footer .main-btn:hover::after,
+.single-post .blog-roll-card-footer .main-btn:hover::after,
+.blog-roll-card .blog-footer .main-btn:hover::after,
+.blog-roll-card .blog-roll-card-footer .main-btn:hover::after {
+  background: #0fc6c2;
+}
+
+.single-blog.standard::after,
+.standard.single-post::after,
+.standard.blog-roll-card::after {
+  content: "";
+  position: absolute;
+  background: #0fc6c2;
+  border-radius: 50%;
+  z-index: -1;
+  width: 150px;
+  height: 150px;
+  top: -70px;
+  right: -50px;
+}
+
+.single-blog.standard .blog-footer .main-btn,
+.single-blog.standard .blog-roll-card-footer .main-btn,
+.standard.single-post .blog-footer .main-btn,
+.standard.single-post .blog-roll-card-footer .main-btn,
+.standard.blog-roll-card .blog-footer .main-btn,
+.standard.blog-roll-card .blog-roll-card-footer .main-btn {
+  color: #fff;
+  background: #0fc6c2;
+}
+
+.single-blog.standard .blog-footer .main-btn:hover::after,
+.single-blog.standard .blog-roll-card-footer .main-btn:hover::after,
+.standard.single-post .blog-footer .main-btn:hover::after,
+.standard.single-post .blog-roll-card-footer .main-btn:hover::after,
+.standard.blog-roll-card .blog-footer .main-btn:hover::after,
+.standard.blog-roll-card .blog-roll-card-footer .main-btn:hover::after {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.single-blog div:first-of-type,
+.single-post div:first-of-type,
+.blog-roll-card div:first-of-type {
+  padding-top: 0;
+}
+
+.single-post-nav,
+.blog-roll-nav {
+  align-items: center;
+  background: linear-gradient(
+    180deg,
+    #c2fbff 0%,
+    rgba(255, 255, 255, 0) 93.47%
+  );
+  display: flex;
+  height: 400px;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+
+@media only screen and (min-width: 550px) {
+  .single-post-nav,
+  .blog-roll-nav {
+    height: 350px;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .single-post-nav,
+  .blog-roll-nav {
+    height: 430px;
+  }
+}
+
+.breadcrumb-nav {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-top: 1em;
+}
+
+@media only screen and (min-width: 550px) {
+  .breadcrumb-nav {
+    flex-direction: row;
+  }
+}
+
+.breadcrumb-nav li a {
+  color: #0fc6c2;
+  font-weight: 500;
+  display: inline-block;
+  position: relative;
+  padding-right: 15px;
+  margin-right: 15px;
+  text-transform: capitalize;
+}
+
+.breadcrumb-nav li::after {
+  content: "";
+  font-size: 10px;
+  position: relative;
+  font-family: lineIcons;
+  right: 11px;
+}
+
+.breadcrumb-nav li:last-child::after {
+  content: "";
+}
+
+.single-post,
+.blog-roll-card {
+  padding: 0px;
+}
+
+.single-post div:first-of-type,
+.blog-roll-card div:first-of-type {
+  padding-top: 30px;
+}
+
+.single-post-meta,
+.blog-roll-card-meta {
+  padding: 30px 16px 0 16px;
+}
+
+@media only screen and (min-width: 550px) {
+  .single-post-meta,
+  .blog-roll-card-meta {
+    padding: 42px 24px 0 24px;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .single-post-meta,
+  .blog-roll-card-meta {
+    padding: 52px 30px 0 30px;
+  }
+}
+
+.single-post-header,
+.blog-roll-card-header {
+  margin-bottom: 20px;
+}
+
+.single-post-meta-info,
+.blog-roll-card-meta-info {
+  font-size: 14px;
+  display: inline-block;
+  position: relative;
+}
+
+.single-post-meta-info li,
+.blog-roll-card-meta-info li {
+  font-size: 14px;
+  display: inline-block;
+  margin-right: 15px;
+  padding-right: 15px;
+  position: relative;
+}
+
+.single-post-meta-info li a,
+.blog-roll-card-meta-info li a {
+  color: #888;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.single-post-meta-info li a img,
+.blog-roll-card-meta-info li a img {
+  height: 35px;
+  width: 35px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 12px;
+}
+
+@media only screen and (min-width: 550px) {
+  .single-post-meta-info li a img,
+  .blog-roll-card-meta-info li a img {
+    height: 35px;
+    width: 35px;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .single-post-meta-info li a img,
+  .blog-roll-card-meta-info li a img {
+    height: 50px;
+    width: 50px;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .single-post-meta-info li::before,
+  .blog-roll-card-meta-info li::before {
+    position: absolute;
+    content: "";
+    right: -5px;
+    top: 50%;
+    background-color: #d2d2d2;
+    height: 5px;
+    width: 5px;
+    border-radius: 50%;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .single-post-meta-info li:last-of-type::before,
+  .blog-roll-card-meta-info li:last-of-type::before {
+    content: none;
+  }
+}
+
+.single-post-thumbnail {
+  position: relative;
+  overflow: hidden;
+  border-radius: 0;
+  width: 100%;
+  margin-top: 15px;
+  /* changes for Image tag */
+  height: 300px;
+  /* end of changes for Image tag */
+}
+
+.single-post-thumbnail img {
+  width: 100%;
+}
+
+@media only screen and (min-width: 550px) {
+  .single-post-thumbnail {
+    margin-top: 42px;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .single-post-thumbnail {
+    margin-top: 52px;
+  }
+}
+
+.single-post-body,
+.blog-roll-card-body {
+  padding: 30px 16px;
+}
+
+@media only screen and (min-width: 550px) {
+  .single-post-body,
+  .blog-roll-card-body {
+    padding: 42px 24px;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .single-post-body,
+  .blog-roll-card-body {
+    padding: 52px 30px;
+  }
+}
+
+.single-post-body h3,
+.blog-roll-card-body h3,
+.single-post-body .single-post-header,
+.blog-roll-card-body .single-post-header,
+.single-post-body .blog-roll-card-header,
+.blog-roll-card-body .blog-roll-card-header {
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
+
+.single-post-body p,
+.blog-roll-card-body p {
+  margin-bottom: 20px;
+}
+
+.single-post-body figure img,
+.blog-roll-card-body figure img {
+  max-width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+  .blog-roll-card .single-post-thumbnail {
+    margin-top: 30px;
+  }
+}
+
+.blog-roll-card-meta {
+  padding: 15px 15px 0 15px;
+}
+
+@media only screen and (min-width: 768px) {
+  .blog-roll-card-meta {
+    padding: 30px 30px 0 30px;
+  }
+}
+
+.blog-roll-card-header a {
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.blog-roll-card-header a:hover {
+  color: #0fc6c2;
+}
+
+.blog-roll-card-body {
+  padding: 15px 15px 5px;
+}
+
+@media only screen and (min-width: 768px) {
+  .blog-roll-card-body {
+    padding: 30px 30px 10px;
+  }
+}
+
+.blog-roll-card-footer {
+  padding: 0px 15px 15px;
+}
+
+@media only screen and (min-width: 768px) {
+  .blog-roll-card-footer {
+    padding: 0 30px 30px;
+  }
+}
+
+/* =====================
+    TEAM SECTION CSS
+======================== */
+.team-section .single-team {
+  position: relative;
+  margin-bottom: 50px;
+}
+
+.team-section .single-team .team-image {
+  max-width: 313px;
+  width: 100%;
+  border-radius: 50%;
+}
+
+.team-section .single-team .team-image img {
+  width: 100%;
+}
+
+.team-section .single-team .team-info {
+  position: absolute;
+  bottom: 30px;
+  right: 0;
+  background: #fff;
+  -webkit-box-shadow: 0px 8px 25px rgba(211, 211, 211, 0.25);
+  -moz-box-shadow: 0px 8px 25px rgba(211, 211, 211, 0.25);
+  box-shadow: 0px 8px 25px rgba(211, 211, 211, 0.25);
+  padding: 20px 30px;
+  min-width: 210px;
+  text-align: center;
+}
+
+.team-section .single-team .team-info h4 {
+  font-size: 20px;
+  margin-bottom: 5px;
+}
+
+.team-section .single-team .team-info p {
+  font-size: 14px;
+}
+
+/* ========================
+		TESTIMONIAL CSS
+=========================== */
+.testimonial-section {
+  /* background-image: url("../public/images/testimonial/testimonial-bg.svg"); */
+  background-size: cover;
+  background-position: bottom center;
+  padding-top: 75px;
+  padding-bottom: 130px;
+  border-radius: 333px 0px;
+  position: relative;
+  z-index: 1;
+}
+
+@media only screen and (min-width: 1200px) and (max-width: 1399px) {
+  .testimonial-section {
+    border-radius: 200px 0px;
+  }
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .testimonial-section {
+    border-radius: 100px 0px;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px),
+  (max-width: 767px) {
+  .testimonial-section {
+    border-radius: 70px 0px;
+  }
+}
+
+.testimonial-section .testimonial-active-wrapper {
+  position: relative;
+}
+
+@media (max-width: 767px) {
+  .testimonial-section .testimonial-active-wrapper {
+    padding-bottom: 0px;
+  }
+  .testimonial-section {
+    padding-bottom: 30px;
+  }
+}
+
+.testimonial-section .testimonial-active-wrapper .tns-controls {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+@media (max-width: 767px) {
+  .testimonial-section .testimonial-active-wrapper .tns-controls {
+    justify-content: center;
+  }
+}
+
+.testimonial-section .testimonial-active-wrapper .tns-controls button {
+  width: 55px;
+  height: 55px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #fff;
+  color: rgba(0, 0, 0, 0.9);
+  border: 1px solid #0fc6c2;
+  -webkit-transition: all 0.3s ease-out 0s;
+  -moz-transition: all 0.3s ease-out 0s;
+  -ms-transition: all 0.3s ease-out 0s;
+  -o-transition: all 0.3s ease-out 0s;
+  transition: all 0.3s ease-out 0s;
+  margin: 0 5px;
+}
+
+.testimonial-section .testimonial-active-wrapper .tns-controls button:hover {
+  background: #0fc6c2;
+  color: #fff;
+}
+
+.testimonial-section .testimonial-active-wrapper .single-testimonial {
+  text-align: center;
+}
+
+.testimonial-section .testimonial-active-wrapper .single-testimonial .quote {
+  font-size: 55px;
+  line-height: 1;
+  color: #0fc6c2;
+  margin-bottom: 20px;
+}
+
+.testimonial-section .testimonial-active-wrapper .single-testimonial .content {
+  margin-bottom: 30px;
+}
+
+.testimonial-section
+  .testimonial-active-wrapper
+  .single-testimonial
+  .content
+  p {
+  font-size: 22px;
+  line-height: 35px;
+  color: rgba(0, 0, 0, 0.7);
+  padding: 0 15px;
+}
+
+@media (max-width: 767px) {
+  .testimonial-section
+    .testimonial-active-wrapper
+    .single-testimonial
+    .content
+    p {
+    font-size: 18px;
+    line-height: 28px;
+    padding: 0px;
+  }
+}
+
+.testimonial-section .testimonial-active-wrapper .single-testimonial .info h6 {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+
+.testimonial-section .testimonial-active-wrapper .single-testimonial .info p {
+  font-size: 15px;
+}
+
+.testimonial-section .testimonial-images .testimonial-image {
+  position: absolute;
+  z-index: -1;
+  max-width: 100%;
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px),
+  (max-width: 767px) {
+  .testimonial-section .testimonial-images .testimonial-image {
+    display: none;
+  }
+}
+
+.testimonial-section .testimonial-images .testimonial-image.image-1 {
+  left: 10%;
+  top: 30%;
+}
+
+.testimonial-section .testimonial-images .testimonial-image.image-2 {
+  bottom: 5%;
+  left: 15%;
+}
+
+.testimonial-section .testimonial-images .testimonial-image.image-3 {
+  top: 5%;
+  right: 10%;
+}
+
+.testimonial-section .testimonial-images .testimonial-image.image-4 {
+  top: 40%;
+  right: 12%;
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .testimonial-section .testimonial-images .testimonial-image.image-4 {
+    right: 8%;
+  }
+}
+
+/* ==========================
+    FOOTER CSS
+============================= */
+.footer .footer-widget {
+  margin-bottom: 50px;
+}
+
+.footer .footer-widget .logo {
+  margin-bottom: 30px;
+}
+
+.footer .footer-widget .desc {
+  margin-bottom: 25px;
+}
+
+.footer .footer-widget .social-links {
+  display: flex;
+  align-items: center;
+}
+
+.footer .footer-widget .social-links li a {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: #e3fdff;
+  color: rgba(0, 0, 0, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 18px;
+  font-size: 22px;
+}
+
+.footer .footer-widget .social-links li a:hover {
+  background: #0fc6c2;
+  color: #fff;
+}
+
+.footer .footer-widget h3,
+.footer .footer-widget .single-post-header,
+.footer .footer-widget .blog-roll-card-header {
+  margin-bottom: 30px;
+  margin-top: 10px;
+}
+
+.footer .footer-widget .links li a {
+  font-size: 16px;
+  line-height: 30px;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.footer .footer-widget .links li a:hover {
+  padding-left: 8px;
+  color: #0fc6c2;
+}
+
+.footer .footer-widget form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.footer .footer-widget form input {
+  width: 100%;
+  background: #f1feff;
+  border: 1px solid #0fc6c2;
+  box-sizing: border-box;
+  border-radius: 10px;
+  margin-bottom: 20px;
+  padding: 15px 20px;
+}
+
+.footer .footer-widget form button {
+  text-align: right;
+}
+
+/* ======================
+    DEFAULT CSS
+========================= */
+.mt-5 {
+  margin-top: 5px;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+
+.mt-15 {
+  margin-top: 15px;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mt-25 {
+  margin-top: 25px;
+}
+
+.mt-30 {
+  margin-top: 30px;
+}
+
+.mt-35 {
+  margin-top: 35px;
+}
+
+.mt-40 {
+  margin-top: 40px;
+}
+
+.mt-45 {
+  margin-top: 45px;
+}
+
+.mt-50 {
+  margin-top: 50px;
+}
+
+.mt-55 {
+  margin-top: 55px;
+}
+
+.mt-60 {
+  margin-top: 60px;
+}
+
+.mt-65 {
+  margin-top: 65px;
+}
+
+.mt-70 {
+  margin-top: 70px;
+}
+
+.mt-75 {
+  margin-top: 75px;
+}
+
+.mt-80 {
+  margin-top: 80px;
+}
+
+.mt-85 {
+  margin-top: 85px;
+}
+
+.mt-90 {
+  margin-top: 90px;
+}
+
+.mt-95 {
+  margin-top: 95px;
+}
+
+.mt-100 {
+  margin-top: 100px;
+}
+
+.mt-105 {
+  margin-top: 105px;
+}
+
+.mt-110 {
+  margin-top: 110px;
+}
+
+.mt-115 {
+  margin-top: 115px;
+}
+
+.mt-120 {
+  margin-top: 120px;
+}
+
+.mt-125 {
+  margin-top: 125px;
+}
+
+.mt-130 {
+  margin-top: 130px;
+}
+
+.mt-135 {
+  margin-top: 135px;
+}
+
+.mt-140 {
+  margin-top: 140px;
+}
+
+.mt-145 {
+  margin-top: 145px;
+}
+
+.mt-150 {
+  margin-top: 150px;
+}
+
+.mt-155 {
+  margin-top: 155px;
+}
+
+.mt-160 {
+  margin-top: 160px;
+}
+
+.mt-165 {
+  margin-top: 165px;
+}
+
+.mt-170 {
+  margin-top: 170px;
+}
+
+.mt-175 {
+  margin-top: 175px;
+}
+
+.mt-180 {
+  margin-top: 180px;
+}
+
+.mt-185 {
+  margin-top: 185px;
+}
+
+.mt-190 {
+  margin-top: 190px;
+}
+
+.mt-195 {
+  margin-top: 195px;
+}
+
+.mt-200 {
+  margin-top: 200px;
+}
+
+.mt-205 {
+  margin-top: 205px;
+}
+
+.mt-210 {
+  margin-top: 210px;
+}
+
+.mt-215 {
+  margin-top: 215px;
+}
+
+.mt-220 {
+  margin-top: 220px;
+}
+
+.mt-225 {
+  margin-top: 225px;
+}
+
+.mb-5 {
+  margin-bottom: 5px;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+.mb-15 {
+  margin-bottom: 15px;
+}
+
+.mb-20 {
+  margin-bottom: 20px;
+}
+
+.mb-25 {
+  margin-bottom: 25px;
+}
+
+.mb-30 {
+  margin-bottom: 30px;
+}
+
+.mb-35 {
+  margin-bottom: 35px;
+}
+
+.mb-40 {
+  margin-bottom: 40px;
+}
+
+.mb-45 {
+  margin-bottom: 45px;
+}
+
+.mb-50 {
+  margin-bottom: 50px;
+}
+
+.mb-55 {
+  margin-bottom: 55px;
+}
+
+.mb-60 {
+  margin-bottom: 60px;
+}
+
+.mb-65 {
+  margin-bottom: 65px;
+}
+
+.mb-70 {
+  margin-bottom: 70px;
+}
+
+.mb-75 {
+  margin-bottom: 75px;
+}
+
+.mb-80 {
+  margin-bottom: 80px;
+}
+
+.mb-85 {
+  margin-bottom: 85px;
+}
+
+.mb-90 {
+  margin-bottom: 90px;
+}
+
+.mb-95 {
+  margin-bottom: 95px;
+}
+
+.mb-100 {
+  margin-bottom: 100px;
+}
+
+.mb-105 {
+  margin-bottom: 105px;
+}
+
+.mb-110 {
+  margin-bottom: 110px;
+}
+
+.mb-115 {
+  margin-bottom: 115px;
+}
+
+.mb-120 {
+  margin-bottom: 120px;
+}
+
+.mb-125 {
+  margin-bottom: 125px;
+}
+
+.mb-130 {
+  margin-bottom: 130px;
+}
+
+.mb-135 {
+  margin-bottom: 135px;
+}
+
+.mb-140 {
+  margin-bottom: 140px;
+}
+
+.mb-145 {
+  margin-bottom: 145px;
+}
+
+.mb-150 {
+  margin-bottom: 150px;
+}
+
+.mb-155 {
+  margin-bottom: 155px;
+}
+
+.mb-160 {
+  margin-bottom: 160px;
+}
+
+.mb-165 {
+  margin-bottom: 165px;
+}
+
+.mb-170 {
+  margin-bottom: 170px;
+}
+
+.mb-175 {
+  margin-bottom: 175px;
+}
+
+.mb-180 {
+  margin-bottom: 180px;
+}
+
+.mb-185 {
+  margin-bottom: 185px;
+}
+
+.mb-190 {
+  margin-bottom: 190px;
+}
+
+.mb-195 {
+  margin-bottom: 195px;
+}
+
+.mb-200 {
+  margin-bottom: 200px;
+}
+
+.mb-205 {
+  margin-bottom: 205px;
+}
+
+.mb-210 {
+  margin-bottom: 210px;
+}
+
+.mb-215 {
+  margin-bottom: 215px;
+}
+
+.mb-220 {
+  margin-bottom: 220px;
+}
+
+.mb-225 {
+  margin-bottom: 225px;
+}
+
+.pt-5 {
+  padding-top: 5px;
+}
+
+.pt-10 {
+  padding-top: 10px;
+}
+
+.pt-15 {
+  padding-top: 15px;
+}
+
+.pt-20 {
+  padding-top: 20px;
+}
+
+.pt-25 {
+  padding-top: 25px;
+}
+
+.pt-30 {
+  padding-top: 30px;
+}
+
+.pt-35 {
+  padding-top: 35px;
+}
+
+.pt-40 {
+  padding-top: 40px;
+}
+
+.pt-45 {
+  padding-top: 45px;
+}
+
+.pt-50 {
+  padding-top: 50px;
+}
+
+.pt-55 {
+  padding-top: 55px;
+}
+
+.pt-60 {
+  padding-top: 60px;
+}
+
+.pt-65 {
+  padding-top: 65px;
+}
+
+.pt-70 {
+  padding-top: 70px;
+}
+
+.pt-75 {
+  padding-top: 75px;
+}
+
+.pt-80 {
+  padding-top: 80px;
+}
+
+.pt-85 {
+  padding-top: 85px;
+}
+
+.pt-90 {
+  padding-top: 90px;
+}
+
+.pt-95 {
+  padding-top: 95px;
+}
+
+.pt-100 {
+  padding-top: 100px;
+}
+
+.pt-105 {
+  padding-top: 105px;
+}
+
+.pt-110 {
+  padding-top: 110px;
+}
+
+.pt-115 {
+  padding-top: 115px;
+}
+
+.pt-120 {
+  padding-top: 120px;
+}
+
+.pt-125 {
+  padding-top: 125px;
+}
+
+.pt-130 {
+  padding-top: 130px;
+}
+
+.pt-135 {
+  padding-top: 135px;
+}
+
+.pt-140 {
+  padding-top: 140px;
+}
+
+.pt-145 {
+  padding-top: 145px;
+}
+
+.pt-150 {
+  padding-top: 150px;
+}
+
+.pt-155 {
+  padding-top: 155px;
+}
+
+.pt-160 {
+  padding-top: 160px;
+}
+
+.pt-165 {
+  padding-top: 165px;
+}
+
+.pt-170 {
+  padding-top: 170px;
+}
+
+.pt-175 {
+  padding-top: 175px;
+}
+
+.pt-180 {
+  padding-top: 180px;
+}
+
+.pt-185 {
+  padding-top: 185px;
+}
+
+.pt-190 {
+  padding-top: 190px;
+}
+
+.pt-195 {
+  padding-top: 195px;
+}
+
+.pt-200 {
+  padding-top: 200px;
+}
+
+.pt-205 {
+  padding-top: 205px;
+}
+
+.pt-210 {
+  padding-top: 210px;
+}
+
+.pt-215 {
+  padding-top: 215px;
+}
+
+.pt-220 {
+  padding-top: 220px;
+}
+
+.pt-225 {
+  padding-top: 225px;
+}
+
+.pb-5 {
+  padding-bottom: 5px;
+}
+
+.pb-10 {
+  padding-bottom: 10px;
+}
+
+.pb-15 {
+  padding-bottom: 15px;
+}
+
+.pb-20 {
+  padding-bottom: 20px;
+}
+
+.pb-25 {
+  padding-bottom: 25px;
+}
+
+.pb-30 {
+  padding-bottom: 30px;
+}
+
+.pb-35 {
+  padding-bottom: 35px;
+}
+
+.pb-40 {
+  padding-bottom: 40px;
+}
+
+.pb-45 {
+  padding-bottom: 45px;
+}
+
+.pb-50 {
+  padding-bottom: 50px;
+}
+
+.pb-55 {
+  padding-bottom: 55px;
+}
+
+.pb-60 {
+  padding-bottom: 60px;
+}
+
+.pb-65 {
+  padding-bottom: 65px;
+}
+
+.pb-70 {
+  padding-bottom: 70px;
+}
+
+.pb-75 {
+  padding-bottom: 75px;
+}
+
+.pb-80 {
+  padding-bottom: 80px;
+}
+
+.pb-85 {
+  padding-bottom: 85px;
+}
+
+.pb-90 {
+  padding-bottom: 90px;
+}
+
+.pb-95 {
+  padding-bottom: 95px;
+}
+
+.pb-100 {
+  padding-bottom: 100px;
+}
+
+.pb-105 {
+  padding-bottom: 105px;
+}
+
+.pb-110 {
+  padding-bottom: 110px;
+}
+
+.pb-115 {
+  padding-bottom: 115px;
+}
+
+.pb-120 {
+  padding-bottom: 120px;
+}
+
+.pb-125 {
+  padding-bottom: 125px;
+}
+
+.pb-130 {
+  padding-bottom: 130px;
+}
+
+.pb-135 {
+  padding-bottom: 135px;
+}
+
+.pb-140 {
+  padding-bottom: 140px;
+}
+
+.pb-145 {
+  padding-bottom: 145px;
+}
+
+.pb-150 {
+  padding-bottom: 150px;
+}
+
+.pb-155 {
+  padding-bottom: 155px;
+}
+
+.pb-160 {
+  padding-bottom: 160px;
+}
+
+.pb-165 {
+  padding-bottom: 165px;
+}
+
+.pb-170 {
+  padding-bottom: 170px;
+}
+
+.pb-175 {
+  padding-bottom: 175px;
+}
+
+.pb-180 {
+  padding-bottom: 180px;
+}
+
+.pb-185 {
+  padding-bottom: 185px;
+}
+
+.pb-190 {
+  padding-bottom: 190px;
+}
+
+.pb-195 {
+  padding-bottom: 195px;
+}
+
+.pb-200 {
+  padding-bottom: 200px;
+}
+
+.pb-205 {
+  padding-bottom: 205px;
+}
+
+.pb-210 {
+  padding-bottom: 210px;
+}
+
+.pb-215 {
+  padding-bottom: 215px;
+}
+
+.pb-220 {
+  padding-bottom: 220px;
+}
+
+.pb-225 {
+  padding-bottom: 225px;
+}
+
+.widget {
+  background: #fff;
+  box-shadow: 0px 0px 50px rgba(183, 199, 240, 0.25);
+  border-radius: 14px;
+  padding: 30px;
+  margin-bottom: 30px;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.widget form {
+  position: relative;
+}
+
+.widget form input {
+  background-color: transparent;
+  border-radius: 5px;
+  border: 1px solid #0fc6c2;
+  font-size: 14px;
+  font-weight: 400;
+  height: 55px;
+  padding: 0 70px 0 30px;
+  width: 100%;
+}
+
+.widget form button {
+  border: none;
+  position: absolute;
+  right: 7px;
+  top: 6px;
+  width: 42px;
+  height: 42px;
+  z-index: 1;
+  color: #fff !important;
+  font-size: 13px;
+  -webkit-transition: all 0.3s ease-out 0s;
+  transition: all 0.3s ease-out 0s;
+  color: #fff;
+  border-radius: 5px;
+  padding: 0 !important;
+  border: none;
+  background: #0fc6c2;
+}
+
+.widget-title {
+  font-size: 22px;
+  margin-bottom: 30px;
+  position: relative;
+  font-weight: 600;
+  line-height: 28px;
+  z-index: 1;
+}
+
+.categories-widget .categories-list li {
+  display: inline;
+}
+
+.categories-widget .categories-list li > a {
+  -ms-flex-pack: center;
+  -webkit-box-pack: center;
+  background: 0 0;
+  border-radius: 5px;
+  border: 1px solid #0fc6c2;
+  color: rgba(0, 0, 0, 0.7);
+  display: -ms-inline-flexbox;
+  display: -webkit-inline-box;
+  display: inline-flex;
+  font-size: 14px;
+  font-weight: 400;
+  justify-content: center;
+  margin-bottom: 10px;
+  margin-right: 5px;
+  padding: 7px 15px;
+  text-transform: capitalize;
+}
+
+.categories-widget .categories-list li > a:hover {
+  background-color: #0fc6c2;
+  color: #fff;
+  border-color: transparent;
+}
+
+/*# sourceMappingURL=main.css.map */
+
+h2 {
+  font-family: GilroyBold;
+  color: #000;
+}
+.nav-btn_tooltip {
+  bottom: -20px;
+  left: -20px;
+  height: 30px;
+  line-height: 30px;
+  position: absolute;
+  padding: 0 8px;
+  background-color: #000;
+  border-radius: 10px;
+  color: #fff;
+  white-space: nowrap;
+  display: none;
+}
+.nav-item_tooltip:hover .nav-btn_tooltip {
+  display: block;
+}

website/en/jsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": [
+        "components/*"
+      ],
+      "@/lib/*": [
+        "lib/*"
+      ],
+      "@/css/*": [
+        "css/*"
+      ]
+    }
+  }
+}

website/en/lib/api.js

@@ -0,0 +1,184 @@
+import Butter from "buttercms";
+
+let butter;
+
+const previewSetting = process.env.PREVIEW;
+// make preview mode by default
+const preview =
+  previewSetting === "true" || previewSetting === undefined ? 1 : 0;
+
+try {
+  butter = Butter(process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY, preview);
+} catch (e) {
+  console.log(e);
+}
+
+const defaultPageSize = 100;
+const defaultPostCount = 10;
+
+export async function getLandingPage(slug) {
+  try {
+    const page = await butter.page.retrieve("landing-page", slug);
+
+    return page?.data?.data;
+  } catch (e) {
+    throw e.response.data.detail;
+  }
+}
+
+export async function getLandingPages() {
+  let paginatedLandingPages = [];
+  let currentPage = 1;
+  while (!!currentPage) {
+    const landingPagesData = await getLandingPagesData(currentPage);
+    paginatedLandingPages.push(...landingPagesData.pages);
+    currentPage = landingPagesData.nextPage;
+  }
+
+  return paginatedLandingPages;
+}
+
+async function getLandingPagesData(page, pageSize = defaultPageSize) {
+  try {
+    const params = {
+      page,
+      page_size: pageSize,
+    };
+    const response = await butter.page.list("landing-page", params);
+
+    return {
+      pages: response?.data?.data,
+      prevPage: response?.data?.meta.previous_page,
+      nextPage: response?.data?.meta.next_page,
+    };
+  } catch (e) {
+    throw e.response.data.detail;
+  }
+}
+
+export async function getPostsData(
+  { page, pageSize, tag, category } = { page: 1, pageSize: defaultPostCount }
+) {
+  try {
+    // https://buttercms.com/docs/api/node?javascript#get-your-blog-posts
+    const params = {
+      page_size: pageSize || defaultPostCount,
+      page: page || 1,
+    };
+
+    if (tag) {
+      params.tag_slug = tag;
+    }
+
+    if (category) {
+      params.category_slug = category;
+    }
+    const response = await butter.post.list(params);
+
+    return {
+      posts: response?.data?.data,
+      prevPage: response?.data?.meta.previous_page,
+      nextPage: response?.data?.meta.next_page,
+    };
+  } catch (e) {
+    throw e.response.data.detail;
+  }
+}
+
+export async function getPost(slug) {
+  try {
+    const response = await butter.post.retrieve(slug);
+
+    return response?.data?.data;
+  } catch (e) {
+    throw e.response.data.detail;
+  }
+}
+
+export async function getMainMenu() {
+  try {
+    const mainMenu = {
+      meta: {
+        id: 740357,
+      },
+      name: "Main menu",
+      menu_items: [
+        {
+          meta: {
+            id: 740351,
+          },
+          label: "222",
+          url: "#home",
+        },
+        {
+          meta: {
+            id: 740352,
+          },
+          label: "About",
+          url: "#about",
+        },
+        {
+          meta: {
+            id: 740353,
+          },
+          label: "Features",
+          url: "#features",
+        },
+        {
+          meta: {
+            id: 740354,
+          },
+          label: "Try It",
+          url: "#tryit",
+        },
+        {
+          meta: {
+            id: 740355,
+          },
+          label: "Testimonials",
+          url: "#testimonials",
+        },
+        {
+          meta: {
+            id: 740356,
+          },
+          label: "Blog",
+          url: "#blog",
+        },
+      ],
+    };
+    return mainMenu ? mainMenu.menu_items : [];
+  } catch (e) {
+    throw e.response.data.detail;
+  }
+}
+
+export async function getCategories() {
+  try {
+    const response = await butter.category.list();
+
+    return response?.data?.data;
+  } catch (e) {
+    throw e.response.data.detail;
+  }
+}
+
+export async function getTags() {
+  try {
+    const response = await butter.tag.list();
+
+    return response?.data?.data;
+  } catch (e) {
+    throw e.response.data.detail;
+  }
+}
+
+export async function searchPosts({ query }) {
+  try {
+    const response = await butter.post.search(query);
+
+    return response?.data?.data;
+  } catch (e) {
+    throw e.response.data.detail;
+  }
+}

website/en/next-sitemap.config.js

@@ -1,44 +0,0 @@
-/** @type {import('next-sitemap').IConfig} */
-const nextSiteMapConfig = {
-  siteUrl: 'https://waf-ce.chaitin.cn',
-  generateRobotsTxt: true,
-  robotsTxtOptions: {
-    policies: [{ userAgent: '*', allow: '/', disallow: '' }],
-  },
-  sitemap: {
-    // path: '/sitemap.xml',
-    routes: {
-      '/community': {
-        changefreq: 'always',
-      },
-    },
-  },
-  autoLastmod: true,
-  priority: 1,
-  changefreq: 'daily',
-  sitemapSize: 5000,
-  transform: async (config, path) => {
-    if (!path) {
-      return null
-    }
-    const customFields = config.sitemap.routes[path] || {}
-
-    return {
-      loc: path,
-      changefreq: customFields.changefreq || config.changefreq,
-      priority: config.priority,
-      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
-      alternateRefs: config.alternateRefs ?? [],
-    }
-  },
-  additionalPaths: (config) => {
-    const paths = ['/docs']
-    const result = []
-    paths.forEach(async (item) => {
-      result.push(await config.transform(config, item))
-    })
-    return result
-  },
-}
-
-module.exports = nextSiteMapConfig

website/en/next.config.js

@@ -1,21 +1,11 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  async rewrites() {
-    return {
-      fallback: [
-        // These rewrites are checked after both pages/public files
-        // and dynamic routes are checked
-        {
-          source: '/api/safeline/count',
-          destination: 'http://121.199.46.182/api/safeline/count',
-        },
-        {
-          source: '/api/:path*',
-          destination: 'http://121.199.46.182/api/:path*',
-        },
-      ],
-    }
+module.exports =  {
+  reactStrictMode: false,
+  output: 'export',
+  images: {
+    unoptimized: true,
+  },
+  webpack: (config) => {
+    config.resolve.fallback = { fs: false };
+    return config;
   },
 }
-
-module.exports = nextConfig

website/en/package.json

@@ -1,35 +1,31 @@
 {
-  "name": "website2",
-  "version": "0.1.0",
+  "name": "nextjs-starter-buttercms",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start -p 3001",
-    "lint": "next lint",
-    "sitemap_build": "next-sitemap"
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
-    "@emotion/react": "11.11.1",
-    "@emotion/styled": "11.11.0",
-    "@mui/icons-material": "5.14.3",
-    "@mui/lab": "5.0.0-alpha.138",
-    "@mui/material": "5.14.3",
-    "countup.js": "2.7.0",
-    "next": "14.0.1",
-    "next-sitemap": "^4.2.3",
-    "react": "^18",
-    "react-dom": "^18"
+    "@popperjs/core": "^2.11.6",
+    "acorn": "^8.8.2",
+    "bootstrap": "^5.2.3",
+    "buttercms": "^1.2.15",
+    "camelcase-keys": "^8.0.2",
+    "date-fns": "^2.29.3",
+    "next": "^14.2.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sharp": "^0.31.3",
+    "tiny-slider": "^2.9.4",
+    "typescript": "^4.9.4"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "autoprefixer": "^10.0.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.1",
-    "postcss": "^8",
-    "tailwindcss": "^3.3.0",
-    "typescript": "5.4.2"
+    "eslint": "^8.32.0",
+    "eslint-config-next": "^13.1.5"
+  },
+  "engines": {
+    "node": ">=14.17.1"
   }
 }

website/en/pages/_app.js

@@ -0,0 +1,53 @@
+import Head from "next/head";
+import { useEffect } from "react";
+import Script from "next/script";
+
+import "@/css/lineicons.css";
+import "bootstrap/dist/css/bootstrap.css";
+
+import "@/css/main.css";
+import "@/css/tiny-slider.min.css";
+
+function MyApp({ Component }) {
+  useEffect(() => {
+    import("bootstrap/dist/js/bootstrap.js");
+  }, []);
+  return (
+    <>
+      <Head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+        <title>SafeLine | the Best WAF for Webmaster</title>
+        <meta
+          name="description"
+          content="SafeLine is a simple, lightweight, locally deployable WAF that protects your website from network attacks that including OWASP attacks, zero-day attacks, web crawlers, vulnerability scanning, vulnerability exploit, http flood and so on."
+        />
+        <meta
+          name="keywords"
+          content="waf,safeline,free,open source,sql injection,xss"
+        ></meta>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script
+          src="https://at.alicdn.com/t/c/font_4031246_dv8ag8nlrz.js?spm=a313x.manage_type_myprojects.i1.13.51b53a81rteUu4&file=font_4031246_dv8ag8nlrz.js"
+          defer
+        />
+        <script
+          async
+          src="https://www.googletagmanager.com/gtag/js?id=G-Z48W47MR7B"
+        ></script>
+        <script async src="/ga.js"></script>
+
+        <link rel="shortcut icon" type="image/x-icon" href="/favicon.png" />
+      </Head>
+      <Component />
+    </>
+  );
+}
+
+MyApp.getInitialProps = async (appContext) => {
+  let mainMenu = [];
+
+  return { ...{}, mainMenu };
+};
+
+export default MyApp;

website/en/pages/_document.js

@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+    return (
+        <Html>
+            <Head>
+                <link
+                    href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap"
+                    rel="stylesheet"
+                />
+            </Head>
+            <body>
+                <Main />
+                <NextScript />
+            </body>
+        </Html>
+    )
+}

website/en/pages/index.js

@@ -0,0 +1,59 @@
+import Features from "@/components/landing-page-sections/features";
+import Hero from "@/components/landing-page-sections/hero";
+import Footer from "@/components/footer-section";
+import TwoColumnWithImage from "@/components/landing-page-sections/two-column-with-image";
+
+import HeaderSection from "@/components/header-section";
+
+function MyApp() {
+  return (
+    <>
+      <HeaderSection />
+      <Hero />
+      <Features />
+      {[
+        {
+          headline: "Easy To Use",
+          subheadline:
+            "Deployed by Docker, one command can complete the installation, and you can get started at 0 cost. The security configuration is ready to use, no manual maintenance is required, and safe lying management can be achieved.",
+          buttonUrl: "11111",
+          image: "EasyToUse.png",
+          imagePosition: "right",
+          scrollAnchorId: "11111",
+        },
+        {
+          headline: "High Security Efficacy",
+          subheadline:
+            "The first intelligent semantic analysis algorithm in the industry, accurate detection, low false alarm, and difficult to bypass. The semantic analysis algorithm has no rules, and you are no longer at a loss when facing 0-day attacks with unknown features.",
+          buttonUrl: "11111",
+          image: "HighSecurityEfficacy.png",
+          imagePosition: "left",
+          scrollAnchorId: "11111",
+        },
+        {
+          headline: "High Performance",
+          subheadline:
+            "Ruleless engine, linear security detection algorithm, average request detection delay at 1 millisecond level. Strong concurrency, single core easily detects 2000+ TPS, as long as the hardware is strong enough, there is no upper limit to the traffic scale that can be supported.",
+          buttonUrl: "11111",
+          image: "HighPerformance.png",
+          imagePosition: "right",
+          scrollAnchorId: "11111",
+        },
+        {
+          headline: "High Availability",
+          subheadline:
+            "The traffic processing engine is developed based on Nginx, and both performance and stability can be guaranteed. Built-in complete health check mechanism, service availability is as high as 99.99%.",
+          buttonUrl: "11111",
+          image: "HighAvailability.png",
+          imagePosition: "left",
+          scrollAnchorId: "11111",
+        },
+      ].map((item) => (
+        <TwoColumnWithImage key={item.headline} {...item} />
+      ))}
+      <Footer/>
+    </>
+  );
+}
+
+export default MyApp;

website/en/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

website/en/public/BingSiteAuth.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0"?>
-<users>
-	<user>3EF7E30C5A378E54709FA57D67499571</user>
-</users>

website/en/public/ga.js

@@ -0,0 +1,7 @@
+window.dataLayer = window.dataLayer || [];
+function gtag() {
+  dataLayer.push(arguments);
+}
+gtag("js", new Date());
+
+gtag("config", "G-Z48W47MR7B");

website/en/public/googlef97f8402f9139518.html

@@ -1 +0,0 @@
-google-site-verification: googlef97f8402f9139518.html

website/en/public/images/common-bg.svg

@@ -0,0 +1 @@
+<svg fill="none" height="701" viewBox="0 0 1440 701" width="1440" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="720.435" x2="720.435" y1="791.976" y2="42.5723"><stop offset="0" stop-color="#c2fbff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><path d="m.435883 649.737c486.403117-274.293 312.179117 121.413 1440.004117 0 1127.82-121.413 0-649.595215 0-649.595215h-1440.004117s-486.402883 923.887215 0 649.595215z" fill="url(#a)"/></svg>

website/en/public/images/discount.svg

@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="76px" height="20px" viewBox="0 0 76 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 4</title>
-    <defs>
-        <linearGradient x1="-4.93008412e-13%" y1="46.5373961%" x2="90.5986697%" y2="53.4626039%" id="linearGradient-1">
-            <stop stop-color="#FFC193" offset="0%"></stop>
-            <stop stop-color="#FF5A5E" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="官网设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="版本（专业版特惠）" transform="translate(-1012.000000, -737.000000)">
-            <g id="编组-4" transform="translate(1012.000000, 737.000000)">
-                <path d="M8,0 L66,0 C71.5228475,-1.01453063e-15 76,4.4771525 76,10 C76,15.5228475 71.5228475,20 66,20 L0,20 L0,20 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 Z" id="矩形" fill="url(#linearGradient-1)"></path>
-                <g id="人气、热度" transform="translate(8.000000, 5.000000)" fill="#FFDF00" fill-rule="nonzero">
-                    <path d="M6.40193705,3.27637496 C6.08232446,3.79522657 5.66447596,4.06226219 5.66447596,4.06226219 C6.43652715,0.986509858 3.28052577,0 3.28052577,0 C4.21445866,3.40781736 0,3.66793497 0,6.41438948 C0,9.160844 3.22241439,9.63818748 3.22241439,9.63818748 C0.437218955,6.56658596 4,4.82324455 4,4.82324455 C4,4.82324455 3.37737807,5.72120374 4.83708059,7.12002767 C5.86786579,8.10653753 4.73607748,9.63403667 4.73607748,9.63403667 C5.78623314,9.64787271 8,8.26565202 8,6.388101 C8,4.51193359 6.40193705,3.27637496 6.40193705,3.27637496 Z" id="路径"></path>
-                </g>
-                <text id="限时特惠" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" line-spacing="20" fill="#FFFFFF">
-                    <tspan x="20" y="14">限时特惠</tspan>
-                </text>
-            </g>
-        </g>
-    </g>
-</svg>

website/en/public/images/enterprise-bg.svg

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="1920px" height="343px" viewBox="0 0 1920 343" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>企业版底图</title>
-    <defs>
-        <linearGradient x1="100%" y1="48.4042833%" x2="50%" y2="51.5957167%" id="linearGradient-1">
-            <stop stop-color="#D5F6E4" offset="0%"></stop>
-            <stop stop-color="#0FC6C2" offset="99.9180507%"></stop>
-        </linearGradient>
-        <rect id="path-2" x="0" y="0" width="1920" height="343"></rect>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="70.5207199%" id="linearGradient-4">
-            <stop stop-color="#FFFFFF" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="官网设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="企业版底图">
-            <mask id="mask-3" fill="white">
-                <use xlink:href="#path-2"></use>
-            </mask>
-            <use id="蒙版" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
-            <path d="M775.722398,244.134104 L984.709001,367.11642 L750.711155,499.925604 L512.147585,367.11642 L512.147585,250.149971 L584.561532,293.722483 L584.561532,324.723672 L750.711155,418.984941 L842.888792,367.11642 L700.59358,283.891362 L775.722398,244.134104 Z M746.145431,-24.0743962 L984.709001,108.734788 L984.709001,225.062047 L912.295054,182.128725 L912.295054,151.127536 L746.145431,56.8662666 L653.967794,108.734788 L796.263006,191.959846 L721.134188,231.717103 L512.147585,108.734788 L746.145431,-24.0743962 Z" id="形状结合" fill="url(#linearGradient-4)" opacity="0.245047433" mask="url(#mask-3)"></path>
-        </g>
-    </g>
-</svg>