From 876c70255701d597c4776a3873139787e784549e Mon Sep 17 00:00:00 2001 From: Toastie Date: Wed, 18 Oct 2023 05:17:55 -0700 Subject: [PATCH] Upload files to "src/components" --- src/components/Pricing.jsx | 205 ++++++++++++++++++++++++++++++ src/components/ScrollUpButton.jsx | 52 ++++++++ src/components/Test.jsx | 82 ++++++++++++ src/components/Testimonials.jsx | 99 +++++++++++++++ 4 files changed, 438 insertions(+) create mode 100644 src/components/Pricing.jsx create mode 100644 src/components/ScrollUpButton.jsx create mode 100644 src/components/Test.jsx create mode 100644 src/components/Testimonials.jsx diff --git a/src/components/Pricing.jsx b/src/components/Pricing.jsx new file mode 100644 index 0000000..1d35603 --- /dev/null +++ b/src/components/Pricing.jsx @@ -0,0 +1,205 @@ +import { useState } from "react"; +import { motion } from "framer-motion"; + +import { InvitationModal } from "./InvitationModal"; +import { CheckArrowIcon } from "../assets/icons/CheckArrowIcon"; + +export const Pricing = () => { + const [isMonthly, setIsMonthly] = useState(true); + const [isModalOpen, setIsModalOpen] = useState(false); + + const handleChange = () => { + setIsMonthly(!isMonthly); + }; + + return ( +
+
+
+ +
+
+ + Dolor sit amet consectutar + +

+ Choose your best plan +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+ +
+
+
+
+

+ Beginner +

+
+
+ $0 +
+
+ {isMonthly ? "/ month" : "/ year"} +
+
+ +

+ The perfect way to get started and get used to our tools. +

+
    +
  • + + Vestibulum viverra +
    • +
  • + + Morbi mollis metus pretium +
    • +
  • + + Etiam lectus nunc, commodo +
    • +
  • + + Ut quam nisl mollis id pretium +
    • +
  • + + Suspendisse bibendum +
    • +
+
setIsModalOpen(true)} + > + Get Started +
+
+
+
+
+

+ Standard +

+
+
+ {isMonthly ? "$19" : "$180"} +
+
+ {isMonthly ? "/ month" : "/ year"} +
+
+

+ The perfect way to get started and get used to our tools. +

+
    +
  • + + Vestibulum viverra +
    • +
  • + + Morbi mollis metus pretium +
    • +
  • + + Etiam lectus nunc, commodo +
    • +
  • + + Ut quam nisl mollis id pretium +
    • +
  • + + Suspendisse bibendum +
    • +
+
setIsModalOpen(true)} + > + Get Started +
+
+
+
+
+

+ Premium +

+
+
+ {isMonthly ? "$36" : "$390"} +
+
+ {isMonthly ? "/ month" : "/ year"} +
+
+

+ The perfect way to get started and get used to our tools. +

+
    +
  • + + Vestibulum viverra +
    • +
  • + + Morbi mollis metus pretium +
    • +
  • + + Etiam lectus nunc, commodo +
    • +
  • + + Ut quam nisl mollis id pretium +
    • +
  • + + Suspendisse bibendum +
    • +
+
setIsModalOpen(true)} + > + Get Started +
+
+
+
+
+ +
+ {isModalOpen && ( + + )} +
+ ); +}; \ No newline at end of file diff --git a/src/components/ScrollUpButton.jsx b/src/components/ScrollUpButton.jsx new file mode 100644 index 0000000..ae4778c --- /dev/null +++ b/src/components/ScrollUpButton.jsx @@ -0,0 +1,52 @@ +import { useEffect, useState } from "react"; + +export const ScrollUpButton = () => { + const [isVisible, setIsVisible] = useState(false); + + useEffect(() => { + window.addEventListener("scroll", toggleVisible); + }, []); + + const toggleVisible = () => { + const scrolled = document.documentElement.scrollTop; + if (scrolled > 300) { + setIsVisible(true); + } else if (scrolled <= 300) { + setIsVisible(false); + } + }; + + const scrollToTop = () => { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + }; + + return ( + <> + {isVisible && ( +
+ + + +
+ )} + + ); +}; \ No newline at end of file diff --git a/src/components/Test.jsx b/src/components/Test.jsx new file mode 100644 index 0000000..4895262 --- /dev/null +++ b/src/components/Test.jsx @@ -0,0 +1,82 @@ +import { Hero } from "./Hero.jsx"; +import { Navbar } from "./Navbar.jsx"; +import { Testimonials } from "./Testimonials.jsx"; +import { FeaturesDiagonal } from "./FeaturesDiagonal.jsx"; +import { Pricing } from "./Pricing.jsx"; +import { FAQ } from "./FAQ.jsx"; +import { Brands } from "./Brands.jsx"; +import { Divider } from "./Divider"; +import { Footer } from "./Footer.jsx"; + +import { motion } from "framer-motion"; + +export const Test = () => { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + +