Upload files to "src/components"
This commit is contained in:
Toastie
parent
d42b396b10
commit
b36a9499fb
5 changed files with 374 additions and 0 deletions
57
src/components/Brands.jsx
Normal file
57
src/components/Brands.jsx
Normal file
|
|
@ -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 = () => (
|
||||
<section className="py-12 sm:py-24 bg-customDarkBg1 w-full mt-16 mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
<div className="container px-4 mx-auto 2xl:w-[1200px] xl:w-[1100px] lg:w-[1000px] md:w-4/5">
|
||||
<div className="flex lg:flex-row flex-col items-center -mx-4 justify-center lg:text-left text-center">
|
||||
<div className="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
|
||||
<div className="flex flex-col">
|
||||
<h2 className="mb-2 text-4xl sm:text-5xl 2xl:text-6xl font-bold tracking-normal text-white">
|
||||
Trusted by brands
|
||||
</h2>
|
||||
<h2 className=" text-4xl sm:text-5xl 2xl:text-6xl font-bold tracking-normal text-customSecondary">
|
||||
all over the world
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-2/3 sm:w-[620px] lg:w-1/2 mx-auto lg:mx-0 lg:pl-10">
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="w-1/2 sm:w-1/3 py-6 flex justify-center">
|
||||
<AmazonLogo />
|
||||
</div>
|
||||
<div className="w-1/2 sm:w-1/3 py-6 flex justify-center">
|
||||
<DropboxLogo />
|
||||
</div>
|
||||
<div className="w-1/2 sm:w-1/3 py-6 flex justify-center">
|
||||
<NetflixLogo />
|
||||
</div>
|
||||
<div className="w-1/2 sm:w-1/3 py-6 flex justify-center">
|
||||
<StripeLogo />
|
||||
</div>
|
||||
|
||||
<div className="w-1/2 sm:w-1/3 py-6 flex justify-center">
|
||||
<SpotifyLogo />
|
||||
</div>
|
||||
<div className="w-1/2 sm:w-1/3 py-6 flex justify-center">
|
||||
<SlackLogo />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
5
src/components/Divider.jsx
Normal file
5
src/components/Divider.jsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export const Divider = () => (
|
||||
<div className="w-full lg:w-3/5 mx-auto">
|
||||
<div className="border-t border-customGrayBorder"></div>
|
||||
</div>
|
||||
);
|
||||
112
src/components/FAQ.jsx
Normal file
112
src/components/FAQ.jsx
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
import { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export const FAQ = () => (
|
||||
<section className="relative pt-16 pb-16 bg-blueGray-50 overflow-hidden">
|
||||
<div className="absolute -top-10" id="FAQ" />
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
<div className="relative z-10 container px-2 sm:px-8 lg:px-4 mx-auto w-11/12 sm:w-full">
|
||||
<div className="md:max-w-4xl mx-auto">
|
||||
<p className="mb-7 custom-block-subtitle text-center">
|
||||
Have any questions?
|
||||
</p>
|
||||
<h2 className="mb-16 custom-block-big-title text-center">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
<div className="mb-11 flex flex-wrap -m-1">
|
||||
<div className="w-full p-1">
|
||||
<FAQBox
|
||||
title="Do you provide any free plan?"
|
||||
content="Lorem ipsum dolor sit amet, to the consectr adipiscing elit.
|
||||
Volutpat tempor to the condi mentum vitae vel purus. Lorem ipsum
|
||||
dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to
|
||||
the condi mentum vitae vel purus. Lorem ipsum dolor sit amet, to the
|
||||
consectr adipiscing elit. Volutpat tempor to the condi mentum vitae
|
||||
vel purus."
|
||||
defaultOpen
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full p-1">
|
||||
<FAQBox
|
||||
title="How to claim your 25% discount offer?"
|
||||
content="Lorem ipsum dolor sit amet, to the consectr adipiscing elit.
|
||||
Volutpat tempor to the condi mentum vitae vel purus. Lorem
|
||||
ipsum dolor sit amet, to the consectr adipiscing elit.
|
||||
Volutpat tempor to the condi mentum vitae vel purus."
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full p-1">
|
||||
<FAQBox
|
||||
title="What’s your refund policy?"
|
||||
content="Lorem ipsum dolor sit amet, to the consectr adipiscing elit.
|
||||
Volutpat tempor to the condi mentum vitae vel purus."
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full p-1">
|
||||
<FAQBox
|
||||
title="How to get support for the product?"
|
||||
content=" Lorem ipsum dolor sit amet, to the consectr adipiscing elit.
|
||||
Volutpat tempor to the condi mentum vitae vel purus. Lorem
|
||||
ipsum dolor sit amet, to the consectr adipiscing elit.
|
||||
Volutpat tempor to the condi mentum vitae vel purus. Lorem
|
||||
ipsum dolor sit amet, to the consectr adipiscing elit.
|
||||
Volutpat tempor to the condi mentum vitae vel purus. Lorem
|
||||
ipsum dolor sit amet, to the consectr adipiscing elit.
|
||||
Volutpat tempor to the condi mentum vitae vel purus."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
|
||||
const FAQBox = ({ defaultOpen, title, content }) => {
|
||||
const [isOpen, setIsOpen] = useState(defaultOpen);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="pt-2 sm:pt-6 pb-2 px-3 sm:px-8 rounded-3xl bg-customDarkBg3 custom-border-gray-darker mb-4 relative hover:bg-customDarkBg3Hover cursor-pointer"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
<div className="flex flex-col p-2 justify-center items-start">
|
||||
<h3 className=" custom-content-title pt-3 sm:pt-0 pr-8 sm:pr-0">
|
||||
{title}
|
||||
</h3>
|
||||
<p
|
||||
className={`text-customGrayText pt-4 transition-all duration-300 overflow-hidden ${
|
||||
isOpen ? "max-h-96" : "max-h-0"
|
||||
}`}
|
||||
>
|
||||
{content}
|
||||
</p>
|
||||
</div>
|
||||
<div className="absolute top-6 right-4 sm:top-8 sm:right-8">
|
||||
<svg
|
||||
width="28px"
|
||||
height="30px"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`transition-all duration-500 ${
|
||||
isOpen ? "rotate-[180deg]" : "rotate-[270deg]"
|
||||
}`}
|
||||
>
|
||||
<path
|
||||
d="M4.16732 12.5L10.0007 6.66667L15.834 12.5"
|
||||
stroke="#4F46E5"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
90
src/components/InvitationModal.jsx
Normal file
90
src/components/InvitationModal.jsx
Normal file
|
|
@ -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 }) => (
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, zIndex: 50 }}
|
||||
animate={{ opacity: 1, zIndex: 50 }}
|
||||
transition={{ duration: 0.1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<div
|
||||
className="w-full h-full bg-customDarkBgTransparentDarker fixed top-0 left-0 flex z-50 justify-center items-center"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<div
|
||||
className="w-full h-screen sm:h-auto sm:w-3/4 md:w-3/5 lg:w-[1000px] xl:w-[1100px] sm:rounded-2xl bg-customDarkBgTransparentLighter custom-border-gray-darker py-12 px-8 sm:px-16 backdrop-blur-xl fixed sm:mb-8 fixed mx-auto z-50"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex relative">
|
||||
<div className="w-1/2 hidden lg:inline">
|
||||
<h2 className="mt-6 mb-2 text-5xl font-bold tracking-normal text-white">
|
||||
Subscribe Now
|
||||
</h2>
|
||||
<h2 className="text-5xl font-bold tracking-normal text-customSecondary">
|
||||
Winter is coming
|
||||
</h2>
|
||||
|
||||
<ul className="mb-6 text-white mt-12">
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="w-full lg:w-1/2 flex items-center flex-col justify-center pt-24 sm:pt-0">
|
||||
<div className="flex inline lg:hidden justify-start items-center grow basis-0 mb-8 pr-6">
|
||||
<div className="text-white mr-2 text-8xl">
|
||||
<DragonsChildLogo />
|
||||
</div>
|
||||
<div className="text-white font-['Inter'] font-bold text-3xl">
|
||||
DragonsChild
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="mb-7 text-2xl text-white font-bold leading-snug text-center">
|
||||
Join 3,953 other developers
|
||||
</h3>
|
||||
<div className="flex flex-wrap -m-2">
|
||||
<div className="w-full sm:w-4/5 p-2 mx-auto">
|
||||
<input
|
||||
className="px-4 py-4 w-full text-gray-500 font-medium text-center placeholder-gray-500 outline-none border bg-gray-300 border-gray-300 rounded-lg focus:ring focus:ring-indigo-300"
|
||||
id="newsletterInput3-1"
|
||||
type="text"
|
||||
placeholder="Your email address"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full sm:w-4/5 p-2 mt-4 mx-auto">
|
||||
<button
|
||||
className="py-4 px-6 w-full text-white font-semibold rounded-xl shadow-4xl focus:ring focus:ring-indigo-300 bg-customPrimary hover:bg-[#7765e6] transition ease-in-out duration-200"
|
||||
type="button"
|
||||
>
|
||||
Join Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="fixed top-4 right-4 z-50 w-4 h-4 cursor-pointer"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<CloseIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
110
src/components/Navbar.jsx
Normal file
110
src/components/Navbar.jsx
Normal file
|
|
@ -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 (
|
||||
<nav className="w-full h-20 flex flex-col justify-center items-center fixed bg-customDarkBg1 lg:bg-customDarkBgTransparent z-40 lg:backdrop-blur-xl">
|
||||
<div className="2xl:w-[1280px] xl:w-10/12 w-11/12 flex justify-between items-center relative">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<a className="navbar-link" href="#home" aria-label="Home">
|
||||
<div className="flex justify-start items-center grow basis-0">
|
||||
<div className="text-white mr-1 text-6xl">
|
||||
<DragonsChildLogo />
|
||||
</div>
|
||||
<div className="text-white font-['Inter'] font-bold text-xl">
|
||||
anditCo
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<div className="hidden lg:flex h-full pl-12 pb-2">
|
||||
<a className="navbar-link" href="#home" aria-label="Home">
|
||||
Home
|
||||
</a>
|
||||
<a className="navbar-link" href="#features" aria-label="Features">
|
||||
Features
|
||||
</a>
|
||||
<a className="navbar-link" href="https://social.valkyriecoms.com/@Dragonschildhosting" aria-label="Feedback">
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
</motion.div>
|
||||
<div
|
||||
className="lg:hidden flex flex-col px-2 py-3 border-solid border border-gray-600 rounded-md cursor-pointer hover:bg-customDarkBg2"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
<div className="w-5 h-0.5 bg-gray-500 mb-1"></div>
|
||||
<div className="w-5 h-0.5 bg-gray-500 mb-1"></div>
|
||||
<div className="w-5 h-0.5 bg-gray-500 "></div>
|
||||
</div>
|
||||
</div>
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<div
|
||||
className="flex flex-col mt-16 lg:hidden absolute top-4 left-0 bg-customDarkBg1 z-50 w-full
|
||||
items-center gap-10 pb-10 border-y border-solid border-customDarkBg3 pt-10
|
||||
"
|
||||
>
|
||||
<a
|
||||
className="navbar-link"
|
||||
href="#home"
|
||||
onClick={() => setIsOpen(false)}
|
||||
aria-label="Home"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<a
|
||||
className="navbar-link"
|
||||
href="#features"
|
||||
onClick={() => setIsOpen(false)}
|
||||
aria-label="sFeatures"
|
||||
>
|
||||
Features
|
||||
</a>
|
||||
<a
|
||||
className="navbar-link"
|
||||
href="#feedback"
|
||||
onClick={() => setIsOpen(false)}
|
||||
aria-label="Feedback"
|
||||
>
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in a new issue