diff --git a/app/globals.css b/app/globals.css index 2edf31f..8b142da 100644 --- a/app/globals.css +++ b/app/globals.css @@ -8,6 +8,7 @@ box-sizing: border-box; /* overflow-x:visible; */ } + .backgroundContainer { background-image: url('/image/bg.png'); diff --git a/app/page.js b/app/page.js index 4959bcb..aa12775 100644 --- a/app/page.js +++ b/app/page.js @@ -14,13 +14,13 @@ import React, { useRef } from 'react'; const page = () => { const newsletterRef = useRef(); return ( -
+
- + - + {/* */}
diff --git a/components/About.jsx b/components/About.jsx index 028424d..74f69e4 100644 --- a/components/About.jsx +++ b/components/About.jsx @@ -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 (
-
+
-
+ Navigation -
- + + Home - - + + About - - + + Features - - + + Docs - - + + Contact - +
{/*
diff --git a/components/Faq.jsx b/components/Faq.jsx index 84d75f7..46ce96b 100644 --- a/components/Faq.jsx +++ b/components/Faq.jsx @@ -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 ( -
-
+
+
FAQ
- Frequently Asked
Questions -
-
-
-
-
- How can I get started with your
SaaS platform? -
- + Frequently Asked +
+ Questions
-
-
-
- How many projects does your
cloud contains? + + + {faqData.map((item, index) => ( +
{/* Added margin bottom to create separation */} +
+
handleToggleExpansion(index)} + > + {item.question} +
+ +
+ {expandedIndex === index && ( + +
+ {item.answer} +
+
+ + )}
- -
-
-
-
- Is it possible to change layout? -
- -
-
-
-
- Can you help me with the build? -
- -
-
-
-
- What is the pricing of this product? -
- -
-
+ ))} +
- ) -} - -export default Faq \ No newline at end of file + ); +}; +export default Faq; \ No newline at end of file diff --git a/components/Flexbox.jsx b/components/Flexbox.jsx index d25afc0..964b718 100644 --- a/components/Flexbox.jsx +++ b/components/Flexbox.jsx @@ -1,12 +1,20 @@ +"use client"; + import React from 'react' import Image from 'next/image' +import { motion } from "framer-motion"; +import { useInView } from 'react-intersection-observer'; const Flexbox = () => { + const { ref: f1, inView: flexVisible1 } = useInView(); + const { ref: f2, inView: flexVisible2 } = useInView(); + const { ref: f3, inView: flexVisible3 } = useInView(); + const { ref: f4, inView: flexVisible4 } = useInView(); return ( -
-
+
+ {/*
*/} -
+
{/*
*/}
New Update:
AI Integration
@@ -17,58 +25,67 @@ const Flexbox = () => { height={18} className='object-contain' /> -
+
-
-
Supercharge your limits
-
Xmigrate team invite everyone togive this tool a try and give feedback.
We are inviting each one of your contribution
+ + Supercharge your limits + Xmigrate team invite everyone togive this tool a try and give feedback.
We are inviting each one of your contribution
-
+
-
- {/* */}
-
-
- -
- Modern and
- Beautiful UI -
-
- Create stunning, -
-
- professional-quality
- websites +
+
+ + {/*
*/} +
+ {/* */} +
+ Supports migration of all the major Linux operating systems +
+
+ Get servers restored to any of the supported cloud which performs as same as servers build and deployed natively on cloud +
+ {/* Additional content */}
-
-
+ {/*
*/} +
-
-
+
-
+
Real time team chat
- Create stunning, professional- + Minimize your RPO with real time
- quality websites + data replication
-
-
+ + {
xmigrate
-
+
-
-
-
-
- +
+ {/*
*/} +
+ {/* -
- Modern and
- Beautiful UI + /> */} +
+ Best user experience
-
- Create stunning, +
+ You don't need to be a migration specialist anymore. Be it a junior engineer, do the migrations at ease.
-
+ {/*
professional-quality
websites -
+
*/}
-
+ {/*
*/}
-
+
-
+ {/*
-
+
- {/* */}
@@ -141,14 +157,9 @@ const Flexbox = () => {
-
-
+ +
- {/* */}
@@ -173,9 +184,9 @@ const Flexbox = () => {
-
+
-
+
*/}
diff --git a/components/Footer.jsx b/components/Footer.jsx index 1794723..8064f1f 100644 --- a/components/Footer.jsx +++ b/components/Footer.jsx @@ -1,10 +1,15 @@ +"use client"; + import React from 'react' import Image from 'next/image' +import { motion } from "framer-motion"; +import { useInView } from 'react-intersection-observer'; const Footer = () => { + const { ref: t1, inView: footerVisible1 } = useInView(); return ( -
- +
+ logo { height={20} className='object-contain' /> - - + + {/* logo { height={20} className='object-contain' /> - - + */} + logo { height={20} className='object-contain' /> - - + + {/* logo { height={20} className='object-contain' /> - -
+ */} +
2023 All rights reserved
diff --git a/components/Grid.jsx b/components/Grid.jsx index 6ee2ecf..f557615 100644 --- a/components/Grid.jsx +++ b/components/Grid.jsx @@ -1,33 +1,43 @@ -import React from 'react' +"use client"; + +import { React } from 'react' import Image from 'next/image' import { FaMapMarkedAlt } from "react-icons/fa"; import { FaArrowUpWideShort } from "react-icons/fa6"; - +import { motion } from "framer-motion"; +import { useInView } from 'react-intersection-observer'; const Grid = () => { - return ( -
-
-
- -
-
-
- logo -
-
-
Data Privacy
-
Xmigrate tool will be deployed in your environment and no data is send to any third party for any purpose
-
+ const { ref: s1, inView: gridVisible1 } = useInView(); + const { ref: s2, inView: gridVisible2 } = useInView(); + const { ref: s3, inView: gridVisible3 } = useInView(); + const { ref: s4, inView: gridVisible4 } = useInView(); + const { ref: s5, inView: gridVisible5 } = useInView(); + const { ref: s6, inView: gridVisible6 } = useInView(); + const { ref: s7, inView: gridVisible7 } = useInView(); + const { ref: s8, inView: gridVisible8 } = useInView(); + const { ref: s9, inView: gridVisible9 } = useInView(); + const { ref: s10, inView: gridVisible10 } = useInView(); + return ( +
+
+ + {/*
*/} +
+ logo
-
-
+
+
Data Privacy
+
Xmigrate tool will be deployed in your environment and no data is send to any third party for any purpose
+
+ +
{
Migration of Linux VM's
Xmigrate has the capability to migrate Linux VM's from onprem to cloud or cloud to cloud
-
-
+ +
{
Agentless Migration
Xmigrate doesn't need any agents to be installed on the VM's which needs to be migrated
-
+
-
+
{
Environment Footprinting
Efficiently discover the environment of the hosts which needs to be migrated
-
-
+ +
@@ -82,8 +92,8 @@ const Grid = () => {
Blueprint Dashboard
Design the Cloud environment easily from Blueprint console with footprint data
-
-
+ +
{
Manage environments
Create and manage multiple environments by creating multiple projects in Xmigrate
-
+
-
+ +
{ height={30} className='object-contain' /> -
- +
+
+
Premium
+
+
+
Interrupt Handling
Capability to resume your failed migration from last successful checkpoints
-
-
-
- + + +
+
+ +
+
+
+
Premium
+
+
Bandwidth Control
Control bandwidth usage while you are migrating your servers
-
-
-
- logo + + +
+
+ logo +
+
+
+
Coming soon
+
+
Windows migration
Migration of IIS windows servers will be supported in xmigrate soon
-
+
-
-
- logo + +
+
+ logo +
+
+
+
Coming soon
+
+
Live migration
Be DR ready with xmigrates cutting edge live migration tech
-
+
-
) } diff --git a/components/Hero.jsx b/components/Hero.jsx index 9a46304..d9cccea 100644 --- a/components/Hero.jsx +++ b/components/Hero.jsx @@ -1,12 +1,19 @@ -import React from 'react' +"use client"; + +import { React } from 'react' +import { useInView } from 'react-intersection-observer'; import Image from 'next/image' +import { motion } from "framer-motion" const Hero = () => { + const { ref: t1, inView: elementVisible1 } = useInView(); + const { ref: t2, inView: elementVisible2 } = useInView(); + const { ref: t3, inView: elementVisible3 } = useInView(); return ( -
+
{/*
*/} -
+ {/*
*/}
New Update:
AI Integration
@@ -18,38 +25,37 @@ const Hero = () => { className='object-contain' />
-
- +
{/*
*/}
-
An Open-source Cross Cloud Migration Tool
-
Xmigrate(pronounced as cross-migrate) is an opensource tool for migrating your VM'sfrom anywhere to cloud and cloud to anywhere seamlessly.
+ An Opensource Cross Cloud Migration Tool + Xmigrate(pronounced as cross-migrate) is an opensource tool for migrating your VM'sfrom anywhere to cloud and cloud to anywhere seamlessly.
- - +
-
Xmigrate supports all three major public cloud providers
+ Xmigrate supports migration to all 3 major public cloud providers
-
+ + /> { src="/icons/azure.svg" className="object-contain object-center flex fill-indigo-300 overflow-hidden shrink-0 max-w-full self-start" /> -
-
We are rigourosly testing and rolling out updates to our Xmigrate tool every week. Xmigrate team invite everyone to give this tool a try and give feedback.
+ + Our block level replication of disk enables seamless migration of any type of workloads that are running on a VM.
-
Empower your cloud migration
-
Xmigrate team invite everyone to give this tool a try and give feedback.
+ Don't settle on
one cloud,
have a hybrid strategy for recovery +
//
//
diff --git a/components/Navbar.jsx b/components/Navbar.jsx index 906c461..b428e08 100644 --- a/components/Navbar.jsx +++ b/components/Navbar.jsx @@ -1,36 +1,57 @@ -// import React from 'react' -import React, { useRef, useEffect } from 'react'; +"use client"; + +import { React, useState } from 'react' +//import React, { useRef, useEffect } from 'react'; import Image from 'next/image' import Link from 'next/link'; +import { AiOutlineMenu, AiOutlineClose } from 'react-icons/ai' const Navbar = () => { - const newsletterRef = useRef(); - - useEffect(() => { - const handleScrollToNewsletter = () => { - if (newsletterRef.current) { - newsletterRef.current.scrollIntoView({ behavior: 'smooth' }); - } - }; - - // Attach the event listener for the Contact link - const contactLink = document.getElementById('contact-link'); - if (contactLink) { - contactLink.addEventListener('click', handleScrollToNewsletter); - } + const [menuOpen, setMenuOpen] = useState(false) - // Remove the event listener when the component is unmounted - return () => { - if (contactLink) { - contactLink.removeEventListener('click', handleScrollToNewsletter); - } - }; - }, []); + const handleNav = () => { + setMenuOpen(!menuOpen); + } return ( -