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/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..a9e92c6
--- /dev/null
+++ b/src/components/Navbar.jsx
@@ -0,0 +1,110 @@
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+import { DragonsChildLogo } from "../assets/logos/DragonsChild";
+import { GithubIcon } from "../assets/icons/GithubIcon";
+import { DragonsIcon } 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