Skip to content

animated particles, hover animations, fixed some responsive issues #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iamvishnuks merged 3 commits into from
Dec 26, 2023
Merged

animated particles, hover animations, fixed some responsive issues #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3db338a
animated particles, hover animations, fixed some responsive issues
itzzFirenze Dec 22, 2023
2e5e6ad
added the flexbox animation and fixed some responsive issues
itzzFirenze Dec 24, 2023
77fca14
removed screenshot and other some fix
itzzFirenze Dec 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
229 changes: 229 additions & 0 deletions app/globals.css
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 12 additions & 0 deletions app/icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion app/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import './globals.css'
const inter = Inter({ subsets: ['latin'] })

export const metadata = {
title: 'Create Next App',
title: 'Xmigrate',
description: 'Generated by create next app',
}

Expand Down
12 changes: 9 additions & 3 deletions app/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,24 @@ const page = () => {
return (
<div className='bg-color scroll-smooth'>
<div className="grad">
<div className="backgroundContainer">
<div className="animation-wrapper">
<div className="particle particle-1"></div>
<div className="particle particle-2"></div>
{/* <div class="particle particle-3"></div> */}
{/* <div class="particle particle-4"></div> */}
{/* <div className="backgroundContainer"> */}
<Navbar />
<Hero />
<Grid />
<Flexbox />
<Flexbox />
{/* <Bottom /> */}
<Faq />
<Faq />
<div ref={newsletterRef}>
<Newsletter />
</div>
<About />
<Footer />
{/* </div> */}
</div>
</div>
</div>
Expand Down
31 changes: 13 additions & 18 deletions components/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,39 +15,34 @@ const About = () => {
const { ref: t6, inView: aboutVisible6 } = useInView();
return (
<div>
<div className="flex flex-row items-stretch justify-between gap-5 px-5 max-md:flex-wrap max-md:justify-between mx-0 sm:mx-[125px] mt-[200px] select-none">
<div className="flex basis-[0%] flex-col items-stretch self-start">
<motion.div ref={t1} initial={{ opacity: 0, y: -40 }} animate={aboutVisible1 ? { opacity: 1, y: 0 } : { opacity: 0 }} transition={{ duration: 0.6 }} className="justify-center text-xl leading-8 tracking-wide bg-clip-text whitespace-nowrap text-indigo-100">
Get started
</motion.div>
<motion.a ref={t2} initial={{ opacity: 0, y: -40 }} animate={aboutVisible2 ? { opacity: 1, y: 0 } : { opacity: 0 }} transition={{ duration: 0.6 }} href='#contact' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-12 max-md:mt-10 cursor-pointer">
<div className="flex flex-row items-stretch justify-between gap-5 px-5 max-md:flex-wrap max-md:justify-between mx-0 sm:mx-[125px] mt-[200px] select-none">
<div className="flex flex-col md:flex-row basis-[0%] gap-3 items-stretch self-start">
<motion.a ref={t2} initial={{ opacity: 0, y: -40 }} animate={aboutVisible2 ? { opacity: 1, y: 0 } : { opacity: 0 }} transition={{ duration: 0.6 }} href='#contact' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap cursor-pointer">
Create Account
</motion.a>
<motion.a ref={t3} initial={{ opacity: 0, y: -40 }} animate={aboutVisible3 ? { opacity: 1, y: 0 } : { opacity: 0 }} transition={{ duration: 0.6 }} href='#contact' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-7 cursor-pointer">
<motion.a ref={t3} initial={{ opacity: 0, y: -40 }} animate={aboutVisible3 ? { opacity: 1, y: 0 } : { opacity: 0 }} transition={{ duration: 0.6 }} href='#contact' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap cursor-pointer">
Sign In
</motion.a>
</div>
<div className='flex flex-row gap-[110px]'>
<div className="flex basis-[0%] flex-col items-stretch">
<motion.div ref={t1} initial={{ opacity: 0, y: -40 }} animate={aboutVisible1 ? { opacity: 1, y: 0 } : { opacity: 0 }} transition={{ duration: 0.6 }} className="justify-center text-xl leading-8 tracking-wide bg-clip-text whitespace-nowrap text-indigo-100">
Navigation
</motion.div>
<motion.a ref={t2} initial={{ opacity: 0, y: -40 }} animate={aboutVisible2 ? { opacity: 1, y: 0 } : { opacity: 0 }} transition={{ duration: 0.6 }} href='#home' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-11 max-md:mt-10 cursor-pointer">

<div className='flex flex-col md:flex-row gap-5 items-start '>

<motion.a ref={t2} initial={{ opacity: 0, y: -40 }} animate={aboutVisible2 ? { opacity: 1, y: 0 } : { opacity: 0 }} transition={{ duration: 0.6 }} href='#home' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap cursor-pointer">
Home
</motion.a>
<motion.a ref={t3} initial={{ opacity: 0, y: -40 }} animate={aboutVisible3 ? { opacity: 1, y: 0 } : { opacity: 0 }} transition={{ duration: 0.6 }} href='#home' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-7 cursor-pointer">
<motion.a ref={t3} initial={{ opacity: 0, y: -40 }} animate={aboutVisible3 ? { opacity: 1, y: 0 } : { opacity: 0 }} transition={{ duration: 0.6 }} href='#home' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap cursor-pointer">
About
</motion.a>
<motion.a ref={t4} initial={{ opacity: 0, y: -40 }} animate={aboutVisible4 ? { opacity: 1, y: 0 } : { opacity: 0 }} transition={{ duration: 0.6 }} href='#features' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-7 cursor-pointer">
<motion.a ref={t4} initial={{ opacity: 0, y: -40 }} animate={aboutVisible4 ? { opacity: 1, y: 0 } : { opacity: 0 }} transition={{ duration: 0.6 }} href='#features' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap cursor-pointer">
Features
</motion.a>
<motion.a ref={t5} initial={{ opacity: 0, y: -40 }} animate={aboutVisible5 ? { opacity: 1, y: 0 } : { opacity: 0 }} transition={{ duration: 0.6 }} href='https://docs.xmigrate.cloud/en/latest/' target='_blank' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-7 cursor-pointer">
<motion.a ref={t5} initial={{ opacity: 0, y: -40 }} animate={aboutVisible5 ? { opacity: 1, y: 0 } : { opacity: 0 }} transition={{ duration: 0.6 }} href='https://docs.xmigrate.cloud/en/latest/' target='_blank' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap cursor-pointer">
Docs
</motion.a>
<motion.a ref={t6} initial={{ opacity: 0, y: -40 }} animate={aboutVisible6 ? { opacity: 1, y: 0 } : { opacity: 0 }} transition={{ duration: 0.6 }} href='#contact' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-6 cursor-pointer">
<motion.a ref={t6} initial={{ opacity: 0, y: -40 }} animate={aboutVisible6 ? { opacity: 1, y: 0 } : { opacity: 0 }} transition={{ duration: 0.6 }} href='#contact' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap cursor-pointer">
Contact
</motion.a>
</div>

{/* <div className="self-start max-md:max-w-full">
<div className="gap-5 flex max-md:items-stretch max-md:gap-0">
<div className="flex flex-col items-stretch w-[42%] max-md:w-full max-md:ml-0">
Expand Down
2 changes: 1 addition & 1 deletion components/Bottom.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Image from 'next/image'
const Bottom = () => {
return (
<div>
<div className="flex justify-between gap-5 items-center max-md:flex-wrap mt-[175px]">
<div className="flex justify-between gap-5 items-center max-md:flex-wrap mt-[175px] select-none">
<div className="flex grow basis-[0%] flex-col px-5 items-start lg:pl-[120px]">
<div className="bg-indigo-200 bg-opacity-0 flex w-[133px] max-w-full flex-col justify-center items-stretch rounded-[60px]">
<div className="text-indigo-300 text-center text-base leading-5 tracking-wide whitespace-nowrap border justify-center items-stretch px-5 py-2 rounded-[60px] border-solid border-indigo-300 border-opacity-40 pl-[17px] pr-[17px] inner-shadow">
Expand Down
40 changes: 20 additions & 20 deletions components/Faq.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Faq = () => {
},
{
question: 'Does xmigrate supports real time data replication?',
answer: 'Yes, it does support real time data replication',
answer: 'Yes, it does support real time data replication.',
},
{
question: 'Does xmigrate supports windows server migration?',
Expand All @@ -31,53 +31,53 @@ const Faq = () => {
question: 'What is the pricing of this product?',
answer: 'Currently this will be provided free of cost for the beta users. Pricing will be updated during the official release.',
}

];
const [expandedIndex, setExpandedIndex] = useState(null);
const handleToggleExpansion = (index) => {
setExpandedIndex((prevIndex) => (prevIndex === index ? null : index));
};
return (
<div className="flex justify-between gap-5 items-start max-md:flex-wrap mt-[210px] mx-1 sm:mx-[100px]">
<div className="flex justify-between gap-5 items-start max-md:flex-wrap mt-[210px] mx-1 sm:mx-[100px] select-none">
<motion.div ref={s1} initial={{ opacity: 0, x: -50 }} animate={faqVisible1 ? { opacity: 1, x: 0 } : { opacity: 0 }} transition={{ duration: 0.8 }} className="flex grow basis-[0%] flex-col px-5 items-start">
<div className="shadow-2xl backdrop-blur-[7.5px] bg-indigo-200 bg-opacity-0 flex aspect-[1.83] flex-col justify-center items-stretch rounded-[60px]">
<div className="justify-center text-indigo-300 text-center text-base leading-5 tracking-wide border aspect-[1.83] items-stretch px-5 py-3 rounded-[60px] border-solid border-indigo-300 border-opacity-40 inner-shadow">
FAQ
</div>
</div>
<div className="justify-center text-5xl leading-[60px] tracking-tight bg-clip-text self-stretch mt-9 max-md:text-4xl max-md:leading-[56px] text-white">
<span className="text-violet-200 text-5xl font-bold font-['Inter'] leading-[60px]">Frequently Asked</span>
<span className="text-violet-300 text-5xl font-bold font-['Inter'] leading-[60px]"> <br /></span>
<span className="text-violet-300 text-5xl font-bold font-['Inter'] leading-[60px]">Questions</span>
<div className="justify-center max-w-xl text-5xl leading-[60px] tracking-tight bg-clip-text self-stretch mt-9 max-md:text-4xl max-md:leading-[56px]">
<span className="bg-gradient-to-b from-indigo-50 to-indigo-300 inline-block text-transparent bg-clip-text text-5xl font-bold leading-[60px]">Frequently Asked Questions</span>
{/* <span className="text-violet-300 text-5xl font-bold leading-[60px]"> <br /></span> */}
{/* <span className="text-violet-300 text-5xl font-bold leading-[60px]">Questions</span> */}
</div>
</motion.div>
<motion.div ref={s1} initial={{ opacity: 0, x: 50 }} animate={faqVisible1 ? { opacity: 1, x: 0 } : { opacity: 0, x:0 }} transition={{ duration: 0.8 }} className="flex grow basis-[0%] flex-col items-stretch mt-2.5 text-6xl">
<motion.div ref={s1} initial={{ opacity: 0, x: 50 }} animate={faqVisible1 ? { opacity: 1, x: 0 } : { opacity: 0, x: 0 }} transition={{ duration: 0.8 }} className="flex grow basis-[0%] flex-col items-stretch mt-2.5 text-6xl">
{faqData.map((item, index) => (
<div key={index} className="mb-3"> {/* Added margin bottom to create separation */}
<div className="flex items-center justify-between gap-5 px-5 max-md:max-w-full max-md:flex-wrap cursor-pointer">
<div
className={`justify-center text-violet-300 text-lg leading-8 tracking-wide max-w-[300px] sm:max-w-full grow my-6 ${expandedIndex === index ? 'text-indigo-200' : ''
className={`justify-center text-violet-200 text-lg leading-8 tracking-wide max-w-[300px] sm:max-w-full grow my-6 ${expandedIndex === index ? 'text-indigo-50' : ''
}`}
onClick={() => handleToggleExpansion(index)}
>
{item.question}
</div>
<button onClick={() => handleToggleExpansion(index)}>
<div onClick={() => handleToggleExpansion(index)}>
<img
loading="lazy"
src="/icons/expand.svg"
className={`aspect-square object-contain object-center w-11 justify-center items-center overflow-hidden self-stretch shrink-0 max-w-full ${expandedIndex === index ? 'transform rotate-45' : ''
}`}
className={`
aspect-square object-contain object-center w-11 justify-center items-center overflow-hidden self-stretch shrink-0 max-w-full
transition-transform duration-200 ease-in-out transform ${expandedIndex === index ? 'rotate-45' : ''}`}
/>
</button>
</div>
</div>
{expandedIndex === index && (
<div className="justify-center text-violet-100 text-lg leading-8 tracking-wide grow mb-6 mt-4 px-5 max-w-2xl">
{item.answer}
<div className="bg-indigo-300 bg-opacity-40 flex shrink-0 h-0.5 flex-col mt-2.5 max-md:max-w-full max-md:mt-1 my-6"/>
</div>

<div className="justify-center text-violet-100 text-lg leading-8 tracking-wide grow mb-6 mt-4 px-5 max-w-2xl">
{item.answer}
<div className="bg-indigo-300 bg-opacity-40 flex shrink-0 h-0.5 flex-col mt-2.5 max-md:max-w-full max-md:mt-1 my-6" />
</div>

)}
</div>
))}
Expand Down
Loading