Skip to content

added animation #8

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
akhilprakash634 merged 2 commits into from
Dec 15, 2023
Merged

added animation #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
13b3cf7
done with kevin, akhil, mathews
itzzFirenze Dec 15, 2023
ea0dc86
fix newsletter.jsx
itzzFirenze Dec 15, 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
1 change: 1 addition & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
box-sizing: border-box;
/* overflow-x:visible; */
}


.backgroundContainer {
background-image: url('/image/bg.png');
Expand Down
6 changes: 3 additions & 3 deletions app/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ import React, { useRef } from 'react';
const page = () => {
const newsletterRef = useRef();
return (
<div className='bg-color'>
<div className='bg-color scroll-smooth'>
<div className="grad">
<div className="backgroundContainer">
<Navbar />
<Navbar />
<Hero />
<Grid />
<Flexbox />
<Flexbox />
{/* <Bottom /> */}
<Faq />
<div ref={newsletterRef}>
Expand Down
50 changes: 30 additions & 20 deletions components/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,52 @@
"use client";

import React from 'react'
// import { Link } from 'react-scroll'
import { motion } from "framer-motion";
import { useInView } from 'react-intersection-observer';
//import { Link } from 'react-scroll'
import Link from 'next/link';

const About = () => {
const { ref: t1, inView: aboutVisible1 } = useInView();
const { ref: t2, inView: aboutVisible2 } = useInView();
const { ref: t3, inView: aboutVisible3 } = useInView();
const { ref: t4, inView: aboutVisible4 } = useInView();
const { ref: t5, inView: aboutVisible5 } = useInView();
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]">
<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">
<div className="justify-center text-xl leading-8 tracking-wide bg-clip-text whitespace-nowrap text-indigo-100">
<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
</div>
<a href='#create' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-12 max-md:mt-10">
</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">
Create Account
</a>
<a href='#signin' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-7">
</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">
Sign In
</a>
</motion.a>
</div>
<div className='flex flex-row gap-[110px]'>
<div className="flex basis-[0%] flex-col items-stretch">
<div className="justify-center text-xl leading-8 tracking-wide bg-clip-text whitespace-nowrap text-indigo-100">
<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
</div>
<a 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">
</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">
Home
</a>
<a href='#home' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-7">
</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">
About
</a>
<a href='#features' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-7">
</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">
Features
</a>
<a 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">
</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">
Docs
</a>
<Link href='#contact' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-6">
</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">
Contact
</Link>
</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">
Expand Down
150 changes: 76 additions & 74 deletions components/Faq.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,88 @@
import React from 'react'
"use client"

import React, { useState } from 'react';
import { motion } from "framer-motion";
import { useInView } from 'react-intersection-observer';

const Faq = () => {
const { ref: s1, inView: faqVisible1 } = useInView();
const faqData = [
{
question: 'How to get enrolled as a beta user?',
answer: 'Get registered here and we will contact you soon.',
},
{
question: 'How can I get started with your SaaS platform?',
answer: 'Please join the waiting list by registering here.',
},
{
question: 'Does xmigrate supports real time data replication?',
answer: 'Yes, it does support real time data replication',
},
{
question: 'Does xmigrate supports windows server migration?',
answer: 'At the moment xmigrate only support linux operating systems.',
},
{
question: 'Can we get support during beta phase?',
answer: 'Yes.',
},
{
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-5 sm:mx-[100px]">
<div className="flex grow basis-[0%] flex-col px-5 items-start">
<div className="flex justify-between gap-5 items-start max-md:flex-wrap mt-[210px] mx-1 sm:mx-[100px]">
<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>
</div>
<div className="flex grow basis-[0%] flex-col items-stretch mt-2.5 max-md:max-w-full">
<div className="flex items-center justify-between gap-5 px-5 max-md:max-w-full max-md:flex-wrap">
<div className="justify-center text-violet-200 text-lg leading-8 tracking-wide grow whitespace-nowrap my-auto">
How can I get started with your<br className='sm:hidden block'/> SaaS platform?
</div>
<button id="dropdownMenuButton1" className='collapsible'>
<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"
/>
</button>
<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>
<div className="bg-indigo-300 bg-opacity-40 flex shrink-0 h-0.5 flex-col mt-11 max-md:max-w-full max-md:mt-10" />
<div className="flex items-center justify-between gap-5 mt-11 px-5 max-md:max-w-full max-md:flex-wrap max-md:mt-10">
<div className="justify-center text-violet-200 text-lg leading-8 tracking-wide grow whitespace-nowrap my-auto">
How many projects does your<br className='sm:hidden block'/> cloud contains?
</motion.div>
<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 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' : ''
}`}
onClick={() => handleToggleExpansion(index)}
>
{item.question}
</div>
<button 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' : ''
}`}
/>
</button>
</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>
<button>
<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"
/>
</button>
</div>
<div className="bg-indigo-300 bg-opacity-40 flex shrink-0 h-0.5 flex-col mt-11 max-md:max-w-full max-md:mt-10" />
<div className="flex items-center justify-between gap-5 mt-11 px-5 max-md:max-w-full max-md:flex-wrap max-md:mt-10">
<div className="justify-center text-violet-200 text-lg leading-8 tracking-wide grow whitespace-nowrap my-auto">
Is it possible to change layout?
</div>
<button>
<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"
/>
</button>
</div>
<div className="bg-indigo-300 bg-opacity-40 flex shrink-0 h-0.5 flex-col mt-11 max-md:max-w-full max-md:mt-10" />
<div className="flex items-center justify-between gap-5 mt-11 px-5 max-md:max-w-full max-md:flex-wrap max-md:mt-10">
<div className="justify-center text-violet-200 text-lg leading-8 tracking-wide grow whitespace-nowrap my-auto">
Can you help me with the build?
</div>
<button>
<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"
/>
</button>
</div>
<div className="bg-indigo-300 bg-opacity-40 flex shrink-0 h-0.5 flex-col mt-11 max-md:max-w-full max-md:mt-10" />
<div className="flex items-center justify-between gap-5 mt-11 px-5 max-md:max-w-full max-md:flex-wrap max-md:mt-10">
<div className="justify-center text-violet-200 text-lg leading-8 tracking-wide grow whitespace-nowrap my-auto">
What is the pricing of this product?
</div>
<button>
<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"
/>
</button>
</div>
</div>
))}
</motion.div>
</div>
)
}

export default Faq
);
};
export default Faq;
Loading