diff --git a/src/components/Brands.jsx b/src/components/Brands.jsx new file mode 100644 index 0000000..8a3273a --- /dev/null +++ b/src/components/Brands.jsx @@ -0,0 +1,57 @@ +import { motion } from "framer-motion"; + +import { AmazonLogo } from "../assets/logos/AmazonLogo"; +import { DropboxLogo } from "../assets/logos/DropboxLogo"; +import { NetflixLogo } from "../assets/logos/NetflixLogo"; +import { SlackLogo } from "../assets/logos/SlackLogo"; +import { SpotifyLogo } from "../assets/logos/SpotifyLogo"; +import { StripeLogo } from "../assets/logos/StripeLogo"; + +export const Brands = () => ( +
+ +
+
+
+
+

+ Trusted by brands +

+

+ all over the world +

+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+
+
+
+ +
+); \ No newline at end of file diff --git a/src/components/Divider.jsx b/src/components/Divider.jsx new file mode 100644 index 0000000..ebea254 --- /dev/null +++ b/src/components/Divider.jsx @@ -0,0 +1,5 @@ +export const Divider = () => ( +
+
+
+); \ No newline at end of file diff --git a/src/components/FAQ.jsx b/src/components/FAQ.jsx new file mode 100644 index 0000000..cbf22b4 --- /dev/null +++ b/src/components/FAQ.jsx @@ -0,0 +1,112 @@ +import { useState } from "react"; +import { motion } from "framer-motion"; + +export const FAQ = () => ( +
+
+ +
+
+

+ Have any questions? +

+

+ Frequently Asked Questions +

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+); + +const FAQBox = ({ defaultOpen, title, content }) => { + const [isOpen, setIsOpen] = useState(defaultOpen); + + return ( +
setIsOpen(!isOpen)} + > +
+

+ {title} +

+

+ {content} +

+
+
+ + + +
+
+ ); +}; \ No newline at end of file diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx new file mode 100644 index 0000000..93507c8 --- /dev/null +++ b/src/components/Footer.jsx @@ -0,0 +1,66 @@ +import { BygulIcon } from "../assets/icons/BygulIcon"; +import { DragonsChildLogo } from "../assets/logos/DragonsChild"; + +export const Footer = () => { + return ( + + ); +}; \ No newline at end of file diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx new file mode 100644 index 0000000..0a822e5 --- /dev/null +++ b/src/components/Hero.jsx @@ -0,0 +1,91 @@ +import { useState } from "react"; +import { motion } from "framer-motion"; + +import { InvitationModal } from "./InvitationModal"; +import dashboard from "../assets/images/dashboard.png"; + +export const Hero = () => { + const [isModalOpen, setIsModalOpen] = useState(false); + + return ( +
+
+ +
+ Dragons child hosting +
+ + +
+ The Hosting{" "} + The Hosting +
+
+ Company +
+ + +
+ We are a company that likes to have fun +
+ + +
+ +
+ + +
+ 123 +
+ +
+
+ + + +
+
+
+ {isModalOpen && ( + + )} +
+ ); +}; \ No newline at end of file diff --git a/src/components/InvitationModal.jsx b/src/components/InvitationModal.jsx new file mode 100644 index 0000000..4b3f580 --- /dev/null +++ b/src/components/InvitationModal.jsx @@ -0,0 +1,90 @@ +import { motion, AnimatePresence } from "framer-motion"; + +import { CheckArrowIcon } from "../assets/icons/CheckArrowIcon"; +import { CloseIcon } from "../assets/icons/CloseIcon"; +import { DragonsChildLogo } from "../assets/logos/DragonsChild"; + +export const InvitationModal = ({ setIsOpen }) => ( + + +
setIsOpen(false)} + > +
e.stopPropagation()} + > +
+
+

+ Subscribe Now +

+

+ Winter is coming +

+ +
    +
  • + + Vestibulum viverra +
    • +
  • + + Morbi mollis metus pretium +
    • +
  • + + Etiam lectus nunc, commodo +
    • +
+
+
+
+
+ +
+
+ DragonsChild +
+
+ +

+ Join 3,953 other developers +

+
+
+ +
+
+ +
+
+
+
setIsOpen(false)} + > + +
+
+
+
+ + +); \ No newline at end of file diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx new file mode 100644 index 0000000..232a7ea --- /dev/null +++ b/src/components/Navbar.jsx @@ -0,0 +1,99 @@ +import { useState } from "react"; +import { motion, AnimatePresence } from "framer-motion"; + +import { DragonsChildLogo } from "../assets/logos/DragonsChild"; +import { GithubIcon } from "../assets/icons/GithubIcon"; +import { BygulIcon } from "../assets/icons/BygulIcon"; +import { InstagramIcon } from "../assets/icons/InstagramIcon"; +import { TwitterIcon } from "../assets/icons/TwitterIcon"; + +export const Navbar = () => { + const [isOpen, setIsOpen] = useState(false); + + return ( + + ); +}; \ No newline at end of file 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 ( + <> + + + + + + + + + + + + + + + + + + + + + + +