diff --git a/components/landingComponents/About.jsx b/components/landingComponents/About.jsx
new file mode 100644
index 0000000..45d00cd
--- /dev/null
+++ b/components/landingComponents/About.jsx
@@ -0,0 +1,78 @@
+import React from "react";
+import { Tilt } from "react-tilt";
+import { motion } from "framer-motion";
+
+import { fadeIn, textVariant } from "src/utils/motion";
+import { services } from "src/constans";
+import { styles } from "src/style";
+import { SectionWrapper } from "src/hoc";
+import Image from "next/image";
+
+const ServiceCard = ({ index, title, icon }) => (
+  <Tilt className="xs:w-[250px] w-full">
+    <motion.div
+      variants={fadeIn("right", "spring", index * 0.5, 0.75)}
+      className="w-full bg-[#35685952] p-[1px] rounded-[20px] shadow-card"
+    >
+      <div
+        options={{
+          max: 45,
+          scale: 1,
+          speed: 450,
+        }}
+        className="bg-tertiary rounded-[20px] py-5 px-12 min-h-[180px] flex justify-evenly items-center flex-col"
+      >
+        {/* <Image
+          src={
+            icon == "int1"
+              ? int1
+              : icon == "int2"
+              ? int2
+              : icon == "int3"
+              ? int3
+              : icon == "int4"
+              ? int4
+              : int1
+          }
+          alt="web-development"
+          className="w-[150px] h-[150px] object-contain rounded-xl"
+        /> */}
+
+        <h3 className="text-white text-[20px] font-bold text-center">
+          {title}
+        </h3>
+      </div>
+    </motion.div>
+  </Tilt>
+);
+
+const About = () => {
+  return (
+    <>
+      <motion.div variants={textVariant()}>
+        <h2 className="text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]">
+          Introduction.
+        </h2>
+      </motion.div>
+
+      <motion.p
+        variants={fadeIn("", "", 0.1, 1)}
+        className="mt-4 text-secondary text-[17px] max-w-3xl leading-[30px] text-white"
+      >
+        At 'Briz', our ethos is simple: empower coffee shop owners to manage
+        better, control operations smoothly, and serve each cup with a smile.
+        Our platform is designed to handle the heavy lifting of day-to-day
+        tasks, from inventory management to staff scheduling, so you can focus
+        on what matters most - your patrons and your passion for coffee.
+      </motion.p>
+
+      <div className="mt-20 flex flex-wrap xs:justify-center lg:justify-start gap-10">
+        {services.map((service, index) => (
+          <ServiceCard key={service.title} index={index} {...service} />
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default SectionWrapper(About, "about");
diff --git a/components/landingComponents/AboutUsHero/page.jsx b/components/landingComponents/AboutUsHero/page.jsx
new file mode 100644
index 0000000..12dfc32
--- /dev/null
+++ b/components/landingComponents/AboutUsHero/page.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const AboutUsHero = () => {
+  return (
+    <>
+      <div className="flex justify-center lg:pt-[150px] xs:pt-[100px] xs:ml-5 lg:ml-0 px-20">
+        <div className=" ml-1 ">
+          <h1
+            className={`font-black text-white lg:text-[100px] sm:text-[70px] xs:text-[60px] text-[40px] mb-0  text-center `}
+          >
+            Welcome to Briz
+          </h1>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AboutUsHero;
diff --git a/components/landingComponents/Contact.jsx b/components/landingComponents/Contact.jsx
new file mode 100644
index 0000000..7722ac0
--- /dev/null
+++ b/components/landingComponents/Contact.jsx
@@ -0,0 +1,137 @@
+"use client";
+import React, { useRef, useState } from "react";
+import { motion } from "framer-motion";
+import emailjs from "@emailjs/browser";
+
+import { SectionWrapper } from "src/hoc";
+import { slideIn } from "src/utils/motion";
+import { styles } from "src/style";
+// import { EarthCanvas } from "./canvas";
+
+const Contact = () => {
+  const formRef = useRef();
+  const [form, setForm] = useState({
+    name: "",
+    email: "",
+    message: "",
+  });
+
+  const [loading, setLoading] = useState(false);
+
+  const handleChange = (e) => {
+    const { target } = e;
+    const { name, value } = target;
+
+    setForm({
+      ...form,
+      [name]: value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    emailjs
+      .send(
+        import.meta.env.VITE_APP_EMAILJS_SERVICE_ID,
+        import.meta.env.VITE_APP_EMAILJS_TEMPLATE_ID,
+        {
+          from_name: form.name,
+          to_name: "JavaScript Mastery",
+          from_email: form.email,
+          to_email: "sujata@jsmastery.pro",
+          message: form.message,
+        },
+        import.meta.env.VITE_APP_EMAILJS_PUBLIC_KEY
+      )
+      .then(
+        () => {
+          setLoading(false);
+          alert("Thank you. I will get back to you as soon as possible.");
+
+          setForm({
+            name: "",
+            email: "",
+            message: "",
+          });
+        },
+        (error) => {
+          setLoading(false);
+          console.error(error);
+
+          alert("Ahh, something went wrong. Please try again.");
+        }
+      );
+  };
+
+  return (
+    <div
+      className={`xl:mt-12 flex xl:flex-row flex-col-reverse gap-10 overflow-hidden`}
+    >
+      <motion.div
+        variants={slideIn("left", "tween", 0.2, 1)}
+        className="flex-[0.75] bg-black-100 p-8 rounded-2xl"
+      >
+        <p className={styles.sectionSubText}>Get in touch</p>
+        <h3 className={styles.sectionHeadText}>Contact.</h3>
+
+        <form
+          ref={formRef}
+          onSubmit={handleSubmit}
+          className="mt-12 flex flex-col gap-8"
+        >
+          <label className="flex flex-col">
+            <span className="text-white font-medium mb-4">Your Name</span>
+            <input
+              type="text"
+              name="name"
+              value={form.name}
+              onChange={handleChange}
+              placeholder="What's your good name?"
+              className="bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium"
+            />
+          </label>
+          <label className="flex flex-col">
+            <span className="text-white font-medium mb-4">Your email</span>
+            <input
+              type="email"
+              name="email"
+              value={form.email}
+              onChange={handleChange}
+              placeholder="What's your web address?"
+              className="bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium"
+            />
+          </label>
+          <label className="flex flex-col">
+            <span className="text-white font-medium mb-4">Your Message</span>
+            <textarea
+              rows={7}
+              name="message"
+              value={form.message}
+              onChange={handleChange}
+              placeholder="What you want to say?"
+              className="bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium"
+            />
+          </label>
+
+          <button
+            type="submit"
+            className="bg-tertiary py-3 px-8 rounded-xl outline-none w-fit text-white font-bold shadow-md shadow-primary"
+          >
+            {loading ? "Sending..." : "Send"}
+          </button>
+        </form>
+      </motion.div>
+
+      <motion.div
+        variants={slideIn("right", "tween", 0.2, 1)}
+        className="xl:flex-1 xl:h-auto md:h-[550px] h-[350px]"
+      >
+        {/* <EarthCanvas /> */}
+      </motion.div>
+    </div>
+  );
+};
+
+export default SectionWrapper(Contact, "contact");
diff --git a/components/landingComponents/Experience.jsx b/components/landingComponents/Experience.jsx
new file mode 100644
index 0000000..800e011
--- /dev/null
+++ b/components/landingComponents/Experience.jsx
@@ -0,0 +1,87 @@
+import React from "react";
+import {
+  VerticalTimeline,
+  VerticalTimelineElement,
+} from "react-vertical-timeline-component";
+import { motion } from "framer-motion";
+
+import "react-vertical-timeline-component/style.min.css";
+
+import { SectionWrapper } from "src/hoc";
+import { textVariant } from "src/utils/motion";
+import { styles } from "src/style";
+import { experiences } from "src/constans";
+
+const ExperienceCard = ({ experience }) => {
+  return (
+    <VerticalTimelineElement
+      contentStyle={{
+        background: "#35685952",
+        color: "#fff",
+        borderRadius: "15px",
+      }}
+      contentArrowStyle={{ borderRight: "7px solid  #35685952" }}
+      date={experience.date}
+      iconStyle={{ background: experience.iconBg }}
+      icon={
+        <div className="flex justify-center items-center w-full h-full bg-primary-300 rounded-full"></div>
+      }
+    >
+      <div>
+        <h3 className="text-white text-[24px] font-bold">{experience.title}</h3>
+        <p
+          className="text-secondary text-[16px] font-semibold"
+          style={{ margin: 0 }}
+        >
+          {experience.company_name}
+        </p>
+      </div>
+
+      <ul className="mt-5 list-disc ml-5 space-y-2">
+        {experience.points.map((point, index) => (
+          <li
+            key={`experience-point-${index}`}
+            className="text-white-100 text-[14px] pl-1 tracking-wider"
+          >
+            {point}
+          </li>
+        ))}
+      </ul>
+    </VerticalTimelineElement>
+  );
+};
+
+const Experience = () => {
+  return (
+    <>
+      <motion.div variants={textVariant()}>
+        <h2
+          className={`text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px] text-center`}
+        >
+          User journey road map{" "}
+        </h2>
+      </motion.div>
+
+      <div className="mt-20 flex flex-col">
+        <VerticalTimeline>
+          {experiences.map((experience, index) => (
+            <ExperienceCard
+              key={`experience-${index}`}
+              experience={experience}
+            />
+          ))}
+        </VerticalTimeline>
+      </div>
+
+      <div className=" mt-20">
+        <h2
+          className={`text-white font-bold  md:text-[30px] sm:text-[20px] xs:text-[18px] text-[30px] text-center`}
+        >
+          " Now, your coffee shop's symphony plays harmoniously with Briz."
+        </h2>
+      </div>
+    </>
+  );
+};
+
+export default SectionWrapper(Experience, "work");
diff --git a/components/landingComponents/Feedbacks.jsx b/components/landingComponents/Feedbacks.jsx
new file mode 100644
index 0000000..62305b4
--- /dev/null
+++ b/components/landingComponents/Feedbacks.jsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+import { SectionWrapper } from "src/hoc";
+import { fadeIn, textVariant } from "src/utils/motion";
+import { styles } from "src/style";
+import { testimonials } from "src/constans";
+
+const FeedbackCard = ({ index, testimonial, title }) => (
+  <motion.div
+    variants={fadeIn("", "spring", index * 0.5, 0.75)}
+    className="bg-[#35685952] p-10 rounded-3xl w-full"
+  >
+    <h3 className="text-white text-[24px] font-bold">{title}</h3>
+    <div className="mt-3">
+      <p className="text-white tracking-wider text-[16px] font-light ">
+        {testimonial}
+      </p>
+    </div>
+  </motion.div>
+);
+
+const Feedbacks = () => {
+  return (
+    <div className={`  rounded-[20px]`}>
+      <div className={`bg-tertiary rounded-2xl  ]`}>
+        <motion.div variants={textVariant()}>
+          <h2
+            className={
+              "text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]"
+            }
+          >
+            Platform Description.
+          </h2>
+        </motion.div>
+      </div>
+      <div
+        className={` pb-14 sm:py-16 grid lg:grid-cols-2 xs:grid-cols-1 gap-7`}
+      >
+        {testimonials.map((testimonial, index) => (
+          <FeedbackCard key={testimonial.name} index={index} {...testimonial} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SectionWrapper(Feedbacks, "platform");
diff --git a/components/landingComponents/Footer/page.jsx b/components/landingComponents/Footer/page.jsx
new file mode 100644
index 0000000..2eee3b3
--- /dev/null
+++ b/components/landingComponents/Footer/page.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import logo2 from "../../../src/assets/logo2.png";
+import Image from "next/image";
+import Link from "next/link";
+
+const Footer = () => {
+  return (
+    <div className="bg-[#060c0a] p-10">
+      <div className="flex  justify-center">
+        <div>
+          <div className="w-full">
+            <Image src={logo2} className="w-[90px] mx-auto" />
+          </div>
+          <p className="mb-0 text-sm text-gray-400  w-full text-center opacity-30 ">
+            © 2024 briz. All rights reserved. | Designed by ♡ <br />
+            Tehran - Iran
+          </p>
+
+          <div className="flex justify-center w-full mt-4 ">
+            <Link href={`/pricing`}>
+              <p className="mb-0  text-gray-400 mx-4">pricing</p>
+            </Link>
+            <Link href={`/#platform`}>
+              <p className="mb-0  text-gray-400 mx-4">platform</p>
+            </Link>
+            <Link href={`/about-us`}>
+              <p className="mb-0  text-gray-400 mx-4">about us</p>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;
diff --git a/components/landingComponents/Hero.jsx b/components/landingComponents/Hero.jsx
new file mode 100644
index 0000000..d2bbf2f
--- /dev/null
+++ b/components/landingComponents/Hero.jsx
@@ -0,0 +1,59 @@
+import { motion } from "framer-motion";
+import Link from "next/link";
+
+const Hero = () => {
+  return (
+    <section className={`relative w-full h-screen mx-auto`}>
+      <div className="flex justify-center lg:pt-[300px] xs:pt-[200px] xs:ml-5 lg:ml-0">
+        {/* <div className="flex flex-col justify-center items-center">
+          <div className="w-5 h-5 rounded-full bg-primary-100" />
+          <div className="w-1 h-[200px] violet-gradient" />
+        </div> */}
+
+        <div className=" ml-1 text-center">
+          <h1
+            className={`font-black text-white lg:text-[200px] sm:text-[160px] xs:text-[140px] text-[40px] mb-0  `}
+          >
+            Briz
+          </h1>
+          <p
+            className={`text-[#dfd9ff] font-medium lg:text-[30px] sm:text-[26px] xs:text-[16px] text-[16px] lg:leading-[40px]  text-white-100  xs:mt-[-50px] lg:mt-[-77px]`}
+          >
+            <small className="text-[30px]">"</small> harmonious Routine
+            Management <small className="text-[30px]">"</small>
+          </p>
+
+          <Link href="/login">
+            <div className="justify-center flex mt-5">
+              <button className="btn btn-primary rounded-full px-20 py-4 ">
+                get start{" "}
+              </button>
+            </div>
+          </Link>
+        </div>
+      </div>
+
+      {/* <ComputersCanvas /> */}
+
+      <div className="absolute xs:bottom-10 bottom-32 w-full flex justify-center items-center">
+        <a href="#about">
+          <div className="w-[35px] h-[64px] rounded-3xl border-4 border-secondary flex justify-center items-start p-2">
+            <motion.div
+              animate={{
+                y: [0, 24, 0],
+              }}
+              transition={{
+                duration: 1.5,
+                repeat: Infinity,
+                repeatType: "loop",
+              }}
+              className="w-3 h-3 rounded-full bg-secondary mb-1"
+            />
+          </div>
+        </a>
+      </div>
+    </section>
+  );
+};
+
+export default Hero;
diff --git a/components/landingComponents/Loader.jsx b/components/landingComponents/Loader.jsx
new file mode 100644
index 0000000..5261585
--- /dev/null
+++ b/components/landingComponents/Loader.jsx
@@ -0,0 +1,31 @@
+import { Html, useProgress } from "@react-three/drei";
+
+const CanvasLoader = () => {
+  const { progress } = useProgress();
+  return (
+    <Html
+      as="div"
+      center
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+      }}
+    >
+      <span className="canvas-loader"></span>
+      <p
+        style={{
+          fontSize: 14,
+          color: "#F1F1F1",
+          fontWeight: 800,
+          marginTop: 40,
+        }}
+      >
+        {progress.toFixed(2)}%
+      </p>
+    </Html>
+  );
+};
+
+export default CanvasLoader;
diff --git a/components/landingComponents/Navbar.jsx b/components/landingComponents/Navbar.jsx
new file mode 100644
index 0000000..2e22314
--- /dev/null
+++ b/components/landingComponents/Navbar.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React, { useEffect, useState } from "react";
+
+import { menu, close } from "src/assets";
+import { styles } from "src/style";
+import { navLinks } from "src/constans";
+import Link from "next/link";
+import logo2 from "../../src/assets/logo2.png";
+import Image from "next/image";
+
+const Navbar = () => {
+  const [active, setActive] = useState("");
+  const [toggle, setToggle] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = window.scrollY;
+      if (scrollTop > 100) {
+        setScrolled(true);
+      } else {
+        setScrolled(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <nav
+      className={`sm:px-16 px-6 w-full flex items-center py-5 fixed top-0 z-20 tr03 ${
+        scrolled ? "bg-primary-300" : "bg-transparent"
+      }`}
+    >
+      <div className="w-full flex justify-between items-center max-w-7xl mx-auto">
+        <div className="flex">
+          <Link
+            href="/"
+            className="flex items-center gap-2"
+            onClick={() => {
+              setActive("");
+              window.scrollTo(0, 0);
+            }}
+          >
+            <Image
+              src={logo2}
+              alt="ldsdogo"
+              className="w-[40px] h-[40px] object-contain "
+            />
+          </Link>
+          <ul className="list-none hidden sm:flex flex-row gap-10 p-3 mx-10">
+            {navLinks.map((nav) => (
+              <li
+                key={nav.id}
+                className={`${
+                  active === nav.title ? "text-white" : "text-white"
+                } hover:text-gray-400 text-[19px] font-medium cursor-pointer tr03`}
+                onClick={() => setActive(nav.title)}
+              >
+                <>
+                  {nav.go ? (
+                    <Link href={`/${nav.id}`}>{nav.title}</Link>
+                  ) : (
+                    <a href={`/#${nav.id}`}>{nav.title}</a>
+                  )}
+                </>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <Link href="/login">
+          <div className="border-[2px] border-primary-100 rounded-full px-10 p-2 xs:hidden lg:block tr03 cursor-pointer hover:bg-primary-300">
+            <p className="mb-0 text-white ">log in</p>
+          </div>
+        </Link>
+
+        <div className="sm:hidden flex flex-1 justify-end items-center">
+          <Image
+            src={toggle ? close : menu}
+            alt="menu"
+            className="w-[28px] h-[28px] object-contain"
+            onClick={() => setToggle(!toggle)}
+          />
+
+          <div
+            className={`${
+              !toggle ? "hidden" : "flex"
+            } p-6 bg-white absolute top-20 right-0 mx-4 my-2 min-w-[140px] z-10 rounded-xl`}
+          >
+            <ul className="list-none flex justify-end items-start flex-1 flex-col gap-4">
+              {navLinks.map((nav) => (
+                <li
+                  key={nav.id}
+                  className={`font-poppins font-medium cursor-pointer text-[16px] ${
+                    active === nav.title ? "text-white" : "text-secondary"
+                  }`}
+                  onClick={() => {
+                    setToggle(!toggle);
+                    setActive(nav.title);
+                  }}
+                >
+                  <>
+                    {nav.go ? (
+                      <Link href={`/${nav.id}`}>{nav.title}</Link>
+                    ) : (
+                      <a href={`/#${nav.id}`}>{nav.title}</a>
+                    )}
+                  </>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/components/landingComponents/PricingHero/page.jsx b/components/landingComponents/PricingHero/page.jsx
new file mode 100644
index 0000000..1fe429b
--- /dev/null
+++ b/components/landingComponents/PricingHero/page.jsx
@@ -0,0 +1,52 @@
+import React from "react";
+
+const PricingHero = () => {
+  return (
+    <div className="min-h-[100vh]">
+      <div className="flex justify-center lg:pt-[150px] xs:pt-[100px] xs:ml-5 lg:ml-0">
+        <div className=" ml-1 ">
+          <h1
+            className={`font-black text-white lg:text-[100px] sm:text-[70px] xs:text-[60px] text-[40px] mb-0  `}
+          >
+            Pricing
+          </h1>
+        </div>
+      </div>
+      <div className="grid lg:flex lg:justify-center xs:px-10 lg:px-[120px] mt-20">
+        <div className="p-5 text-center lg:mx-10">
+          <p className="mb-0  text-white text-[30px] font-thin bg-primary-300 w-fit mx-auto px-4 rounded-full">
+            per Month
+          </p>
+
+          <p className="mb-0 text-[100px] font-bold text-white mt-10">46 €</p>
+        </div>
+
+        <div className="p-5 text-center lg:mx-10">
+          <p className="mb-0  text-white text-[30px] font-thin bg-primary-300 w-fit mx-auto px-4 rounded-full">
+            3 Months
+          </p>
+          <div className="flex justify-center">
+            <del className="mb-0  text-[30px]  text-white  absolute mt-[15px]">
+              138 €
+            </del>
+          </div>
+          <p className="mb-0 text-[100px] font-bold text-white mt-10">110 €</p>
+        </div>
+
+        <div className="p-5 text-center lg:mx-10">
+          <p className="mb-0  text-white text-[30px] font-thin bg-primary-300 w-fit mx-auto px-4 rounded-full">
+            6 Months
+          </p>
+          <div className="flex justify-center">
+            <del className="mb-0  text-[30px]  text-white  absolute mt-[15px]">
+              552 €
+            </del>
+          </div>
+          <p className="mb-0 text-[100px] font-bold text-white mt-10">390 €</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PricingHero;
diff --git a/components/landingComponents/Works.jsx b/components/landingComponents/Works.jsx
new file mode 100644
index 0000000..23425a2
--- /dev/null
+++ b/components/landingComponents/Works.jsx
@@ -0,0 +1,100 @@
+import React from "react";
+import { Tilt } from "react-tilt";
+import { motion } from "framer-motion";
+
+import { github } from "src/assets";
+import { SectionWrapper } from "src/hoc";
+import { fadeIn, textVariant } from "src/utils/motion";
+import { styles } from "src/style";
+import { projects } from "src/constans";
+
+const ProjectCard = ({
+  index,
+  name,
+  description,
+  tags,
+  image,
+  source_code_link,
+}) => {
+  return (
+    <motion.div variants={fadeIn("up", "spring", index * 0.5, 0.75)}>
+      <Tilt
+        options={{
+          max: 45,
+          scale: 1,
+          speed: 450,
+        }}
+        className="bg-tertiary p-5 rounded-2xl sm:w-[360px] w-full"
+      >
+        <div className="relative w-full h-[230px]">
+          <img
+            src={image}
+            alt="project_image"
+            className="w-full h-full object-cover rounded-2xl"
+          />
+
+          <div className="absolute inset-0 flex justify-end m-3 card-img_hover">
+            <div
+              onClick={() => window.open(source_code_link, "_blank")}
+              className="black-gradient w-10 h-10 rounded-full flex justify-center items-center cursor-pointer"
+            >
+              <img
+                src={github}
+                alt="source code"
+                className="w-1/2 h-1/2 object-contain"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-5">
+          <h3 className="text-white font-bold text-[24px]">{name}</h3>
+          <p className="mt-2 text-secondary text-[14px]">{description}</p>
+        </div>
+
+        <div className="mt-4 flex flex-wrap gap-2">
+          {tags.map((tag) => (
+            <p
+              key={`${name}-${tag.name}`}
+              className={`text-[14px] ${tag.color}`}
+            >
+              #{tag.name}
+            </p>
+          ))}
+        </div>
+      </Tilt>
+    </motion.div>
+  );
+};
+
+const Works = () => {
+  return (
+    <>
+      <motion.div variants={textVariant()}>
+        <p className={`${styles.sectionSubText} `}>My work</p>
+        <h2 className={`${styles.sectionHeadText}`}>Projects.</h2>
+      </motion.div>
+
+      <div className="w-full flex">
+        <motion.p
+          variants={fadeIn("", "", 0.1, 1)}
+          className="mt-3 text-secondary text-[17px] max-w-3xl leading-[30px]"
+        >
+          Following projects showcases my skills and experience through
+          real-world examples of my work. Each project is briefly described with
+          links to code repositories and live demos in it. It reflects my
+          ability to solve complex problems, work with different technologies,
+          and manage projects effectively.
+        </motion.p>
+      </div>
+
+      <div className="mt-20 flex flex-wrap gap-7">
+        {projects.map((project, index) => (
+          <ProjectCard key={`project-${index}`} index={index} {...project} />
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default SectionWrapper(Works, "");
diff --git a/components/landingComponents/index.js b/components/landingComponents/index.js
new file mode 100644
index 0000000..bce4863
--- /dev/null
+++ b/components/landingComponents/index.js
@@ -0,0 +1,9 @@
+import Hero from "./Hero";
+import Navbar from "./Navbar";
+import About from "./About";
+import Experience from "./Experience";
+import Works from "./Works";
+import Feedbacks from "./Feedbacks";
+// import Contact from "./Contact";
+
+export { Hero, Navbar, About, Experience, Works, Feedbacks };
diff --git a/package.json b/package.json
index 21fabff..73222f7 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,14 @@
     "react-toastify": "^9.1.3",
     "simple-react-validator": "^1.6.2",
     "swiper": "^10.2.0",
-    "tailwindcss": "3.3.3"
+    "tailwindcss": "3.3.3",
+    "@emailjs/browser": "^3.11.0",
+    "@react-three/drei": "^9.88.11",
+    "@react-three/fiber": "^8.15.9",
+    "maath": "^0.10.4",
+    "react-router-dom": "^6.18.0",
+    "react-tilt": "^1.0.2",
+    "react-vertical-timeline-component": "^3.6.0"
   },
   "devDependencies": {
     "css-loader": "^6.8.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5881b20..286cc88 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,9 +5,18 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@emailjs/browser':
+    specifier: ^3.11.0
+    version: 3.11.0
   '@hassanmojab/react-modern-calendar-datepicker':
     specifier: ^3.1.7
     version: 3.1.7(react-dom@18.2.0)(react@18.2.0)
+  '@react-three/drei':
+    specifier: ^9.88.11
+    version: 9.88.11(@react-three/fiber@8.15.9)(@types/three@0.160.0)(react-dom@18.2.0)(react@18.2.0)(three@0.158.0)
+  '@react-three/fiber':
+    specifier: ^8.15.9
+    version: 8.15.9(react-dom@18.2.0)(react@18.2.0)(three@0.158.0)
   '@uidotdev/usehooks':
     specifier: ^2.4.0
     version: 2.4.0(react-dom@18.2.0)(react@18.2.0)
@@ -35,6 +44,9 @@ dependencies:
   lodash:
     specifier: ^4.17.21
     version: 4.17.21
+  maath:
+    specifier: ^0.10.4
+    version: 0.10.4(@types/three@0.160.0)(three@0.158.0)
   next:
     specifier: 13.4.19
     version: 13.4.19(react-dom@18.2.0)(react@18.2.0)
@@ -59,12 +71,21 @@ dependencies:
   react-modern-calendar-datepicker:
     specifier: ^3.1.6
     version: 3.1.6(react-dom@18.2.0)(react@18.2.0)
+  react-router-dom:
+    specifier: ^6.18.0
+    version: 6.18.0(react-dom@18.2.0)(react@18.2.0)
   react-spring-bottom-sheet:
     specifier: ^3.4.1
-    version: 3.4.1(react-dom@18.2.0)(react@18.2.0)
+    version: 3.4.1(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0)
+  react-tilt:
+    specifier: ^1.0.2
+    version: 1.0.2(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0)
   react-toastify:
     specifier: ^9.1.3
     version: 9.1.3(react-dom@18.2.0)(react@18.2.0)
+  react-vertical-timeline-component:
+    specifier: ^3.6.0
+    version: 3.6.0(react@18.2.0)
   simple-react-validator:
     specifier: ^1.6.2
     version: 1.6.2
@@ -74,6 +95,9 @@ dependencies:
   tailwindcss:
     specifier: 3.3.3
     version: 3.3.3
+  three:
+    specifier: ^0.158.0
+    version: 0.158.0
 
 devDependencies:
   css-loader:
@@ -97,6 +121,11 @@ packages:
       regenerator-runtime: 0.14.0
     dev: false
 
+  /@emailjs/browser@3.11.0:
+    resolution: {integrity: sha512-RkY3FKZ3fPdK++OeF46mRTFpmmQWCHUVHZH209P3NE4D5sg2Atg7S2wa3gw5062Gl4clt4Wn5SyC4WhlVZC5pA==}
+    engines: {node: '>=14.0.0'}
+    dev: false
+
   /@emotion/is-prop-valid@0.8.8:
     resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
     requiresBuild: true
@@ -162,6 +191,10 @@ packages:
     resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==}
     dev: false
 
+  /@mediapipe/tasks-vision@0.10.2:
+    resolution: {integrity: sha512-d8Q9uRK89ZRWmED2JLI9/blpJcfdbh0iEUuMo8TgkMzNfQBY1/GC0FEJWrairTwHkxIf6Oud1vFBP+aHicWqJA==}
+    dev: false
+
   /@next/env@13.4.19:
     resolution: {integrity: sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ==}
     dev: false
@@ -293,12 +326,161 @@ packages:
       warning: 4.0.3
     dev: false
 
+  /@react-spring/animated@9.6.1(react@18.2.0):
+    resolution: {integrity: sha512-ls/rJBrAqiAYozjLo5EPPLLOb1LM0lNVQcXODTC1SMtS6DbuBCPaKco5svFUQFMP2dso3O+qcC4k9FsKc0KxMQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@react-spring/shared': 9.6.1(react@18.2.0)
+      '@react-spring/types': 9.6.1
+      react: 18.2.0
+    dev: false
+
+  /@react-spring/core@9.6.1(react@18.2.0):
+    resolution: {integrity: sha512-3HAAinAyCPessyQNNXe5W0OHzRfa8Yo5P748paPcmMowZ/4sMfaZ2ZB6e5x5khQI8NusOHj8nquoutd6FRY5WQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@react-spring/animated': 9.6.1(react@18.2.0)
+      '@react-spring/rafz': 9.6.1
+      '@react-spring/shared': 9.6.1(react@18.2.0)
+      '@react-spring/types': 9.6.1
+      react: 18.2.0
+    dev: false
+
+  /@react-spring/rafz@9.6.1:
+    resolution: {integrity: sha512-v6qbgNRpztJFFfSE3e2W1Uz+g8KnIBs6SmzCzcVVF61GdGfGOuBrbjIcp+nUz301awVmREKi4eMQb2Ab2gGgyQ==}
+    dev: false
+
+  /@react-spring/shared@9.6.1(react@18.2.0):
+    resolution: {integrity: sha512-PBFBXabxFEuF8enNLkVqMC9h5uLRBo6GQhRMQT/nRTnemVENimgRd+0ZT4yFnAQ0AxWNiJfX3qux+bW2LbG6Bw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@react-spring/rafz': 9.6.1
+      '@react-spring/types': 9.6.1
+      react: 18.2.0
+    dev: false
+
+  /@react-spring/three@9.6.1(@react-three/fiber@8.15.9)(react@18.2.0)(three@0.158.0):
+    resolution: {integrity: sha512-Tyw2YhZPKJAX3t2FcqvpLRb71CyTe1GvT3V+i+xJzfALgpk10uPGdGaQQ5Xrzmok1340DAeg2pR/MCfaW7b8AA==}
+    peerDependencies:
+      '@react-three/fiber': '>=6.0'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      three: '>=0.126'
+    dependencies:
+      '@react-spring/animated': 9.6.1(react@18.2.0)
+      '@react-spring/core': 9.6.1(react@18.2.0)
+      '@react-spring/shared': 9.6.1(react@18.2.0)
+      '@react-spring/types': 9.6.1
+      '@react-three/fiber': 8.15.9(react-dom@18.2.0)(react@18.2.0)(three@0.158.0)
+      react: 18.2.0
+      three: 0.158.0
+    dev: false
+
+  /@react-spring/types@9.6.1:
+    resolution: {integrity: sha512-POu8Mk0hIU3lRXB3bGIGe4VHIwwDsQyoD1F394OK7STTiX9w4dG3cTLljjYswkQN+hDSHRrj4O36kuVa7KPU8Q==}
+    dev: false
+
+  /@react-three/drei@9.88.11(@react-three/fiber@8.15.9)(@types/three@0.160.0)(react-dom@18.2.0)(react@18.2.0)(three@0.158.0):
+    resolution: {integrity: sha512-BEK8t/B0yf4E4iHZ84iD7wAFEazE4gPu2Kywo3UroMAaYg3rA7rOmQh0GOvhTV2+g5/AqS4KJcwOFVnlvBrS5Q==}
+    peerDependencies:
+      '@react-three/fiber': '>=8.0'
+      react: '>=18.0'
+      react-dom: '>=18.0'
+      three: '>=0.137'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.1
+      '@mediapipe/tasks-vision': 0.10.2
+      '@react-spring/three': 9.6.1(@react-three/fiber@8.15.9)(react@18.2.0)(three@0.158.0)
+      '@react-three/fiber': 8.15.9(react-dom@18.2.0)(react@18.2.0)(three@0.158.0)
+      '@use-gesture/react': 10.3.0(react@18.2.0)
+      camera-controls: 2.7.3(three@0.158.0)
+      cross-env: 7.0.3
+      detect-gpu: 5.0.37
+      glsl-noise: 0.0.0
+      lodash.clamp: 4.0.3
+      lodash.omit: 4.5.0
+      lodash.pick: 4.4.0
+      maath: 0.9.0(@types/three@0.160.0)(three@0.158.0)
+      meshline: 3.1.7(three@0.158.0)
+      react: 18.2.0
+      react-composer: 5.0.3(react@18.2.0)
+      react-dom: 18.2.0(react@18.2.0)
+      react-merge-refs: 1.1.0
+      stats-gl: 1.0.7
+      stats.js: 0.17.0
+      suspend-react: 0.1.3(react@18.2.0)
+      three: 0.158.0
+      three-mesh-bvh: 0.6.8(three@0.158.0)
+      three-stdlib: 2.28.11(three@0.158.0)
+      troika-three-text: 0.47.2(three@0.158.0)
+      utility-types: 3.10.0
+      uuid: 9.0.1
+      zustand: 3.7.2(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/three'
+    dev: false
+
+  /@react-three/fiber@8.15.9(react-dom@18.2.0)(react@18.2.0)(three@0.158.0):
+    resolution: {integrity: sha512-uiexE3/Pd2HW138DHUWjVENQa2eLVcin50I6CtfOoPwwjW9dqxGLxEXORhRMr70cpAja9kZ6D2yOxwchq/1zMQ==}
+    peerDependencies:
+      expo: '>=43.0'
+      expo-asset: '>=8.4'
+      expo-file-system: '>=11.0'
+      expo-gl: '>=11.0'
+      react: '>=18.0'
+      react-dom: '>=18.0'
+      react-native: '>=0.64'
+      three: '>=0.133'
+    peerDependenciesMeta:
+      expo:
+        optional: true
+      expo-asset:
+        optional: true
+      expo-file-system:
+        optional: true
+      expo-gl:
+        optional: true
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.1
+      '@types/react-reconciler': 0.26.7
+      '@types/webxr': 0.5.10
+      base64-js: 1.5.1
+      buffer: 6.0.3
+      its-fine: 1.1.1(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-reconciler: 0.27.0(react@18.2.0)
+      react-use-measure: 2.1.1(react-dom@18.2.0)(react@18.2.0)
+      scheduler: 0.21.0
+      suspend-react: 0.1.3(react@18.2.0)
+      three: 0.158.0
+      zustand: 3.7.2(react@18.2.0)
+    dev: false
+
+  /@remix-run/router@1.11.0:
+    resolution: {integrity: sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==}
+    engines: {node: '>=14.0.0'}
+    dev: false
+
   /@swc/helpers@0.5.1:
     resolution: {integrity: sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==}
     dependencies:
       tslib: 2.6.2
     dev: false
 
+  /@types/draco3d@1.4.9:
+    resolution: {integrity: sha512-4MMUjMQb4yA5fJ4osXx+QxGHt0/ZSy4spT6jL1HM7Tn8OJEC35siqdnpOo+HxPhYjqEFumKfGVF9hJfdyKBIBA==}
+    dev: false
+
   /@types/eslint-scope@3.7.6:
     resolution: {integrity: sha512-zfM4ipmxVKWdxtDaJ3MP3pBurDXOCoyjvlpE3u6Qzrmw4BPbfm4/ambIeTk/r/J0iq/+2/xp0Fmt+gFvXJY2PQ==}
     dependencies:
@@ -327,10 +509,65 @@ packages:
       undici-types: 5.25.3
     dev: true
 
+  /@types/offscreencanvas@2019.7.3:
+    resolution: {integrity: sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==}
+    dev: false
+
+  /@types/prop-types@15.7.11:
+    resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
+    dev: false
+
+  /@types/react-dom@18.2.18:
+    resolution: {integrity: sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==}
+    dependencies:
+      '@types/react': 18.2.46
+    dev: false
+
+  /@types/react-reconciler@0.26.7:
+    resolution: {integrity: sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==}
+    dependencies:
+      '@types/react': 18.2.46
+    dev: false
+
+  /@types/react-reconciler@0.28.8:
+    resolution: {integrity: sha512-SN9c4kxXZonFhbX4hJrZy37yw9e7EIxcpHCxQv5JUS18wDE5ovkQKlqQEkufdJCCMfuI9BnjUJvhYeJ9x5Ra7g==}
+    dependencies:
+      '@types/react': 18.2.46
+    dev: false
+
+  /@types/react@18.2.46:
+    resolution: {integrity: sha512-nNCvVBcZlvX4NU1nRRNV/mFl1nNRuTuslAJglQsq+8ldXe5Xv0Wd2f7WTE3jOxhLH2BFfiZGC6GCp+kHQbgG+w==}
+    dependencies:
+      '@types/prop-types': 15.7.11
+      '@types/scheduler': 0.16.8
+      csstype: 3.1.3
+    dev: false
+
+  /@types/scheduler@0.16.8:
+    resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==}
+    dev: false
+
+  /@types/stats.js@0.17.3:
+    resolution: {integrity: sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==}
+    dev: false
+
+  /@types/three@0.160.0:
+    resolution: {integrity: sha512-jWlbUBovicUKaOYxzgkLlhkiEQJkhCVvg4W2IYD2trqD2om3VK4DGLpHH5zQHNr7RweZK/5re/4IVhbhvxbV9w==}
+    dependencies:
+      '@types/stats.js': 0.17.3
+      '@types/webxr': 0.5.10
+      fflate: 0.6.10
+      meshoptimizer: 0.18.1
+    dev: false
+
   /@types/warning@3.0.1:
     resolution: {integrity: sha512-ywJmriP+nvjBKNBEMaNZgj2irZHoxcKeYcyMLbqhYKbDVn8yCIULy2Ol/tvIb37O3IBeZj3RU4tXqQTtGwoAMg==}
     dev: false
 
+  /@types/webxr@0.5.10:
+    resolution: {integrity: sha512-n3u5sqXQJhf1CS68mw3Wf16FQ4cRPNBBwdYLFzq3UddiADOim1Pn3Y6PBdDilz1vOJF3ybLxJ8ZEDlLIzrOQZg==}
+    dev: false
+
   /@uidotdev/usehooks@2.4.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-NrpTsZUGsawYxFbEXrd8+FPpfziC4M01GSQgYWOnGa84UiavqVCzCL5bSRe6rfQc4QsHS2rGAA0h63ya/j+p6A==}
     engines: {node: '>=16'}
@@ -342,6 +579,19 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@use-gesture/core@10.3.0:
+    resolution: {integrity: sha512-rh+6MND31zfHcy9VU3dOZCqGY511lvGcfyJenN4cWZe0u1BH6brBpBddLVXhF2r4BMqWbvxfsbL7D287thJU2A==}
+    dev: false
+
+  /@use-gesture/react@10.3.0(react@18.2.0):
+    resolution: {integrity: sha512-3zc+Ve99z4usVP6l9knYVbVnZgfqhKah7sIG+PS2w+vpig2v2OLct05vs+ZXMzwxdNCMka8B+8WlOo0z6Pn6DA==}
+    peerDependencies:
+      react: '>= 16.8.0'
+    dependencies:
+      '@use-gesture/core': 10.3.0
+      react: 18.2.0
+    dev: false
+
   /@webassemblyjs/ast@1.11.6:
     resolution: {integrity: sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==}
     dependencies:
@@ -448,7 +698,7 @@ packages:
       '@xtuc/long': 4.2.2
     dev: true
 
-  /@xstate/react@1.6.3(react@18.2.0)(xstate@4.38.2):
+  /@xstate/react@1.6.3(@types/react@18.2.46)(react@18.2.0)(xstate@4.38.2):
     resolution: {integrity: sha512-NCUReRHPGvvCvj2yLZUTfR0qVp6+apc8G83oXSjN4rl89ZjyujiKrTff55bze/HrsvCsP/sUJASf2n0nzMF1KQ==}
     peerDependencies:
       '@xstate/fsm': ^1.0.0
@@ -461,7 +711,7 @@ packages:
         optional: true
     dependencies:
       react: 18.2.0
-      use-isomorphic-layout-effect: 1.1.2(react@18.2.0)
+      use-isomorphic-layout-effect: 1.1.2(@types/react@18.2.46)(react@18.2.0)
       use-subscription: 1.8.0(react@18.2.0)
       xstate: 4.38.2
     transitivePeerDependencies:
@@ -580,6 +830,12 @@ packages:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: false
 
+  /bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+    dependencies:
+      require-from-string: 2.0.2
+    dev: false
+
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -636,6 +892,13 @@ packages:
       ieee754: 1.2.1
     dev: false
 
+  /buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: false
+
   /busboy@1.6.0:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
@@ -648,6 +911,14 @@ packages:
     engines: {node: '>= 6'}
     dev: false
 
+  /camera-controls@2.7.3(three@0.158.0):
+    resolution: {integrity: sha512-L4mxjBd3u8qiOLozdWrH2P8ZybSsDXBF7iyNyqNEFJhPUkovmuARWR8JTc1B/qlclOIg6FvZZA/0uAZMMim0mw==}
+    peerDependencies:
+      three: '>=0.126.1'
+    dependencies:
+      three: 0.158.0
+    dev: false
+
   /caniuse-lite@1.0.30001523:
     resolution: {integrity: sha512-I5q5cisATTPZ1mc588Z//pj/Ox80ERYDfR71YnvY7raS/NOk8xXlZcB0sF7JdqaV//kOaa6aus7lRfpdnt1eBA==}
 
@@ -765,6 +1036,23 @@ packages:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
     dev: false
 
+  /cross-env@7.0.3:
+    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
+    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
+    hasBin: true
+    dependencies:
+      cross-spawn: 7.0.3
+    dev: false
+
+  /cross-spawn@7.0.3:
+    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+    engines: {node: '>= 8'}
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+    dev: false
+
   /css-loader@6.8.1(webpack@5.89.0):
     resolution: {integrity: sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==}
     engines: {node: '>= 12.13.0'}
@@ -787,6 +1075,14 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  /csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+    dev: false
+
+  /debounce@1.2.1:
+    resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
+    dev: false
+
   /defaults@1.0.4:
     resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
     dependencies:
@@ -798,6 +1094,12 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: false
 
+  /detect-gpu@5.0.37:
+    resolution: {integrity: sha512-EraWs84faI4iskB4qvE39bevMIazEvd1RpoyGLOBesRLbiz6eMeJqqRPHjEFClfRByYZzi9IzU35rBXIO76oDw==}
+    dependencies:
+      webgl-constants: 1.1.1
+    dev: false
+
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
     dev: false
@@ -806,6 +1108,10 @@ packages:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
     dev: false
 
+  /draco3d@1.5.6:
+    resolution: {integrity: sha512-+3NaRjWktb5r61ZFoDejlykPEFKT5N/LkbXsaddlw6xNSXBanUYpFc2AXXpbJDilPHazcSreU/DpQIaxfX0NfQ==}
+    dev: false
+
   /electron-to-chromium@1.4.503:
     resolution: {integrity: sha512-LF2IQit4B0VrUHFeQkWhZm97KuJSGF2WJqq1InpY+ECpFRkXd8yTIaTtJxsO0OKDmiBYwWqcrNaXOurn2T2wiA==}
 
@@ -898,6 +1204,10 @@ packages:
       reusify: 1.0.4
     dev: false
 
+  /fflate@0.6.10:
+    resolution: {integrity: sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==}
+    dev: false
+
   /figures@3.2.0:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
@@ -1003,6 +1313,10 @@ packages:
       path-is-absolute: 1.0.1
     dev: false
 
+  /glsl-noise@0.0.0:
+    resolution: {integrity: sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==}
+    dev: false
+
   /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
@@ -1114,6 +1428,19 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
+  /isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+    dev: false
+
+  /its-fine@1.1.1(react@18.2.0):
+    resolution: {integrity: sha512-v1Ia1xl20KbuSGlwoaGsW0oxsw8Be+TrXweidxD9oT/1lAh6O3K3/GIM95Tt6WCiv6W+h2M7RB1TwdoAjQyyKw==}
+    peerDependencies:
+      react: '>=18.0'
+    dependencies:
+      '@types/react-reconciler': 0.28.8
+      react: 18.2.0
+    dev: false
+
   /jalaali-js@1.2.6:
     resolution: {integrity: sha512-io974va+Qyu+UfuVX3UIAgJlxLhAMx9Y8VMfh+IG00Js7hXQo1qNQuwSiSa0xxco0SVgx5HWNkaiCcV+aZ8WPw==}
     dev: false
@@ -1167,6 +1494,18 @@ packages:
     engines: {node: '>=6.11.5'}
     dev: true
 
+  /lodash.clamp@4.0.3:
+    resolution: {integrity: sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg==}
+    dev: false
+
+  /lodash.omit@4.5.0:
+    resolution: {integrity: sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==}
+    dev: false
+
+  /lodash.pick@4.4.0:
+    resolution: {integrity: sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==}
+    dev: false
+
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
     dev: false
@@ -1193,6 +1532,26 @@ packages:
       yallist: 4.0.0
     dev: true
 
+  /maath@0.10.4(@types/three@0.160.0)(three@0.158.0):
+    resolution: {integrity: sha512-neHNZ302rFJzXih8r9o1tUfMouO0WKO/as5n1kX72IZvXv5qIRJyWJ2hdXBj/dCZorvnFOBLSkY8SdPmjfeXLw==}
+    peerDependencies:
+      '@types/three': '>=0.144.0'
+      three: '>=0.144.0'
+    dependencies:
+      '@types/three': 0.160.0
+      three: 0.158.0
+    dev: false
+
+  /maath@0.9.0(@types/three@0.160.0)(three@0.158.0):
+    resolution: {integrity: sha512-aAR8hoUqPxlsU8VOxkS9y37jhUzdUxM017NpCuxFU1Gk+nMaZASZxymZrV8LRSHzRk/watlbfyNKu6XPUhCFrQ==}
+    peerDependencies:
+      '@types/three': '>=0.144.0'
+      three: '>=0.144.0'
+    dependencies:
+      '@types/three': 0.160.0
+      three: 0.158.0
+    dev: false
+
   /merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
     dev: true
@@ -1202,6 +1561,18 @@ packages:
     engines: {node: '>= 8'}
     dev: false
 
+  /meshline@3.1.7(three@0.158.0):
+    resolution: {integrity: sha512-uf9fPI9wy0Ie0kZjvKuIkf2n7gi3ih0wdTeb/kmSvmzpPyEL5d9lFohg9+JV9VC4sQUBOZDgxu6fnjn57goSHg==}
+    peerDependencies:
+      three: '>=0.137'
+    dependencies:
+      three: 0.158.0
+    dev: false
+
+  /meshoptimizer@0.18.1:
+    resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
+    dev: false
+
   /micromatch@4.0.5:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
@@ -1357,6 +1728,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+    dev: false
+
   /path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
     dev: false
@@ -1496,6 +1872,10 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /potpack@1.0.2:
+    resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==}
+    dev: false
+
   /prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
     dependencies:
@@ -1559,6 +1939,15 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-composer@5.0.3(react@18.2.0):
+    resolution: {integrity: sha512-1uWd07EME6XZvMfapwZmc7NgCZqDemcvicRi3wMJzXsQLvZ3L7fTHVyPy1bZdnWXM4iPjYuNE+uJ41MLKeTtnA==}
+    peerDependencies:
+      react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
   /react-dom@18.2.0(react@18.2.0):
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
@@ -1578,6 +1967,14 @@ packages:
       throttle-debounce: 2.3.0
     dev: false
 
+  /react-intersection-observer@8.34.0(react@18.2.0):
+    resolution: {integrity: sha512-TYKh52Zc0Uptp5/b4N91XydfSGKubEhgZRtcg1rhTKABXijc4Sdr1uTp5lJ8TN27jwUsdXxjHXtHa0kPj704sw==}
+    peerDependencies:
+      react: ^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: false
@@ -1586,6 +1983,10 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: false
 
+  /react-merge-refs@1.1.0:
+    resolution: {integrity: sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==}
+    dev: false
+
   /react-modern-calendar-datepicker@3.1.6(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-lnMqEMj9Wn32/sm119tjCl5lOkq4u9vJE7wggi7hdXV4s8rPdKlH56FVVehlBi0dfYeWQVZ9npY384Zprjn4WA==}
     peerDependencies:
@@ -1597,14 +1998,48 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /react-spring-bottom-sheet@3.4.1(react-dom@18.2.0)(react@18.2.0):
+  /react-reconciler@0.27.0(react@18.2.0):
+    resolution: {integrity: sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==}
+    engines: {node: '>=0.10.0'}
+    peerDependencies:
+      react: ^18.0.0
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.2.0
+      scheduler: 0.21.0
+    dev: false
+
+  /react-router-dom@6.18.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    dependencies:
+      '@remix-run/router': 1.11.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-router: 6.18.0(react@18.2.0)
+    dev: false
+
+  /react-router@6.18.0(react@18.2.0):
+    resolution: {integrity: sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
+    dependencies:
+      '@remix-run/router': 1.11.0
+      react: 18.2.0
+    dev: false
+
+  /react-spring-bottom-sheet@3.4.1(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-yDFqiPMm/fjefjnOe6Q9zxccbCl6HMUKsK5bWgfGHJIj4zmXVKio5d4icQvmOLuwpuCA2pwv4J6nGWS6fUZidQ==}
     peerDependencies:
       react: ^16.14.0 || 17 || 18
     dependencies:
       '@juggle/resize-observer': 3.4.0
       '@reach/portal': 0.13.2(react-dom@18.2.0)(react@18.2.0)
-      '@xstate/react': 1.6.3(react@18.2.0)(xstate@4.38.2)
+      '@xstate/react': 1.6.3(@types/react@18.2.46)(react@18.2.0)(xstate@4.38.2)
       body-scroll-lock: 3.1.5
       focus-trap: 6.9.4
       react: 18.2.0
@@ -1629,6 +2064,20 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /react-tilt@1.0.2(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-21tUUsmuw5id/6NDtKqwYTG4taVnw+BoUwIG6YsgPC9GI6cx4BnBuSqgriQYAYcv3bdGNzecaBL+rvQRAm28bg==}
+    peerDependencies:
+      '@types/react': ^18.0.29
+      '@types/react-dom': ^18.0.11
+      react: ^18.2.0
+      react-dom: ^18.2.0
+    dependencies:
+      '@types/react': 18.2.46
+      '@types/react-dom': 18.2.18
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /react-toastify@9.1.3(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==}
     peerDependencies:
@@ -1649,6 +2098,28 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-use-measure@2.1.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==}
+    peerDependencies:
+      react: '>=16.13'
+      react-dom: '>=16.13'
+    dependencies:
+      debounce: 1.2.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /react-vertical-timeline-component@3.6.0(react@18.2.0):
+    resolution: {integrity: sha512-l9zulqjIGlRuaQeplGzV4r/tG2RYBpYt84Il8w4IxnJze2cDIGI04MKo3F7f1sHT0Sih1ohEFts8UV23AJS15Q==}
+    requiresBuild: true
+    dependencies:
+      classnames: 2.3.2
+      prop-types: 15.8.1
+      react-intersection-observer: 8.34.0(react@18.2.0)
+    transitivePeerDependencies:
+      - react
+    dev: false
+
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -1682,6 +2153,11 @@ packages:
     resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
     dev: false
 
+  /require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /resolve@1.22.4:
     resolution: {integrity: sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==}
     hasBin: true
@@ -1728,6 +2204,12 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: false
 
+  /scheduler@0.21.0:
+    resolution: {integrity: sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /scheduler@0.23.0:
     resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
     dependencies:
@@ -1757,6 +2239,18 @@ packages:
       randombytes: 2.1.0
     dev: true
 
+  /shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+    dependencies:
+      shebang-regex: 3.0.0
+    dev: false
+
+  /shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+    dev: false
+
   /signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
     dev: false
@@ -1781,6 +2275,14 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /stats-gl@1.0.7:
+    resolution: {integrity: sha512-vZI82CjefSxLC1bjw36z28v0+QE9rJKymGlXtfWu+ipW70ZEAwa4EbO4LxluAfLfpqiaAS04NzpYBRLDeAwYWQ==}
+    dev: false
+
+  /stats.js@0.17.0:
+    resolution: {integrity: sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==}
+    dev: false
+
   /streamsearch@1.1.0:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
@@ -1858,6 +2360,14 @@ packages:
     engines: {node: '>= 0.4'}
     dev: false
 
+  /suspend-react@0.1.3(react@18.2.0):
+    resolution: {integrity: sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==}
+    peerDependencies:
+      react: '>=17.0'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /swiper@10.2.0:
     resolution: {integrity: sha512-nktQsOtBInJjr3f5DicxC8eHYGcLXDVIGPSon0QoXRaO6NjKnATCbQ8SZsD3dN1Ph1RH4EhVPwSYCcuDRFWHGQ==}
     engines: {node: '>= 4.7.0'}
@@ -1951,6 +2461,32 @@ packages:
       any-promise: 1.3.0
     dev: false
 
+  /three-mesh-bvh@0.6.8(three@0.158.0):
+    resolution: {integrity: sha512-EGebF9DZx1S8+7OZYNNTT80GXJZVf+UYXD/HyTg/e2kR/ApofIFfUS4ZzIHNnUVIadpnLSzM4n96wX+l7GMbnQ==}
+    peerDependencies:
+      three: '>= 0.151.0'
+    dependencies:
+      three: 0.158.0
+    dev: false
+
+  /three-stdlib@2.28.11(three@0.158.0):
+    resolution: {integrity: sha512-2zo5+N2pe91Y88F+pTDTgQYNnV7pTixF93GQis2TS/fGeOf2Qlw0aKhJbzvSq7w8YkhpKL8f1v3L95JImxCltQ==}
+    peerDependencies:
+      three: '>=0.128.0'
+    dependencies:
+      '@types/draco3d': 1.4.9
+      '@types/offscreencanvas': 2019.7.3
+      '@types/webxr': 0.5.10
+      draco3d: 1.5.6
+      fflate: 0.6.10
+      potpack: 1.0.2
+      three: 0.158.0
+    dev: false
+
+  /three@0.158.0:
+    resolution: {integrity: sha512-TALj4EOpdDPF1henk2Q+s17K61uEAAWQ7TJB68nr7FKxqwyDr3msOt5IWdbGm4TaWKjrtWS8DJJWe9JnvsWOhQ==}
+    dev: false
+
   /throttle-debounce@2.3.0:
     resolution: {integrity: sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==}
     engines: {node: '>=8'}
@@ -1974,6 +2510,30 @@ packages:
       is-number: 7.0.0
     dev: false
 
+  /troika-three-text@0.47.2(three@0.158.0):
+    resolution: {integrity: sha512-qylT0F+U7xGs+/PEf3ujBdJMYWbn0Qci0kLqI5BJG2kW1wdg4T1XSxneypnF05DxFqJhEzuaOR9S2SjiyknMng==}
+    peerDependencies:
+      three: '>=0.125.0'
+    dependencies:
+      bidi-js: 1.0.3
+      three: 0.158.0
+      troika-three-utils: 0.47.2(three@0.158.0)
+      troika-worker-utils: 0.47.2
+      webgl-sdf-generator: 1.1.1
+    dev: false
+
+  /troika-three-utils@0.47.2(three@0.158.0):
+    resolution: {integrity: sha512-/28plhCxfKtH7MSxEGx8e3b/OXU5A0xlwl+Sbdp0H8FXUHKZDoksduEKmjQayXYtxAyuUiCRunYIv/8Vi7aiyg==}
+    peerDependencies:
+      three: '>=0.125.0'
+    dependencies:
+      three: 0.158.0
+    dev: false
+
+  /troika-worker-utils@0.47.2:
+    resolution: {integrity: sha512-mzss4MeyzUkYBppn4x5cdAqrhBHFEuVmMMgLMTyFV23x6GvQMyo+/R5E5Lsbrt7WSt5RfvewjcwD1DChRTA9lA==}
+    dev: false
+
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: false
@@ -2007,7 +2567,7 @@ packages:
       punycode: 2.3.0
     dev: true
 
-  /use-isomorphic-layout-effect@1.1.2(react@18.2.0):
+  /use-isomorphic-layout-effect@1.1.2(@types/react@18.2.46)(react@18.2.0):
     resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
     peerDependencies:
       '@types/react': '*'
@@ -2016,6 +2576,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
+      '@types/react': 18.2.46
       react: 18.2.0
     dev: false
 
@@ -2039,6 +2600,16 @@ packages:
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  /utility-types@3.10.0:
+    resolution: {integrity: sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==}
+    engines: {node: '>= 4'}
+    dev: false
+
+  /uuid@9.0.1:
+    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+    hasBin: true
+    dev: false
+
   /warning@4.0.3:
     resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
     dependencies:
@@ -2058,6 +2629,14 @@ packages:
       defaults: 1.0.4
     dev: false
 
+  /webgl-constants@1.1.1:
+    resolution: {integrity: sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg==}
+    dev: false
+
+  /webgl-sdf-generator@1.1.1:
+    resolution: {integrity: sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==}
+    dev: false
+
   /webpack-sources@3.2.3:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
     engines: {node: '>=10.13.0'}
@@ -2103,6 +2682,14 @@ packages:
       - uglify-js
     dev: true
 
+  /which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+    dependencies:
+      isexe: 2.0.0
+    dev: false
+
   /wrap-ansi@6.2.0:
     resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
     engines: {node: '>=8'}
@@ -2132,3 +2719,15 @@ packages:
   /zod@3.21.4:
     resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
     dev: false
+
+  /zustand@3.7.2(react@18.2.0):
+    resolution: {integrity: sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      react: '>=16.8'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      react: 18.2.0
+    dev: false
diff --git a/public/images/bg.png b/public/images/bg.png
new file mode 100644
index 0000000..fca2a8b
Binary files /dev/null and b/public/images/bg.png differ
diff --git a/public/images/ig.png b/public/images/ig.png
new file mode 100644
index 0000000..f8eba56
Binary files /dev/null and b/public/images/ig.png differ
diff --git a/public/images/int1.jpg b/public/images/int1.jpg
new file mode 100644
index 0000000..d81c37f
Binary files /dev/null and b/public/images/int1.jpg differ
diff --git a/public/images/int2.jpg b/public/images/int2.jpg
new file mode 100644
index 0000000..656c76c
Binary files /dev/null and b/public/images/int2.jpg differ
diff --git a/public/images/int3.jpg b/public/images/int3.jpg
new file mode 100644
index 0000000..3f54102
Binary files /dev/null and b/public/images/int3.jpg differ
diff --git a/public/images/int4.jpg b/public/images/int4.jpg
new file mode 100644
index 0000000..8f73a6c
Binary files /dev/null and b/public/images/int4.jpg differ
diff --git a/public/images/logo2.png b/public/images/logo2.png
new file mode 100644
index 0000000..9b59021
Binary files /dev/null and b/public/images/logo2.png differ
diff --git a/public/images/tuk.png b/public/images/tuk.png
new file mode 100644
index 0000000..f8560bf
Binary files /dev/null and b/public/images/tuk.png differ
diff --git a/src/app/about-us/page.jsx b/src/app/about-us/page.jsx
new file mode 100644
index 0000000..5eb9b02
--- /dev/null
+++ b/src/app/about-us/page.jsx
@@ -0,0 +1,83 @@
+"use client";
+import Navbar from "@comp/landingComponents/Navbar";
+import Footer from "@comp/landingComponents/Footer/page";
+import React from "react";
+import AboutUsHero from "@comp/landingComponents/AboutUsHero/page";
+
+import ig from "../../../public/images/ig.png";
+import tuk from "../../../public/images/tuk.png";
+import Image from "next/image";
+
+const AboutUs = () => {
+  return (
+    <div className="relative z-0 bg-black">
+      <div className="bg-hero-pattern bg-cover bg-no-repeat bg-center">
+        <Navbar />
+        <AboutUsHero />
+      </div>
+      <div className="xs:px-[10px] lg:px-[120px] my-20">
+        <p className="mb-0 sm:text-[18px] text-[14px] text-secondary  tracking-wider text-gray-300 font-thin">
+          At Briz, we envision each coffee shop as a symphony, with every
+          element from the espresso shot to the customer service playing in
+          perfect harmony. Our journey began with the coming together of two
+          innovative startups: 'Tuk Coffee,' a renowned delivery platform for
+          brewed coffee with physical branches, and 'Igarson,' an accounting
+          application tailored for coffee shops and restaurants. Our combined
+          experience and passion for coffee shop excellence are the foundation
+          of Briz.
+        </p>
+        <h2 className="text-white font-semibold md:text-[20px] sm:text-[18px] xs:text-[14px] text-[18px] mt-4">
+          Our Team's Heritage
+        </h2>
+        <p className="mb-0 sm:text-[18px] text-[14px] text-secondary  tracking-wider text-gray-300 font-thin">
+          Our team consists of six dedicated members, each bringing a unique
+          blend of expertise and innovation from our roots in 'Tuk Coffee' and
+          'Igarson.' We are baristas, managers, tech enthusiasts, and, above
+          all, coffee lovers. Together, we've seen the challenges and triumphs
+          of running coffee shops, and it's this rich experience that fuels our
+          commitment to making Briz the ace of your coffee shop orchestr
+        </p>
+
+        <h2 className="text-white font-semibold md:text-[20px] sm:text-[18px] xs:text-[14px] text-[18px] mt-4">
+          Our Team's Heritage
+        </h2>
+
+        <p className="mb-0 sm:text-[18px] text-[14px] text-secondary  tracking-wider text-gray-300 font-thin">
+          We believe in the power of an efficiently managed coffee shop - where
+          every task, every role, and every shift contributes to the delightful
+          crescendo of customer satisfaction. Briz is not just an app; it's your
+          partner in achieving this efficiency. It's the conductor's baton that
+          helps you lead your coffee shop's symphony to play more harmoniously
+          than ever before. With Briz, you're not just managing; you're
+          performing.
+        </p>
+
+        <h2 className="text-white font-semibold md:text-[20px] sm:text-[18px] xs:text-[14px] text-[18px] mt-4">
+          Our Commitment to Your Coffee Shop{" "}
+        </h2>
+
+        <p className="mb-0 sm:text-[18px] text-[14px] text-secondary  tracking-wider text-gray-300 font-thin">
+          Our mission is simple yet ambitious: to empower coffee shops to manage
+          their spaces with unprecedented efficiency and insight. Whether it's
+          the bustling rush of the morning crowd or the relaxed ambiance of late
+          evenings, Briz is there to ensure that every note of your coffee
+          shop's day is pitch-perfect. Join us in redefining what it means to
+          run a coffee shop, and let's make every cup of coffee an experience to
+          remember.
+        </p>
+        <div className="flex justify-end my-10 ">
+          <div>
+            <Image src={ig} className="w-[120px]" />
+          </div>
+          <div className="mt-3">
+            <Image src={tuk} className="w-[100px]" />
+          </div>
+        </div>
+      </div>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default AboutUs;
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
index d0dd647..3a18bba 100644
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@@ -147,7 +147,7 @@ export default function RootLayout({ children }) {
 
   const pathname = usePathname();
   const router = useRouter();
-  const hiddenUrls = ["/login", "/"];
+  const hiddenUrls = ["/login", "/pricing", "/about-us", "/"];
   const shouldRenderComponent = !hiddenUrls.includes(pathname);
 
   const closeBigPlusPage = () => {
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 44a3090..9b163c0 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -1,17 +1,14 @@
 "use client";
 
-import Image from "next/image";
-import { motion } from "framer-motion";
-
-import cloud1 from "../../public/images/cloud1.png";
-import cloud2 from "../../public/images/cloud2.png";
-import cloud3 from "../../public/images/cloud3.png";
-import core from "../../public/images/core.png";
+import {
+  About,
+  Experience,
+  Feedbacks,
+  Hero,
+  Navbar,
+} from "@comp/landingComponents";
+import Footer from "@comp/landingComponents/Footer/page";
 import { useEffect, useState } from "react";
-import PersianNumber from "../../plugins/PersianNumber";
-import UnderDevelopeTimer from "../../components/UnderDevelopeTimer";
-import { version } from "../../package.json";
-import Link from "next/link";
 
 export default function Home() {
   const [state, setstate] = useState(false);
@@ -21,65 +18,17 @@ export default function Home() {
   }, []);
 
   return (
-    <div className="h-[100vh] overflow-hidden relative bg-info-100">
-      <div className="flex justify-center">
-        <div
-          className={`relative z-50 ${
-            state ? " top-[-200px]" : "top-[-650px]"
-          }  tr2`}
-        >
-          <div className="w-[200px]">
-            <motion.div
-              animate={{ y: [30, 0, 30] }}
-              transition={{ repeat: Infinity, duration: 15 }}
-            >
-              <Image src={core} alt="" className="w-full" />
-            </motion.div>{" "}
-          </div>
-        </div>
+    <div className="relative z-0 bg-black">
+      <div className="bg-hero-pattern bg-cover bg-no-repeat bg-center">
+        <Navbar />
+        <Hero />
       </div>
-      <div className="flex justify-center">
-        <div className="w-[250px] absolute top-[50px] z-0">
-          <motion.div
-            animate={{ x: [60, 0, 60] }}
-            transition={{ repeat: Infinity, duration: 50 }}
-          >
-            <Image src={cloud1} alt="" className="w-full" />
-          </motion.div>
-        </div>
+      <About />
+      <Experience />
 
-        <div className="w-[250px] absolute top-[120px]  mr-[150px] z-0">
-          <motion.div
-            animate={{ x: [-60, 0, -60] }}
-            transition={{ repeat: Infinity, duration: 50 }}
-          >
-            <Image src={cloud2} alt="" className="w-full" />
-          </motion.div>{" "}
-        </div>
+      <Feedbacks />
 
-        <div className="w-[250px] absolute top-[170px] ml-[200px] z-0">
-          <motion.div
-            animate={{ x: [60, 0, 60] }}
-            transition={{ repeat: Infinity, duration: 50 }}
-          >
-            <Image src={cloud3} alt="" className="w-full" />
-          </motion.div>{" "}
-        </div>
-      </div>
-      <motion.div animate={{ y: [0, -130] }} transition={{ duration: 3 }}>
-        <div className="text-center">
-          <h3 className="font-bold text-2xl text-gray-700 rtl text-white">
-            تا اینجا ورژن <br />
-            {"  "}
-          </h3>
-
-          <Link href={"/login"}>
-            <p className="mb-0 mt-5 text-white ">
-              <PersianNumber number={version} style="text-[40px] font-bold" />
-            </p>
-          </Link>
-        </div>
-      </motion.div>
+      <Footer />
     </div>
   );
 }
diff --git a/src/app/pricing/page.jsx b/src/app/pricing/page.jsx
new file mode 100644
index 0000000..39b6b70
--- /dev/null
+++ b/src/app/pricing/page.jsx
@@ -0,0 +1,20 @@
+"use client";
+import Navbar from "@comp/landingComponents/Navbar";
+import Footer from "@comp/landingComponents/Footer/page";
+import React from "react";
+import PricingHero from "@comp/landingComponents/PricingHero/page";
+
+const Pricing = () => {
+  return (
+    <div className="relative z-0 bg-black">
+      <div className="bg-hero-pattern bg-cover bg-no-repeat bg-center">
+        <Navbar />
+        <PricingHero />
+      </div>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default Pricing;
diff --git a/src/assets/backend.png b/src/assets/backend.png
new file mode 100644
index 0000000..b2edd57
Binary files /dev/null and b/src/assets/backend.png differ
diff --git a/src/assets/carrent.png b/src/assets/carrent.png
new file mode 100644
index 0000000..8140354
Binary files /dev/null and b/src/assets/carrent.png differ
diff --git a/src/assets/close.svg b/src/assets/close.svg
new file mode 100644
index 0000000..81e97e0
--- /dev/null
+++ b/src/assets/close.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="#FFF" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4099 9L16.7099 2.71C16.8982 2.5217 17.004 2.2663 17.004 2C17.004 1.7337 16.8982 1.47831 16.7099 1.29C16.5216 1.1017 16.2662 0.995911 15.9999 0.995911C15.7336 0.995911 15.4782 1.1017 15.2899 1.29L8.99994 7.59L2.70994 1.29C2.52164 1.1017 2.26624 0.995911 1.99994 0.995911C1.73364 0.995911 1.47824 1.1017 1.28994 1.29C1.10164 1.47831 0.995847 1.7337 0.995847 2C0.995847 2.2663 1.10164 2.5217 1.28994 2.71L7.58994 9L1.28994 15.29C1.19621 15.383 1.12182 15.4936 1.07105 15.6154C1.02028 15.7373 0.994141 15.868 0.994141 16C0.994141 16.132 1.02028 16.2627 1.07105 16.3846C1.12182 16.5064 1.19621 16.617 1.28994 16.71C1.3829 16.8037 1.4935 16.8781 1.61536 16.9289C1.73722 16.9797 1.86793 17.0058 1.99994 17.0058C2.13195 17.0058 2.26266 16.9797 2.38452 16.9289C2.50638 16.8781 2.61698 16.8037 2.70994 16.71L8.99994 10.41L15.2899 16.71C15.3829 16.8037 15.4935 16.8781 15.6154 16.9289C15.7372 16.9797 15.8679 17.0058 15.9999 17.0058C16.132 17.0058 16.2627 16.9797 16.3845 16.9289C16.5064 16.8781 16.617 16.8037 16.7099 16.71C16.8037 16.617 16.8781 16.5064 16.9288 16.3846C16.9796 16.2627 17.0057 16.132 17.0057 16C17.0057 15.868 16.9796 15.7373 16.9288 15.6154C16.8781 15.4936 16.8037 15.383 16.7099 15.29L10.4099 9Z" fill="#FFFFFF"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/company/meta.png b/src/assets/company/meta.png
new file mode 100644
index 0000000..d0ceea5
Binary files /dev/null and b/src/assets/company/meta.png differ
diff --git a/src/assets/company/shopify.png b/src/assets/company/shopify.png
new file mode 100644
index 0000000..bba215c
Binary files /dev/null and b/src/assets/company/shopify.png differ
diff --git a/src/assets/company/starbucks.png b/src/assets/company/starbucks.png
new file mode 100644
index 0000000..76cf307
Binary files /dev/null and b/src/assets/company/starbucks.png differ
diff --git a/src/assets/company/tesla.png b/src/assets/company/tesla.png
new file mode 100644
index 0000000..8eca730
Binary files /dev/null and b/src/assets/company/tesla.png differ
diff --git a/src/assets/creator.png b/src/assets/creator.png
new file mode 100644
index 0000000..fa17ad2
Binary files /dev/null and b/src/assets/creator.png differ
diff --git a/src/assets/github.png b/src/assets/github.png
new file mode 100644
index 0000000..a735a32
Binary files /dev/null and b/src/assets/github.png differ
diff --git a/src/assets/herobg.png b/src/assets/herobg.png
new file mode 100644
index 0000000..9d0a41b
Binary files /dev/null and b/src/assets/herobg.png differ
diff --git a/src/assets/index.js b/src/assets/index.js
new file mode 100644
index 0000000..613116b
--- /dev/null
+++ b/src/assets/index.js
@@ -0,0 +1,62 @@
+import logo from "./logo.svg";
+import backend from "./backend.png";
+import creator from "./creator.png";
+import mobile from "./mobile.png";
+import web from "./web.png";
+import github from "./github.png";
+import menu from "./menu.svg";
+import close from "./close.svg";
+
+import css from "./tech/css.png";
+import docker from "./tech/docker.png";
+import figma from "./tech/figma.png";
+import git from "./tech/git.png";
+import html from "./tech/html.png";
+import javascript from "./tech/javascript.png";
+import mongodb from "./tech/mongodb.png";
+import nodejs from "./tech/nodejs.png";
+import reactjs from "./tech/reactjs.png";
+import redux from "./tech/redux.png";
+import tailwind from "./tech/tailwind.png";
+import typescript from "./tech/typescript.png";
+import threejs from "./tech/threejs.svg";
+
+import meta from "./company/meta.png";
+import shopify from "./company/shopify.png";
+import starbucks from "./company/starbucks.png";
+import tesla from "./company/tesla.png";
+
+import carrent from "./carrent.png";
+import jobit from "./jobit.png";
+import tripguide from "./tripguide.png";
+
+export {
+  logo,
+  backend,
+  creator,
+  mobile,
+  web,
+  github,
+  menu,
+  close,
+  css,
+  docker,
+  figma,
+  git,
+  html,
+  javascript,
+  mongodb,
+  nodejs,
+  reactjs,
+  redux,
+  tailwind,
+  typescript,
+  threejs,
+  meta,
+  shopify,
+  starbucks,
+  tesla,
+  carrent,
+  jobit,
+  tripguide,
+};
diff --git a/src/assets/jobit.png b/src/assets/jobit.png
new file mode 100644
index 0000000..bb53f4b
Binary files /dev/null and b/src/assets/jobit.png differ
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
new file mode 100644
index 0000000..672520e
--- /dev/null
+++ b/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1080"><defs><style>.cls-1{fill:none;}.cls-2{fill:#9bd19d;}</style></defs><polygon class="cls-1" points="82.37 697.27 155.95 688.28 155.95 683.12 82.37 679.66 82.37 697.27"/><polygon class="cls-1" points="87.22 640.38 155.95 635.24 155.95 626.84 80.02 627.02 87.22 640.38"/><polygon class="cls-1" points="313.56 626.84 236.18 627.02 243.39 640.38 313.56 635.32 313.56 626.84"/><path d="M281.7,511.87a13.66,13.66,0,0,1,0,15,13.72,13.72,0,1,0,0-15Z"/><circle cx="512.53" cy="519.4" r="13.72"/><path d="M281.7,511.87a13.73,13.73,0,1,0,0,15,13.66,13.66,0,0,1,0-15Z"/><path d="M281.7,511.87a13.66,13.66,0,0,0,0,15,13.66,13.66,0,0,0,0-15Z"/><path d="M73.63,368.44a13.72,13.72,0,1,0-13.72-13.72A13.72,13.72,0,0,0,73.63,368.44Z"/><polygon points="128.51 409.63 275.87 409.63 306.88 409.63 375.48 341 299.58 341 128.51 341 59.91 409.63 59.91 533.12 128.51 533.12 128.51 409.63"/><path class="cls-2" d="M567.57,313.59V766.36h452.8V313.59ZM803,626.54a27.87,27.87,0,1,1,27.87-27.87A27.86,27.86,0,0,1,803,626.54Zm141.76-88.86L643.22,573.8V506.15l301.53,14.91Zm0-53.31L670.89,504.16l-27.67-51.32H944.75Z"/><path d="M59.91,574.28V738.92H183.4v-71l-76.83-8.86v-4.33l76.83-4.14V588l-13.73-13.72Zm96,108.84v5.16l-73.58,9V679.66Zm0-47.88-68.73,5.14L80,627l75.93-.18Z"/><polygon points="512.68 574.28 402.92 574.28 402.92 624.52 485.31 628.77 485.31 633.11 402.92 642.88 402.92 644.18 402.92 663.91 402.92 738.92 526.38 738.92 526.38 696.81 451.69 687.87 451.69 683.54 526.38 679.85 526.4 663.27 526.38 653.36 526.4 588 512.68 574.28"/><polygon points="348.04 574.28 348.02 626.84 382.34 626.87 382.16 574.28 348.04 574.28"/><path d="M255,654.73l72.24-3.9V588l-13.72-13.72-104.44,0H203.8V739.14h14.67v-.22h45.71l2.74-55.38h4.33l6.63,55.38h49.4V667.4L255,659.06ZM236.18,627l77.38-.18v8.47l-70.17,5.07Z"/><polygon points="348.02 658.88 348.02 672.13 348.04 738.92 382.34 738.92 382.34 643.11 348.04 645.44 348.02 658.88"/><path d="M803,570.81a27.87,27.87,0,1,0,27.87,27.86A27.86,27.86,0,0,0,803,570.81Z"/><polygon points="670.89 504.15 944.75 484.37 944.75 452.84 643.22 452.84 670.89 504.15"/><polygon points="643.22 573.8 944.75 537.68 944.75 521.06 643.22 506.15 643.22 573.8"/><polygon points="526.22 341 402.92 341 334.31 409.63 334.31 533.12 402.73 533.12 402.92 533.12 402.92 409.63 402.92 409.63 526.4 409.63 526.4 341.16 526.22 341.16 526.22 341"/><rect x="59.91" y="550.27" width="466.34" height="6.86"/></svg>
\ No newline at end of file
diff --git a/src/assets/logo2.png b/src/assets/logo2.png
new file mode 100644
index 0000000..2281557
Binary files /dev/null and b/src/assets/logo2.png differ
diff --git a/src/assets/menu.svg b/src/assets/menu.svg
new file mode 100644
index 0000000..318d5ef
--- /dev/null
+++ b/src/assets/menu.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="12" viewBox="0 0 20 12" fill="#FFF" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 2L19 2C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.480429 19.7071 0.292892C19.5196 0.105356 19.2652 0 19 0L9 0C8.73478 0 8.48043 0.105356 8.29289 0.292892C8.10536 0.480429 8 0.734784 8 1C8 1.26522 8.10536 1.51957 8.29289 1.70711C8.48043 1.89464 8.73478 2 9 2ZM19 10L1 10C0.734784 10 0.480429 10.1054 0.292892 10.2929C0.105356 10.4804 0 10.7348 0 11C0 11.2652 0.105356 11.5196 0.292892 11.7071C0.480429 11.8946 0.734784 12 1 12L19 12C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10V10ZM1 7L19 7C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5L1 5C0.734784 5 0.480429 5.10536 0.292892 5.29289C0.105356 5.48043 0 5.73478 0 6C0 6.26522 0.105356 6.51957 0.292892 6.70711C0.480429 6.89464 0.734784 7 1 7Z" fill="#FFFFFF"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/mobile.png b/src/assets/mobile.png
new file mode 100644
index 0000000..27a2b37
Binary files /dev/null and b/src/assets/mobile.png differ
diff --git a/src/assets/tech/css.png b/src/assets/tech/css.png
new file mode 100644
index 0000000..677d59c
Binary files /dev/null and b/src/assets/tech/css.png differ
diff --git a/src/assets/tech/docker.png b/src/assets/tech/docker.png
new file mode 100644
index 0000000..c349344
Binary files /dev/null and b/src/assets/tech/docker.png differ
diff --git a/src/assets/tech/figma.png b/src/assets/tech/figma.png
new file mode 100644
index 0000000..c9f3a61
Binary files /dev/null and b/src/assets/tech/figma.png differ
diff --git a/src/assets/tech/git.png b/src/assets/tech/git.png
new file mode 100644
index 0000000..493c150
Binary files /dev/null and b/src/assets/tech/git.png differ
diff --git a/src/assets/tech/html.png b/src/assets/tech/html.png
new file mode 100644
index 0000000..9a67c31
Binary files /dev/null and b/src/assets/tech/html.png differ
diff --git a/src/assets/tech/javascript.png b/src/assets/tech/javascript.png
new file mode 100644
index 0000000..e7448b5
Binary files /dev/null and b/src/assets/tech/javascript.png differ
diff --git a/src/assets/tech/mongodb.png b/src/assets/tech/mongodb.png
new file mode 100644
index 0000000..c892f59
Binary files /dev/null and b/src/assets/tech/mongodb.png differ
diff --git a/src/assets/tech/nodejs.png b/src/assets/tech/nodejs.png
new file mode 100644
index 0000000..b81a2ce
Binary files /dev/null and b/src/assets/tech/nodejs.png differ
diff --git a/src/assets/tech/reactjs.png b/src/assets/tech/reactjs.png
new file mode 100644
index 0000000..a49beb5
Binary files /dev/null and b/src/assets/tech/reactjs.png differ
diff --git a/src/assets/tech/redux.png b/src/assets/tech/redux.png
new file mode 100644
index 0000000..feecfee
Binary files /dev/null and b/src/assets/tech/redux.png differ
diff --git a/src/assets/tech/tailwind.png b/src/assets/tech/tailwind.png
new file mode 100644
index 0000000..ed3981f
Binary files /dev/null and b/src/assets/tech/tailwind.png differ
diff --git a/src/assets/tech/threejs.svg b/src/assets/tech/threejs.svg
new file mode 100644
index 0000000..b6a8dc8
--- /dev/null
+++ b/src/assets/tech/threejs.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg fill="none" stroke-linecap="square" stroke-miterlimit="10" version="1.1" viewBox="0 0 226.77 226.77" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(8.964 4.2527)" fill-rule="evenodd" stroke="#000" stroke-linecap="butt" stroke-linejoin="round" stroke-width="4">
+  <path d="m63.02 200.61-43.213-174.94 173.23 49.874z"/>
+  <path d="m106.39 50.612 21.591 87.496-86.567-24.945z"/>
+  <path d="m84.91 125.03-10.724-43.465 43.008 12.346z"/>
+  <path d="m63.458 38.153 10.724 43.465-43.008-12.346z"/>
+  <path d="m149.47 62.93 10.724 43.465-43.008-12.346z"/>
+  <path d="m84.915 125.06 10.724 43.465-43.008-12.346z"/>
+ </g>
+</svg>
diff --git a/src/assets/tech/typescript.png b/src/assets/tech/typescript.png
new file mode 100644
index 0000000..695b00c
Binary files /dev/null and b/src/assets/tech/typescript.png differ
diff --git a/src/assets/tripguide.png b/src/assets/tripguide.png
new file mode 100644
index 0000000..ba3469a
Binary files /dev/null and b/src/assets/tripguide.png differ
diff --git a/src/assets/web.png b/src/assets/web.png
new file mode 100644
index 0000000..c29cbd0
Binary files /dev/null and b/src/assets/web.png differ
diff --git a/src/constans/index.js b/src/constans/index.js
new file mode 100644
index 0000000..b841f82
--- /dev/null
+++ b/src/constans/index.js
@@ -0,0 +1,107 @@
+export const navLinks = [
+  {
+    id: "platform",
+    title: "platform",
+    go: false,
+  },
+  {
+    id: "pricing",
+    title: "pricing",
+    go: true,
+  },
+  {
+    id: "about-us",
+    title: "about us",
+    go: true,
+  },
+];
+
+const services = [
+  {
+    title: "Streamlined Operations",
+  },
+  {
+    title: "Empowered Decision ",
+  },
+  {
+    title: "Unwavering Support ",
+  },
+  {
+    title: "Seamless Integration",
+  },
+];
+
+const experiences = [
+  {
+    title: "setup routine Modes",
+    date: "step 1",
+    points: [
+      "Begin your journey with Briz by customizing Collection Routines to suit your unique business needs. Whether it's for the bustling holiday season, a reflective Ramadan, or your standard daily operations, simply activate the desired mode. Save various modes to maintain a recorded task list for each routine, ensuring a streamlined and efficient approach to every aspect of your business.",
+    ],
+  },
+  {
+    title: "setup each section",
+    date: "step 2",
+    points: [
+      "Continue shaping your unique coffee shop experience by defining each distinct area within your establishment with Briz. Set up sections like the bar, kitchen, and seating area in our system. This process not only helps in organizing physical spaces but also assists in assigning tasks, managing resources, and streamlining operations for each specific zone.",
+    ],
+  },
+  {
+    title: "setup stuff positions",
+    date: "step 3",
+    points: [
+      "Define roles such as Barista, Waiter, Cashier, and more within our system to clarify responsibilities and streamline workflow. This organization allows you to manage schedules, assign tasks, and track performance more effectively. Empower your staff with clear definitions and watch as your service flourishes with precision and care.",
+    ],
+  },
+  {
+    title: "define staff ",
+    date: "step 4",
+    points: [
+      "Define your team in the app by entering each staff member's name, contact number, and specific access levels.",
+    ],
+  },
+  {
+    title: "setup shift forms",
+    date: "step 5",
+    points: [
+      "establish and manage shift patterns to ensure your coffee shop operates smoothly around the clock. Whether it's the early birds in the morning shift, the rush-hour warriors of the afternoon, or the night owls keeping the evening vibe alive, our system allows you to customize and control shift timings. Define morning, afternoon, and night shifts, or any other custom intervals that fit your unique business rhythm. By organizing and adapting shift schedules, you'll maintain a consistent, quality service any time of day, all while keeping your team well-rested and ready to excel.",
+    ],
+  },
+  {
+    title: "insert tasks ",
+    date: "step 6",
+    points: [
+      "Progress further with Briz by inserting and customizing tasks that keep your coffee shop humming. Whether they are daily grind duties, weekly deep cleans, or special event preparations, our system allows you to define tasks as daily, weekly, or on a custom schedule. Assign these tasks to positions rather than individuals, such as assigning cleaning duties to the closing Barista or inventory checks to the morning Manager. This method ensures that responsibilities are clear and consistent, regardless of personnel changes. Once you've planned your shifts for each week, each staff member assigned to a position will automatically inherit the tasks associated with it, ensuring a smooth operation and an evenly distributed workload.",
+    ],
+  },
+  {
+    title: "Weekly Shift Planning",
+    date: "step 7",
+    points: [
+      "Each week, take the time to strategically assign staff to their specific positions for each day, considering their strengths, preferences, and the needs of your coffee shop. As you place each staff member in their role, they are automatically assigned the tasks linked to their position for that shift.",
+    ],
+  },
+];
+
+const testimonials = [
+  {
+    testimonial:
+      "Comprehensive Oversight: A Panoramic View for Owners and Supervisors",
+    title: "holistic view ",
+  },
+  {
+    testimonial:
+      "Strategic Shift Scheduling: Mastering the Art of Staff Allocation",
+    title: "Weekly Shift Planning",
+  },
+  {
+    testimonial: "Performance Insights: Supervisor-Driven Staff Ratings",
+    title: "rating by supervisor",
+  },
+  {
+    testimonial: "Validation Excellence: Supervisor Task Confirmation",
+    title: "verify by supervisor ",
+  },
+];
+
+export { services, experiences, testimonials };
diff --git a/src/hoc/SectionWrapper.jsx b/src/hoc/SectionWrapper.jsx
new file mode 100644
index 0000000..5902ce9
--- /dev/null
+++ b/src/hoc/SectionWrapper.jsx
@@ -0,0 +1,26 @@
+"use client";
+import { motion } from "framer-motion";
+
+import { staggerContainer } from "../utils/motion";
+import { styles } from "../style";
+
+const StarWrapper = (Component, idName) =>
+  function HOC() {
+    return (
+      <motion.section
+        variants={staggerContainer()}
+        initial="hidden"
+        whileInView="show"
+        viewport={{ amount: 0.25 }}
+        className={`${styles.padding} max-w-7xl mx-auto relative z-0`}
+      >
+        <span className="hash-span" id={idName}>
+          &nbsp;
+        </span>
+
+        <Component />
+      </motion.section>
+    );
+  };
+
+export default StarWrapper;
diff --git a/src/hoc/index.js b/src/hoc/index.js
new file mode 100644
index 0000000..7a79ea8
--- /dev/null
+++ b/src/hoc/index.js
@@ -0,0 +1,3 @@
+import SectionWrapper from "./SectionWrapper";
+
+export { SectionWrapper };
diff --git a/src/style.js b/src/style.js
new file mode 100644
index 0000000..dd32cae
--- /dev/null
+++ b/src/style.js
@@ -0,0 +1,17 @@
+const styles = {
+  paddingX: "sm:px-16 px-6",
+  paddingY: "sm:py-16 py-6",
+  padding: "sm:px-16 px-6 sm:py-16 py-10",
+
+  heroHeadText:
+    "font-black text-white lg:text-[80px] sm:text-[60px] xs:text-[50px] text-[40px] lg:leading-[98px] mt-2",
+  heroSubText:
+    "text-[#dfd9ff] font-medium lg:text-[30px] sm:text-[26px] xs:text-[20px] text-[16px] lg:leading-[40px]",
+
+  sectionHeadText:
+    "text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]",
+  sectionSubText:
+    "sm:text-[18px] text-[14px] text-secondary uppercase tracking-wider",
+};
+
+export { styles };
diff --git a/src/utils/motion.js b/src/utils/motion.js
new file mode 100644
index 0000000..9e3828e
--- /dev/null
+++ b/src/utils/motion.js
@@ -0,0 +1,88 @@
+export const textVariant = (delay) => {
+  return {
+    hidden: {
+      y: -50,
+      opacity: 0,
+    },
+    show: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        type: "spring",
+        duration: 1.25,
+        delay: delay,
+      },
+    },
+  };
+};
+
+export const fadeIn = (direction, type, delay, duration) => {
+  return {
+    hidden: {
+      x: direction === "left" ? 100 : direction === "right" ? -100 : 0,
+      y: direction === "up" ? 100 : direction === "down" ? -100 : 0,
+      opacity: 0,
+    },
+    show: {
+      x: 0,
+      y: 0,
+      opacity: 1,
+      transition: {
+        type: type,
+        delay: delay,
+        duration: duration,
+        ease: "easeOut",
+      },
+    },
+  };
+};
+
+export const zoomIn = (delay, duration) => {
+  return {
+    hidden: {
+      scale: 0,
+      opacity: 0,
+    },
+    show: {
+      scale: 1,
+      opacity: 1,
+      transition: {
+        type: "tween",
+        delay: delay,
+        duration: duration,
+        ease: "easeOut",
+      },
+    },
+  };
+};
+
+export const slideIn = (direction, type, delay, duration) => {
+  return {
+    hidden: {
+      x: direction === "left" ? "-100%" : direction === "right" ? "100%" : 0,
+      y: direction === "up" ? "100%" : direction === "down" ? "100%" : 0,
+    },
+    show: {
+      x: 0,
+      y: 0,
+      transition: {
+        type: type,
+        delay: delay,
+        duration: duration,
+        ease: "easeOut",
+      },
+    },
+  };
+};
+
+export const staggerContainer = (staggerChildren, delayChildren) => {
+  return {
+    hidden: {},
+    show: {
+      transition: {
+        staggerChildren: staggerChildren,
+        delayChildren: delayChildren || 0,
+      },
+    },
+  };
+};
diff --git a/style/globals.css b/style/globals.css
index d7246b8..dc4687f 100644
--- a/style/globals.css
+++ b/style/globals.css
@@ -220,3 +220,242 @@ body {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
+
+.hash-span {
+  margin-top: -100px;
+  padding-bottom: 100px;
+  display: block;
+}
+
+.black-gradient {
+  background: #000000; /* fallback for old browsers */
+  background: -webkit-linear-gradient(
+    to right,
+    #434343,
+    #000000
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(
+    to right,
+    #434343,
+    #000000
+  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
+
+.violet-gradient {
+  background: #b9e4c9;
+  background: linear-gradient(-90deg, #b9e4c9 0%, rgba(60, 51, 80, 0) 100%);
+  background: -webkit-linear-gradient(
+    -90deg,
+    #b9e4c9 0%,
+    rgba(60, 51, 80, 0) 100%
+  );
+}
+
+.green-pink-gradient {
+  background: "#00cea8";
+  background: linear-gradient(90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
+  background: -webkit-linear-gradient(-90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
+}
+
+.orange-text-gradient {
+  background: #f12711; /* fallback for old browsers */
+  background: -webkit-linear-gradient(
+    to top,
+    #f12711,
+    #f5af19
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(
+    to top,
+    #f12711,
+    #f5af19
+  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.green-text-gradient {
+  background: #11998e; /* fallback for old browsers */
+  background: -webkit-linear-gradient(
+    to top,
+    #11998e,
+    #38ef7d
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(
+    to top,
+    #11998e,
+    #38ef7d
+  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.blue-text-gradient {
+  /* background: -webkit-linear-gradient(#eee, #333); */
+  background: #56ccf2; /* fallback for old browsers */
+  background: -webkit-linear-gradient(
+    to top,
+    #2f80ed,
+    #56ccf2
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(
+    to top,
+    #2f80ed,
+    #56ccf2
+  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.pink-text-gradient {
+  background: #ec008c; /* fallback for old browsers */
+  background: -webkit-linear-gradient(
+    to top,
+    #ec008c,
+    #fc6767
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(
+    to top,
+    #ec008c,
+    #fc6767
+  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* canvas- styles */
+.canvas-loader {
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  position: relative;
+  text-indent: -9999em;
+  animation: mulShdSpin 1.1s infinite ease;
+  transform: translateZ(0);
+}
+
+@keyframes mulShdSpin {
+  0%,
+  100% {
+    box-shadow: 0em -2.6em 0em 0em #ffffff,
+      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+      -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
+      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
+  }
+  12.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
+      1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
+  }
+  25% {
+    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
+      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff,
+      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+  }
+  37.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
+      2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff,
+      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+  }
+  50% {
+    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+      2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
+      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff,
+      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+  }
+  62.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
+      0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff,
+      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+  }
+  75% {
+    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+      0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
+      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff,
+      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+  }
+  87.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
+      -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
+  }
+}
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+.bg-hero-pattern {
+  background-position: center;
+  background-size: cover;
+  background-image: url(../public/images/bg.png);
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 14016ed..3c7387d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -44,6 +44,14 @@ module.exports = {
         body: {
           100: "#EEEEEE",
         },
+        colors: {
+          primaryLand: "#050816",
+          secondaryLand: "#aaa6c3",
+          tertiaryLand: "#151030",
+          "black-100": "#100d25",
+          "black-200": "#090325",
+          "white-100": "#f3f3f3",
+        },
       },
     },