Upload files to "src/components"
This commit is contained in:
Toastie
parent
e16647b736
commit
876c702557
4 changed files with 438 additions and 0 deletions
205
src/components/Pricing.jsx
Normal file
205
src/components/Pricing.jsx
Normal file
|
|
@ -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 (
|
||||||
|
<section className="w-screen flex justify-center bg-customDarkBg2 relative">
|
||||||
|
<div className="absolute -top-16" id="pricing" />
|
||||||
|
<div className="pb-20 pt-12 bg-customDarkBg2 2xl:w-[1150px] lg:w-[1050px] md:w-4/5 ">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
whileInView={{ opacity: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="max-w-2xl mx-auto text-center mb-16">
|
||||||
|
<span className="custom-block-subtitle">
|
||||||
|
Dolor sit amet consectutar
|
||||||
|
</span>
|
||||||
|
<h2 className="mt-6 mb-6 text-4xl lg:text-5xl font-bold font-heading text-white">
|
||||||
|
Choose your best plan
|
||||||
|
</h2>
|
||||||
|
<p className="mb-6 text-customGrayText">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||||
|
</p>
|
||||||
|
<label className="mx-auto bg-customDarkBg3 relative flex justify-between items-center group text-xl w-44 h-12 rounded-lg pr-36 pl-1 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="peer appearance-none"
|
||||||
|
checked={!isMonthly}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
<span className="h-8 w-[5.5rem] flex items-center pr-2 bg-customDarkBg3 after:rounded-lg duration-300 ease-in-out after:w-[30rem] after:h-10 after:bg-customPrimary after:shadow-md after:duration-300 peer-checked:after:translate-x-[5.5rem] cursor-pointer"></span>
|
||||||
|
<div className="flex absolute text-white text-sm font-bold">
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
isMonthly ? "mr-9 ml-3" : "mr-9 ml-3 text-gray-400"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Monthly
|
||||||
|
</div>
|
||||||
|
<div className={isMonthly && "text-gray-400"}>Yearly</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap flex-col lg:flex-row -mx-4 items-center mt-20">
|
||||||
|
<div className="w-[350px] sm:w-[380px] lg:w-1/3 px-4 mb-8 lg:mb-0">
|
||||||
|
<div className="p-8 bg-customDarkBg3 rounded-3xl">
|
||||||
|
<h4 className="mb-2 text-xl font-bold font-heading text-white text-left">
|
||||||
|
Beginner
|
||||||
|
</h4>
|
||||||
|
<div className="flex justify-start items-end">
|
||||||
|
<div className="text-4xl sm:text-5xl font-bold text-white text-left mt-4 mr-2">
|
||||||
|
$0
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-500">
|
||||||
|
{isMonthly ? "/ month" : "/ year"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="mt-4 mb-6 2xl:mb-10 text-gray-500 leading-loose text-left">
|
||||||
|
The perfect way to get started and get used to our tools.
|
||||||
|
</p>
|
||||||
|
<ul className="mb-2 2xl:mb-6 text-white">
|
||||||
|
<li className="mb-4 flex">
|
||||||
|
<CheckArrowIcon />
|
||||||
|
<span>Vestibulum viverra</span>
|
||||||
|
</li>
|
||||||
|
<li className="mb-4 flex">
|
||||||
|
<CheckArrowIcon />
|
||||||
|
<span>Morbi mollis metus pretium</span>
|
||||||
|
</li>
|
||||||
|
<li className="mb-4 flex">
|
||||||
|
<CheckArrowIcon />
|
||||||
|
<span>Etiam lectus nunc, commodo</span>
|
||||||
|
</li>
|
||||||
|
<li className="mb-4 flex">
|
||||||
|
<CheckArrowIcon />
|
||||||
|
<span>Ut quam nisl mollis id pretium</span>
|
||||||
|
</li>
|
||||||
|
<li className="mb-4 flex">
|
||||||
|
<CheckArrowIcon />
|
||||||
|
<span>Suspendisse bibendum</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div
|
||||||
|
className="inline-block text-center py-2 px-4 w-full rounded-xl rounded-t-xl custom-button-colored font-bold leading-loose mt-16"
|
||||||
|
onClick={() => setIsModalOpen(true)}
|
||||||
|
>
|
||||||
|
Get Started
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-[350px] sm:w-[380px] lg:w-1/3 px-4 mb-8 lg:mb-0">
|
||||||
|
<div className="px-8 py-8 bg-customDarkBg3 rounded-3xl">
|
||||||
|
<h4 className="mb-2 2xl:mb-4 text-2xl font-bold font-heading text-white text-left">
|
||||||
|
Standard
|
||||||
|
</h4>
|
||||||
|
<div className="flex justify-start items-end">
|
||||||
|
<div className="text-4xl sm:text-5xl font-bold text-white text-left mt-4 mr-2">
|
||||||
|
{isMonthly ? "$19" : "$180"}
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-500">
|
||||||
|
{isMonthly ? "/ month" : "/ year"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="mt-8 mb-8 2xl:mb-12 text-gray-500 leading-loose text-left">
|
||||||
|
The perfect way to get started and get used to our tools.
|
||||||
|
</p>
|
||||||
|
<ul className="mb-14 text-white">
|
||||||
|
<li className="mb-4 flex">
|
||||||
|
<CheckArrowIcon />
|
||||||
|
<span>Vestibulum viverra</span>
|
||||||
|
</li>
|
||||||
|
<li className="mb-4 flex">
|
||||||
|
<CheckArrowIcon />
|
||||||
|
<span>Morbi mollis metus pretium</span>
|
||||||
|
</li>
|
||||||
|
<li className="mb-4 flex">
|
||||||
|
<CheckArrowIcon />
|
||||||
|
<span>Etiam lectus nunc, commodo</span>
|
||||||
|
</li>
|
||||||
|
<li className="mb-4 flex">
|
||||||
|
<CheckArrowIcon />
|
||||||
|
<span>Ut quam nisl mollis id pretium</span>
|
||||||
|
</li>
|
||||||
|
<li className="mb-4 flex">
|
||||||
|
<CheckArrowIcon />
|
||||||
|
<span>Suspendisse bibendum</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div
|
||||||
|
className="inline-block text-center py-2 px-4 w-full custom-button-colored leading-loose transition duration-200 mt-20"
|
||||||
|
onClick={() => setIsModalOpen(true)}
|
||||||
|
>
|
||||||
|
Get Started
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-[350px] sm:w-[380px] lg:w-1/3 px-4 mb-8 lg:mb-0">
|
||||||
|
<div className="p-8 bg-customDarkBg3 rounded-3xl">
|
||||||
|
<h4 className="mb-2 text-xl font-bold font-heading text-white text-left">
|
||||||
|
Premium
|
||||||
|
</h4>
|
||||||
|
<div className="flex justify-start items-end">
|
||||||
|
<div className="text-4xl sm:text-5xl font-bold text-white text-left mt-4 mr-2">
|
||||||
|
{isMonthly ? "$36" : "$390"}
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-500">
|
||||||
|
{isMonthly ? "/ month" : "/ year"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="mt-4 mb-6 2xl:mb-10 text-gray-500 leading-loose text-left">
|
||||||
|
The perfect way to get started and get used to our tools.
|
||||||
|
</p>
|
||||||
|
<ul className="mb-2 2xl:mb-6 text-white">
|
||||||
|
<li className="mb-4 flex">
|
||||||
|
<CheckArrowIcon />
|
||||||
|
<span>Vestibulum viverra</span>
|
||||||
|
</li>
|
||||||
|
<li className="mb-4 flex">
|
||||||
|
<CheckArrowIcon />
|
||||||
|
<span>Morbi mollis metus pretium</span>
|
||||||
|
</li>
|
||||||
|
<li className="mb-4 flex">
|
||||||
|
<CheckArrowIcon />
|
||||||
|
<span>Etiam lectus nunc, commodo</span>
|
||||||
|
</li>
|
||||||
|
<li className="mb-4 flex">
|
||||||
|
<CheckArrowIcon />
|
||||||
|
<span>Ut quam nisl mollis id pretium</span>
|
||||||
|
</li>
|
||||||
|
<li className="mb-4 flex">
|
||||||
|
<CheckArrowIcon />
|
||||||
|
<span>Suspendisse bibendum</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div
|
||||||
|
className="inline-block text-center py-2 px-4 w-full rounded-xl rounded-t-xl custom-button-colored font-bold leading-loose mt-16"
|
||||||
|
onClick={() => setIsModalOpen(true)}
|
||||||
|
>
|
||||||
|
Get Started
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
{isModalOpen && (
|
||||||
|
<InvitationModal isOpen={isModalOpen} setIsOpen={setIsModalOpen} />
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
52
src/components/ScrollUpButton.jsx
Normal file
52
src/components/ScrollUpButton.jsx
Normal file
|
|
@ -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 && (
|
||||||
|
<div
|
||||||
|
className="w-12 h-12 fixed bottom-6 right-6 custom-border-gray rounded-xl bg-customDarkBg2 hover:bg-customDarkBg3 cursor-pointer flex justify-center items-center transition z-50"
|
||||||
|
onClick={scrollToTop}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="35px"
|
||||||
|
height="35px"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M4.16732 12.5L10.0007 6.66667L15.834 12.5"
|
||||||
|
stroke="#4F46E5"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
82
src/components/Test.jsx
Normal file
82
src/components/Test.jsx
Normal file
|
|
@ -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 (
|
||||||
|
<>
|
||||||
|
<motion.div
|
||||||
|
animate={{
|
||||||
|
rotate: [0, 360],
|
||||||
|
}}
|
||||||
|
transition={{ duration: 1, repeat: Infinity, delay: 0.5 }}
|
||||||
|
>
|
||||||
|
<Navbar />
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
animate={{
|
||||||
|
rotate: [0, 360],
|
||||||
|
}}
|
||||||
|
transition={{ duration: 1, repeat: Infinity, delay: 0.5 }}
|
||||||
|
>
|
||||||
|
<Hero />
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
animate={{
|
||||||
|
rotate: [0, 360],
|
||||||
|
}}
|
||||||
|
transition={{ duration: 1, repeat: Infinity, delay: 0.5 }}
|
||||||
|
>
|
||||||
|
<Testimonials />
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
animate={{
|
||||||
|
rotate: [0, 360],
|
||||||
|
}}
|
||||||
|
transition={{ duration: 1, repeat: Infinity, delay: 0.5 }}
|
||||||
|
>
|
||||||
|
<FeaturesDiagonal />
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
animate={{
|
||||||
|
rotate: [0, 360],
|
||||||
|
}}
|
||||||
|
transition={{ duration: 1, repeat: Infinity, delay: 0.5 }}
|
||||||
|
>
|
||||||
|
<Pricing />
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
animate={{
|
||||||
|
rotate: [0, 360],
|
||||||
|
}}
|
||||||
|
transition={{ duration: 1, repeat: Infinity, delay: 0.5 }}
|
||||||
|
>
|
||||||
|
<Brands />
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
animate={{
|
||||||
|
rotate: [0, 360],
|
||||||
|
}}
|
||||||
|
transition={{ duration: 1, repeat: Infinity, delay: 0.5 }}
|
||||||
|
>
|
||||||
|
<FAQ />
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
animate={{
|
||||||
|
rotate: [0, 360],
|
||||||
|
}}
|
||||||
|
transition={{ duration: 1, repeat: Infinity, delay: 0.5 }}
|
||||||
|
>
|
||||||
|
<Footer />
|
||||||
|
</motion.div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
99
src/components/Testimonials.jsx
Normal file
99
src/components/Testimonials.jsx
Normal file
|
|
@ -0,0 +1,99 @@
|
||||||
|
import { QuoteIcon } from "../assets/icons/QuoteIcon";
|
||||||
|
import testimonial1 from "../assets/images/testimonial1.png";
|
||||||
|
import testimonial2 from "../assets/images/testimonial2.png";
|
||||||
|
import testimonial3 from "../assets/images/testimonial3.png";
|
||||||
|
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
export const Testimonials = () => (
|
||||||
|
<section className="w-full flex justify-center pt-10 mb-16 lg:mb-32 bg-customDarkBg2 relative">
|
||||||
|
<div className="absolute -top-16" id="feedback" />
|
||||||
|
<div className="flex flex-col w-full lg:w-[1150px] justify-center">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
whileInView={{ opacity: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.3 }}
|
||||||
|
>
|
||||||
|
<div className="custom-block-subtitle text-center mb-6">
|
||||||
|
Look at those good reviews!
|
||||||
|
</div>
|
||||||
|
<div className="custom-block-big-title text-center mb-16 px-8 sm:px-24 md:px-48">
|
||||||
|
People like you love DragonsChild
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col lg:flex-row gap-8 lg:gap-5 xl:gap-10 px-6 xl:px-0 items-center">
|
||||||
|
<div className="w-11/12 sm:w-4/5 md:w-[560px] lg:w-1/3 custom-border-gray-darker rounded-xl bg-customDarkBg3 flex flex-col px-6 py-4">
|
||||||
|
<div className="flex mb-2">
|
||||||
|
<QuoteIcon />
|
||||||
|
</div>
|
||||||
|
<div className="custom-content-text-white">
|
||||||
|
"Lorem ipsum dolor sit amet, consecte adipiscing elit. Phasellus
|
||||||
|
pulvinar urna quis tempor gravida. Sed commodo bibendum orci, sed
|
||||||
|
tincidunt lectus dignissim vel. Sed et maximus odio, eu ultrices
|
||||||
|
magna. Etiam finibus tempor eu nunc vitae tristique. Cras mattis
|
||||||
|
sapien. Etiam finibus gravida."
|
||||||
|
</div>
|
||||||
|
<div className="flex mt-4 mb-2 xl:mt-8 xl:mb-4">
|
||||||
|
<img src={testimonial1} alt="" width="45px" />
|
||||||
|
<div className="flex flex-col ml-4">
|
||||||
|
<div className="custom-content-text-white font-medium">
|
||||||
|
That one guys
|
||||||
|
</div>
|
||||||
|
<div className="custom-content-text-gray">
|
||||||
|
Did a thing
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-11/12 sm:w-4/5 md:w-[560px] lg:w-1/3 custom-border-gray-darker rounded-xl bg-customDarkBg3 flex flex-col px-6 py-4">
|
||||||
|
<div className="flex mb-2">
|
||||||
|
<QuoteIcon />
|
||||||
|
</div>
|
||||||
|
<div className="custom-content-text-white">
|
||||||
|
"Lorem ipsum dolor sit amet, consecte adipiscing elit. Phasellus
|
||||||
|
pulvinar urna quis tempor gravida. Sed commodo bibendum orci, sed
|
||||||
|
tincidunt lectus dignissim vel. Sed et maximus odio, eu ultrices
|
||||||
|
magna. Etiam finibus tempor eu nunc vitae tristique. Cras mattis
|
||||||
|
sapien. Etiam finibus gravida."
|
||||||
|
</div>
|
||||||
|
<div className="flex mt-4 mb-2 xl:mt-8 xl:mb-4">
|
||||||
|
<img src={testimonial2} alt="" width="45px" />
|
||||||
|
<div className="flex flex-col ml-4">
|
||||||
|
<div className="custom-content-text-white font-medium">
|
||||||
|
That other guy
|
||||||
|
</div>
|
||||||
|
<div className="custom-content-text-gray">
|
||||||
|
Also probably does something
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-11/12 sm:w-4/5 md:w-[560px] lg:w-1/3 custom-border-gray-darker rounded-xl bg-customDarkBg3 flex flex-col px-6 py-4">
|
||||||
|
<div className="flex mb-2">
|
||||||
|
<QuoteIcon />
|
||||||
|
</div>
|
||||||
|
<div className="custom-content-text-white">
|
||||||
|
"Lorem ipsum dolor sit amet, consecte adipiscing elit. Phasellus
|
||||||
|
pulvinar urna quis tempor gravida. Sed commodo bibendum orci, sed
|
||||||
|
tincidunt lectus dignissim vel. Sed et maximus odio, eu ultrices
|
||||||
|
magna. Etiam finibus tempor eu nunc vitae tristique. Cras mattis
|
||||||
|
sapien. Etiam finibus gravida."
|
||||||
|
</div>
|
||||||
|
<div className="flex mt-4 mb-2 xl:mt-8 xl:mb-4">
|
||||||
|
<img src={testimonial3} alt="" width="45px" />
|
||||||
|
<div className="flex flex-col ml-4">
|
||||||
|
<div className="custom-content-text-white font-medium">
|
||||||
|
Craig
|
||||||
|
</div>
|
||||||
|
<div className="custom-content-text-gray">
|
||||||
|
Is cool
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
Loading…
Reference in a new issue