Dragonschildstudios/dragonschildstudios.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Upload files to "src/components"

Browse source
This commit is contained in:
Toastie 2023-10-18 05:17:55 -07:00
parent e16647b736
commit 876c702557
4 changed files with 438 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

205
src/components/Pricing.jsx Normal file
View 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
View 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
View 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
View 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>
);