-
-
- {images.map((image, index) => {
- if (index === currentSlide) {
- return (
-
-
-
-
-
- {images.map((_, index) => (
-
{
- setCurrentSlide(index);
- }}
- />
- ))}
-
-
- );
-};
-export default Carousel;
diff --git a/sections/ContactUs.jsx b/sections/ContactUs.jsx
deleted file mode 100644
index cd76e11f1..000000000
--- a/sections/ContactUs.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-import styles from '../styles';
-import Form from '../components/Form';
-import { fadeIn, staggerContainer, zoomIn } from '../utils/motion';
-
-const ContactUs = () => (
-
-
-
-
-
-
- Contact Us
-
-
- Get Quotation for free!!
-
-
- “With the development of today's technology, metaverse is very
- useful for today's work, or can be called web 3.0. by using
- metaverse you can use it as anything”
-
*/}
-
- {/* */}
-
-
-
-
-
-
- {/*
-
-
-
-);
-
-export default ContactUs;
diff --git a/sections/EshVision.jsx b/sections/EshVision.jsx
deleted file mode 100644
index 17490d23d..000000000
--- a/sections/EshVision.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { motion } from 'framer-motion';
-import { TitleText } from '../components';
-
-import styles from '../styles';
-import { fadeIn, staggerContainer } from '../utils/motion';
-
-const EshVision = () => (
-
-
-
- EshVision}
- textStyles="text-center"
- />
-
-
-
- {/* EshVision */}
- {' '}Empowering developers with comprehensive free training,
- hands-on projects, and paid freelancing opportunities for a successful
- career in development. Join us to gain valuable skills, build your portfolio,
- and earn while learning. Take the leap into a thriving development career with
- EshVision. Register now :
- madness of the metaverse
- {' '}
- of today, using only{' '}
- VR devices you can
- easily explore the metaverse world you want, turn your dreams into
- reality. Let's{' '}
- explore the madness
- of the metaverse by scrolling down */}
-
-
-
-
-);
-
-export default EshVision;
diff --git a/sections/EshVisionHero.jsx b/sections/EshVisionHero.jsx
deleted file mode 100644
index e58637068..000000000
--- a/sections/EshVisionHero.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import Link from 'next/link';
-import styles from '../styles';
-import { slideIn, staggerContainer, textVariant } from '../utils/motion';
-
-// const headingss = `
-// text-white font-bold lg:text-[34px] md:text-[100px] sm:text-[60px] text-[44px] uppercase '
-// `;
-const EshVisionHero = () => (
-
-
-
-
-
- EshVision
-
-
-
- Freelancer Development Program | Unlock Your Potential | 15th August
-
-
-
-
-
-
-
-
-
-
-
-
-
- Explore
- */}
-
-
-);
-
-export default EshVisionHero;
diff --git a/sections/Explore.jsx b/sections/Explore.jsx
deleted file mode 100644
index 83fcb9c33..000000000
--- a/sections/Explore.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { motion } from 'framer-motion';
-
-import styles from '../styles';
-import { exploreWorlds } from '../constants';
-import { staggerContainer } from '../utils/motion';
-import { ExploreCard, TitleText, TypingText } from '../components';
-
-const Explore = () => {
- const [active, setActive] = useState('world-1');
-
- return (
-
-
- Meet our
- {exploreWorlds.map((world, index) => (
-
-
-
- );
-};
-
-export default Explore;
diff --git a/sections/Feedback.jsx b/sections/Feedback.jsx
deleted file mode 100644
index 68f85b181..000000000
--- a/sections/Feedback.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-import styles from '../styles';
-import { fadeIn, staggerContainer, zoomIn } from '../utils/motion';
-
-const Feedback = () => (
-
-
-
-
-
-
- Eshu
-
-
- Founder Eshway
-
-
- {/* “With the development of today's technology, metaverse is very
- useful for today's work, or can be called web 3.0. by using
- metaverse you can use it as anything” */}
- "Embark on a transformative journey with Eshway's groundbreaking free freelancer training program, EshVision, and unlock your full potential in the digital realm."
-
-
-
-
-
- {/*
-
-
-
-);
-
-export default Feedback;
diff --git a/sections/FeedbackCard.jsx b/sections/FeedbackCard.jsx
deleted file mode 100644
index f4c571ac7..000000000
--- a/sections/FeedbackCard.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-const FeedbackCard = ({ content, img }) => (
-
-
-
- {content}
-
- {/*
-
-
-
- {name}
-
-
- {title}
-
-
-
*/}
-
-);
-
-export default FeedbackCard;
diff --git a/sections/GetStarted.jsx b/sections/GetStarted.jsx
deleted file mode 100644
index 8f8d8e847..000000000
--- a/sections/GetStarted.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-import styles from '../styles';
-import { startingFeatures } from '../constants';
-import { StartSteps, TitleText, TypingText } from '../components';
-import { staggerContainer, fadeIn, planetVariants } from '../utils/motion';
-
-const GetStarted = () => (
-
-
-
-
-
- Get started with just a few clicks} />
-
- {startingFeatures.map((feature, index) => (
-
-
-
-
-);
-
-export default GetStarted;
diff --git a/sections/Hero.jsx b/sections/Hero.jsx
deleted file mode 100644
index f129b4a30..000000000
--- a/sections/Hero.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import Link from 'next/link';
-import styles from '../styles';
-import { slideIn, staggerContainer, textVariant } from '../utils/motion';
-
-// const headingss = `
-// text-white font-bold lg:text-[34px] md:text-[100px] sm:text-[60px] text-[44px] uppercase '
-// `;
-const Hero = () => (
-
-
-
-
-
- Eshway
-
-
-
- Transforming your digital landscape for a better tomorrow.
-
-
-
-
-
-
-
-
-
-
-
-
-
- Let's Talk
-
-
-
-);
-
-export default Hero;
diff --git a/sections/Insights.jsx b/sections/Insights.jsx
deleted file mode 100644
index a28b0dfe2..000000000
--- a/sections/Insights.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-import styles from '../styles';
-import { insights } from '../constants';
-import { staggerContainer } from '../utils/motion';
-import { InsightCard, TitleText, TypingText } from '../components';
-
-const Insights = () => (
-
-
- Insight about metaverse} textStyles="text-center" />
-
- {insights.map((item, index) => (
-
-
-
-);
-
-export default Insights;
diff --git a/sections/InterIITContactUs.jsx b/sections/InterIITContactUs.jsx
deleted file mode 100644
index 92b4a061e..000000000
--- a/sections/InterIITContactUs.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-import styles from '../styles';
-import { fadeIn, staggerContainer, zoomIn } from '../utils/motion';
-import InterIITForm from '../components/InterIITForm';
-
-const InterIITContactUs = () => (
-
-
-
-
-
-
- Contact Us
-
-
- Inter IIT Sports 2023
-
-
- {/* */}
-
-
-
- {/*
-
-
- */}
-
-
-);
-
-export default InterIITContactUs;
diff --git a/sections/Merch.jsx b/sections/Merch.jsx
deleted file mode 100644
index 989fae5f2..000000000
--- a/sections/Merch.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-import { Button } from '@mui/material';
-import Link from 'next/link';
-import styles from '../styles';
-import { fadeIn, staggerContainer, zoomIn } from '../utils/motion';
-
-const Merch = () => (
-
-
-
-
-
-
- Official Merchandise
-
-
- Eshway
-
-
- {/* “With the development of today's technology, metaverse is very
- useful for today's work, or can be called web 3.0. by using
- metaverse you can use it as anything” */}
- {/* "Embark on a transformative journey with Eshway's groundbreaking free freelancer training program, EshVision, and unlock your full potential in the digital realm." */}
- Embrace the Digital Vibe! 🚀 Elevate your style with our exclusive Eshway official T-shirt. Showcasing a sleek design and unbeatable comfort, this limited edition tee stands out. Get yours now!Buy Now
-
-
-
-
-
- {/*
-
-
-
-);
-
-export default Merch;
diff --git a/sections/Product.jsx b/sections/Product.jsx
deleted file mode 100644
index e130408ec..000000000
--- a/sections/Product.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-import { Button } from '@mui/material';
-import Link from 'next/link';
-import styles from '../styles';
-import { productDesc } from '../constants';
-import { StartSteps, TitleText, TypingText } from '../components';
-import { staggerContainer, fadeIn, planetVariants } from '../utils/motion';
-import Carousel from './Caraousel';
-
-const Product = (props) => {
- const { price } = props;
- return (
-
-
-
-
-
- Eshway Merchandise} />
-
- {productDesc.map((feature) => (
- Buy Now ₹{price}
-
-
-
-
- );
-};
-export default Product;
diff --git a/sections/Services.jsx b/sections/Services.jsx
deleted file mode 100644
index 27d2ed00f..000000000
--- a/sections/Services.jsx
+++ /dev/null
@@ -1,197 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import { TypingText } from '../components';
-import { feedback } from '../constants';
-
-import styles from '../styles';
-import { fadeIn, staggerContainer } from '../utils/motion';
-import FeedbackCard from './FeedbackCard';
-
-const About = () => (
-
-
-
-
- Metaverse is a new
- thing in the future, where you can enjoy the virtual world by feeling
- like it's really real, you can feel what you feel in this metaverse
- world, because this is really the{' '}
-
- madness of the metaverse
- {' '}
- of today, using only{' '}
- VR devices you can
- easily explore the metaverse world you want, turn your dreams into
- reality. Let's{' '}
- explore the madness
- of the metaverse by scrolling down
- */}
-
- {feedback.map((card) =>
-
-
content
-
-
-
-
-
-
-
-
-
content
-
-
-
-
-
-
-
-
-
content
-
-
-
-
-
-
-
-
-
content
-
-
-
-
-
-
-
-
-
content
-
-
-
-
-
-
-
-
-
content
-
-
-
-
-
-
-
-
-
content
-
-
-
-
-
-
-
-
-
content
-
-
-
-
-
-
-
-
-
content
-
-
-
-
-
-
-
-
-
-);
-
-export default About;
diff --git a/sections/ShopHero.jsx b/sections/ShopHero.jsx
deleted file mode 100644
index 859eb3437..000000000
--- a/sections/ShopHero.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import Link from 'next/link';
-import styles from '../styles';
-import { staggerContainer } from '../utils/motion';
-
-// const headingss = `
-// text-white font-bold lg:text-[34px] md:text-[100px] sm:text-[60px] text-[44px] uppercase '
-// `;
-const ShopHero = () => (
-
-
-
-
- {/*
-
Driven by Passion
-
Meet the Driven Minds Behind Formula Ashwariders
-
*/}
-
-
-
-
-
-
-
-
-
-
-
-
Eshway Merchandise ₹ 399
-
-
- {/*
-
-
-
-
-
-
-
Another Eshway Official Merchandise ₹ 350
-
-
*/}
- {/*
-
-
-
-
-
-
-
Another Eshway Official Merchandise ₹ 350
-
-
*/}
- {/*
-
-
-
-
-
-
-
Another Eshway Official Merchandise ₹ 350
-
-
*/}
-
-
-
-);
-
-export default ShopHero;
diff --git a/sections/Table.jsx b/sections/Table.jsx
deleted file mode 100644
index 8c55bac30..000000000
--- a/sections/Table.jsx
+++ /dev/null
@@ -1,310 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-// import { useState } from 'react';
-// import { Button, TextField } from '@mui/material';
-import { Button, TextField } from '@mui/material';
-import { useState } from 'react';
-import styles from '../styles';
-import { fadeIn, staggerContainer } from '../utils/motion';
-import { TypingText } from '../components';
-// import { eshvision } from '../constants';
-
-const Table = () => {
- const [completed, setCompleted] = useState(false);
- const [completedTwo, setCompletedTwo] = useState(false);
- const [completedThird, setCompletedThird] = useState(false);
- const [completedFourth, setCompletedFourth] = useState(false);
- const [ans, setAns] = useState();
- const [ans2, setAns2] = useState();
- const [ans3, setAns3] = useState();
- const [ans4, setAns4] = useState();
-
-
- const handleOneKey = (qn) => {
- if (qn === '1' && ans === 'esh28') {
- setCompleted(true);
- } else {
- alert('Wrong Passcode');
- }
- };
- const handleAns = (answer) => {
- setAns(answer.target.value);
- // console.log('THIS IS THE ANSWER :', answer.target.value);
- };
- const handleTwoKey = () => {
- if (ans2 === 'esh01q') {
- setCompletedTwo(true);
- } else {
- alert('Wrong Passcode');
- }
- };
- const handleTwoAns = (answer) => {
- setAns2(answer.target.value);
- console.log('THIS IS THE ANSWER :', answer.target.value);
- };
-
- const handleThirdKey = () => {
- if (ans3 === 'eshvision2.0') {
- setCompletedThird(true);
- } else {
- alert('Wrong Passcode');
- }
- };
- const handleThirdAns = (answer) => {
- setAns3(answer.target.value);
- console.log('THIS IS THE ANSWER :', answer.target.value);
- };
- const handleFourthKey = () => {
- if (ans4 === 'react101') {
- setCompletedFourth(true);
- } else {
- alert('Wrong Passcode');
- }
- };
- const handleFourthAns = (answer) => {
- setAns4(answer.target.value);
- // console.log('THIS IS THE ANSWER :', answer.target.value);
- };
-
- return (
-
-
-
-
-
- {/* =======ESHVISION 1.0 TABLE======= */}
-
- {/* */}
-
- {/* =======ESHVISION 2.0 TABLE======= */}
-
-
-
- S.No
- Topic
- Complete By
- Resource
- Link
-
-
-
-
- 1
- Before we start
- 2nd September
- No Assessment
- Click here
-
- 2
- Basic Requirements
- 2nd September
- No Assessment
- Click here
-
- 3
- Introduction to HTML
- 7th September
- No Assessment
- {completed ? (Click here ) : (
- <>
- handleAns(event)} InputLabelProps={{ style: { color: '#fff' } }} sx={{ color: 'white !important' }} variant="outlined" label="Enter key" />
- handleOneKey('1')}>Submit
-
- )}
-
-
-
- 3
- CSS
- 14th September
- Assessment {completedTwo ? (Click here ) : (
- <>
- handleTwoAns(event)} InputLabelProps={{ style: { color: '#fff' } }} sx={{ color: 'white !important' }} variant="outlined" label="Enter key" />
- Submit
-
- )}
-
-
-
- 4
- JavaScript
- 23rd September
- Assessment {completedThird ? (Click here ) : (
- <>
- handleThirdAns(event)} InputLabelProps={{ style: { color: '#fff' } }} sx={{ color: 'white !important' }} variant="outlined" label="Enter key" />
- Submit
-
- )}
-
-
-
- 5
- Introduction to React JS
- 12th October
- Assessment {completedFourth ? (Click here ) : (
- <>
- handleFourthAns(event)} InputLabelProps={{ style: { color: '#fff' } }} sx={{ color: 'white !important' }} variant="outlined" label="Enter key" />
- Submit
-
- )}
-
-
- {/*
- 1
- Introduction to HTML Deadline
- Assessment {completed ? (Click here ) : (
- <>
- handleAns(event)} InputLabelProps={{ style: { color: '#fff' } }} sx={{ color: 'white !important' }} variant="outlined" label="Enter key" />
- handleOneKey('1')}>Submit
-
- )}
-
-
-
- 1
- Introduction to HTML Deadline
- Assessment {completed ? (Click here ) : (
- <>
- handleAns(event)} InputLabelProps={{ style: { color: '#fff' } }} sx={{ color: 'white !important' }} variant="outlined" label="Enter key" />
- handleOneKey('1')}>Submit
-
- )}
-
-
-
- 1
- Introduction to HTML Deadline
- Assessment {completed ? (Click here ) : (
- <>
- handleAns(event)} InputLabelProps={{ style: { color: '#fff' } }} sx={{ color: 'white !important' }} variant="outlined" label="Enter key" />
- handleOneKey('1')}>Submit
-
- )}
-
-
-
- 1
- Introduction to HTML Deadline
- Assessment {completed ? (Click here ) : (
- <>
- handleAns(event)} InputLabelProps={{ style: { color: '#fff' } }} sx={{ color: 'white !important' }} variant="outlined" label="Enter key" />
- handleOneKey('1')}>Submit
-
- )}
-
-
-
- 1
- Introduction to HTML Deadline
- Assessment {completed ? (Click here ) : (
- <>
- handleAns(event)} InputLabelProps={{ style: { color: '#fff' } }} sx={{ color: 'white !important' }} variant="outlined" label="Enter key" />
- handleOneKey('1')}>Submit
-
- )}
-
- */}
-
-
-
-
-
-
- );
-};
-
-export default Table;
diff --git a/sections/WhatsNew.jsx b/sections/WhatsNew.jsx
deleted file mode 100644
index e311139a7..000000000
--- a/sections/WhatsNew.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-import styles from '../styles';
-import { newFeatures } from '../constants';
-import { NewFeatures, TitleText, TypingText } from '../components';
-import { planetVariants, staggerContainer, fadeIn } from '../utils/motion';
-
-const WhatsNew = () => (
-
-
-
- What's new about Eshway?} />
-
- {newFeatures.map((feature) => (
-
-
-
-
-
-
-
-);
-
-export default WhatsNew;
diff --git a/sections/World.jsx b/sections/World.jsx
deleted file mode 100644
index 43c483453..000000000
--- a/sections/World.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-import styles from '../styles';
-import { TitleText, TypingText } from '../components';
-import { fadeIn, staggerContainer } from '../utils/motion';
-
-const World = () => (
-
-
-
- Track friends around you and invite them to play together in the same
- world
-
- )}
- textStyles="text-center"
- />
-
-
-
-
-
-
-
-
-
-
-
-);
-
-export default World;
diff --git a/sections/index.js b/sections/index.js
deleted file mode 100644
index a43eaee2a..000000000
--- a/sections/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Hero from './Hero';
-import About from './About';
-import Explore from './Explore';
-import GetStarted from './GetStarted';
-import WhatsNew from './WhatsNew';
-import World from './World';
-import Insights from './Insights';
-import Feedback from './Feedback';
-import Services from './Services';
-import Merch from './Merch';
-
-export {
- Hero,
- About,
- Explore,
- GetStarted,
- WhatsNew,
- World,
- Insights,
- Feedback,
- Merch,
- Services,
-};
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
new file mode 100644
index 000000000..718d6fea4
Binary files /dev/null and b/src/app/favicon.ico differ
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 000000000..b0e6fff59
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,76 @@
+@tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+
+ @layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 222.2 84% 4.9%;
+
+ --card: 0 0% 100%;
+ --card-foreground: 222.2 84% 4.9%;
+
+ --popover: 0 0% 100%;
+ --popover-foreground: 222.2 84% 4.9%;
+
+ --primary: 222.2 47.4% 11.2%;
+ --primary-foreground: 210 40% 98%;
+
+ --secondary: 210 40% 96.1%;
+ --secondary-foreground: 222.2 47.4% 11.2%;
+
+ --muted: 210 40% 96.1%;
+ --muted-foreground: 215.4 16.3% 46.9%;
+
+ --accent: 210 40% 96.1%;
+ --accent-foreground: 222.2 47.4% 11.2%;
+
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 210 40% 98%;
+
+ --border: 214.3 31.8% 91.4%;
+ --input: 214.3 31.8% 91.4%;
+ --ring: 222.2 84% 4.9%;
+
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 222.2 84% 4.9%;
+ --foreground: 210 40% 98%;
+
+ --card: 222.2 84% 4.9%;
+ --card-foreground: 210 40% 98%;
+
+ --popover: 222.2 84% 4.9%;
+ --popover-foreground: 210 40% 98%;
+
+ --primary: 210 40% 98%;
+ --primary-foreground: 222.2 47.4% 11.2%;
+
+ --secondary: 217.2 32.6% 17.5%;
+ --secondary-foreground: 210 40% 98%;
+
+ --muted: 217.2 32.6% 17.5%;
+ --muted-foreground: 215 20.2% 65.1%;
+
+ --accent: 217.2 32.6% 17.5%;
+ --accent-foreground: 210 40% 98%;
+
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 210 40% 98%;
+
+ --border: 217.2 32.6% 17.5%;
+ --input: 217.2 32.6% 17.5%;
+ --ring: 212.7 26.8% 83.9%;
+ }
+ }
+
+ @layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+ }
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 000000000..2acc8bf1c
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,30 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import Head from 'next/head';
+
+const karla = Inter({ subsets: ['latin'] });
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+ title: 'Create Next App',
+ description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+
+
+ {children}
+
+ );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 000000000..0e9a6602e
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,22 @@
+import About from '@/components/About';
+import Divider from '@/components/Divider';
+import { Hero } from '@/components/Hero';
+import Navbar from '@/components/Navbar';
+import Services from '@/components/Services';
+import StaticHero from '@/components/StaticHero';
+import { Testimonial } from '@/components/Testimonial';
+
+export default function Home() {
+ return (
+
+
+
+ {/*
*/}
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/About.tsx b/src/components/About.tsx
new file mode 100644
index 000000000..d3583e186
--- /dev/null
+++ b/src/components/About.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+const About = () => {
+ return (
+
+
+
+
+
+
+
+
+
+ About {' '}
+ Us
+
+
+
+ With a team of skilled developers, designers, and marketers, the
+ company offers digital marketing services such as website
+ development, mobile application development and SEO.
+
+
+
+ Know more
+
+
+
+
+ );
+};
+
+export default About;
diff --git a/src/components/AnimatedButton.tsx b/src/components/AnimatedButton.tsx
new file mode 100644
index 000000000..79dbf3342
--- /dev/null
+++ b/src/components/AnimatedButton.tsx
@@ -0,0 +1,82 @@
+'use client';
+import { useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+
+const TARGET_TEXT = "Let's Talk";
+const CYCLES_PER_LETTER = 2;
+const SHUFFLE_TIME = 50;
+
+const CHARS = '!@#$%^&*():{};|,.<>/?';
+
+export const AnimatedButton = () => {
+ const intervalRef = useRef
(null);
+
+ const [text, setText] = useState(TARGET_TEXT);
+
+ const scramble = () => {
+ let pos = 0;
+
+ intervalRef.current = setInterval(() => {
+ const scrambled = TARGET_TEXT.split('')
+ .map((char, index) => {
+ if (pos / CYCLES_PER_LETTER > index) {
+ return char;
+ }
+
+ const randomCharIndex = Math.floor(Math.random() * CHARS.length);
+ const randomChar = CHARS[randomCharIndex];
+
+ return randomChar;
+ })
+ .join('');
+
+ setText(scrambled);
+ pos++;
+
+ if (pos >= TARGET_TEXT.length * CYCLES_PER_LETTER) {
+ stopScramble();
+ }
+ }, SHUFFLE_TIME);
+ };
+
+ const stopScramble = () => {
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current);
+ intervalRef.current = null;
+ }
+ setText(TARGET_TEXT);
+ };
+
+ return (
+
+
+ {text}
+
+
+ );
+};
diff --git a/src/components/AnimatedHamburger.tsx b/src/components/AnimatedHamburger.tsx
new file mode 100644
index 000000000..99faf796e
--- /dev/null
+++ b/src/components/AnimatedHamburger.tsx
@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { MotionConfig, motion } from 'framer-motion';
+
+export const AnimatedHamburgerButton = () => {
+ const [active, setActive] = useState(false);
+ return (
+
+ setActive((pv) => !pv)}
+ className='relative h-16 rounded-full bg-white/0 transition-colors hover:bg-white/20'
+ >
+
+
+ );
+};
+
+const VARIANTS = {
+ top: {
+ open: {
+ rotate: ['0deg', '0deg', '45deg'],
+ top: ['35%', '50%', '50%'],
+ },
+ closed: {
+ rotate: ['45deg', '0deg', '0deg'],
+ top: ['50%', '50%', '35%'],
+ },
+ },
+ middle: {
+ open: {
+ rotate: ['0deg', '0deg', '-45deg'],
+ },
+ closed: {
+ rotate: ['-45deg', '0deg', '0deg'],
+ },
+ },
+ bottom: {
+ open: {
+ rotate: ['0deg', '0deg', '45deg'],
+ bottom: ['35%', '50%', '50%'],
+ left: '50%',
+ },
+ closed: {
+ rotate: ['45deg', '0deg', '0deg'],
+ bottom: ['50%', '50%', '35%'],
+ left: 'calc(50% + 10px)',
+ },
+ },
+};
diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx
new file mode 100644
index 000000000..33872f904
--- /dev/null
+++ b/src/components/Divider.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Divider = () => {
+ return (
+
+
+ Unlock your online potential now
+ with ESH
+ WAY
+
+
+ );
+};
+
+export default Divider;
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
new file mode 100644
index 000000000..2db558780
--- /dev/null
+++ b/src/components/Hero.tsx
@@ -0,0 +1,47 @@
+'use client';
+import { motion } from 'framer-motion';
+import React from 'react';
+import { ImagesSlider } from './image-slider';
+
+export function Hero() {
+ const images = [
+ '/hero.png',
+ 'https://images.unsplash.com/photo-1483982258113-b72862e6cff6?q=80&w=3456&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+ 'https://images.unsplash.com/photo-1482189349482-3defd547e0e9?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+ ];
+ return (
+
+
+
+ Crafting Digital Excellence Together
+
+
+ Transforming your digital landscape for a better tomorrow
+
+
+
+ Let's Start
+
+
+ {/*
+ Join now →
+
+ */}
+
+
+ );
+}
diff --git a/src/components/HorizontalScrollCarousel.tsx b/src/components/HorizontalScrollCarousel.tsx
new file mode 100644
index 000000000..39e01ed39
--- /dev/null
+++ b/src/components/HorizontalScrollCarousel.tsx
@@ -0,0 +1,110 @@
+'use client';
+import { motion, useTransform, useScroll } from 'framer-motion';
+import { useRef } from 'react';
+import { TiltCard } from './TiltCard';
+
+const Example = () => {
+ return (
+
+
+
+ Scroll down
+
+
+
+
+
+ Scroll up
+
+
+
+
+
+ {cards.map((card) => {
+ return
+
+
+ );
+};
+
+interface CardProps {
+ card: CardType;
+}
+
+const Card = ({ card }: CardProps) => {
+ return (
+
+ );
+};
+
+export default Example;
+
+const cards: CardType[] = [
+ {
+ url: '/imgs/abstract/1.jpg',
+ title: 'Website Development',
+ description:
+ 'Web development is the process of creating websites and web applications for the internet.',
+ id: 1,
+ },
+ {
+ url: '/imgs/abstract/2.jpg',
+ title: 'Application Development',
+ description:
+ 'Web development is the process of creating websites and web applications for the internet.',
+ id: 2,
+ },
+ {
+ url: '/imgs/abstract/3.jpg',
+ title: 'UI/UX',
+ description:
+ 'Web development is the process of creating websites and web applications for the internet.',
+ id: 3,
+ },
+ {
+ url: '/imgs/abstract/4.jpg',
+ title: 'Video Editing',
+ description:
+ 'Web development is the process of creating websites and web applications for the internet.',
+ id: 4,
+ },
+];
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 000000000..b43302704
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,123 @@
+'use client';
+import Image from 'next/image';
+import React, { useState } from 'react';
+import { AnimatedHamburgerButton } from './AnimatedHamburger';
+
+const Navbar = () => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+
+
+
+
+
+
setIsOpen(!isOpen)}
+ className='text-white hover:text-gray-300 inline-flex items-center justify-center p-2 rounded-md focus:outline-none'
+ >
+
+ */}
+
+
+
+
+
+
+
+ {/*
*/}
+
+ {/*
*/}
+
+
+
+ Services
+
+
+
+ Embark on a journey where imagination meets innovation, and watch
+ your digital dreams come to life with our{' '}
+ transformative solutions.
+
+
+
+
+ );
+};
+
+export default Services;
diff --git a/src/components/StaticHero.tsx b/src/components/StaticHero.tsx
new file mode 100644
index 000000000..86a5ac933
--- /dev/null
+++ b/src/components/StaticHero.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { AnimatedButton } from './AnimatedButton';
+
+const StaticHero = () => {
+ return (
+
+
+
+
+
+
+ Crafting Digital Excellence Together
+ {/*
+ {' '}
+ Forever Home.{' '}
+ */}
+
+
+
+ Transforming your digital landscape for a better tomorrow
+
+
+
+
+
+ );
+};
+
+export default StaticHero;
diff --git a/src/components/Testimonial.tsx b/src/components/Testimonial.tsx
new file mode 100644
index 000000000..9946ebade
--- /dev/null
+++ b/src/components/Testimonial.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { InfiniteMovingCards } from './ui/infinite-moving-cards';
+
+export function Testimonial() {
+ return (
+
+
+ );
+}
+
+const testimonials = [
+ {
+ quote:
+ 'Great work so far, loved the fact that Eshu personally took it up! Looking forward to the final product.',
+ name: 'Eknoor Singh',
+ title: 'Speezy',
+ },
+ {
+ quote:
+ 'Great work. They could exactly replicate the design into website and the speed was super quick. Eshu personally solved all the issue I had in quickest of time. Would definitely work with them again!',
+ name: 'Abhishek Pai Angle',
+ title: 'Ribin',
+ },
+ {
+ quote: 'Work execution was smooth and task was done on time!',
+ name: 'Sujas Jain',
+ title: 'Abhyuday IIT Bombay',
+ },
+ {
+ quote:
+ 'Exceptional work! The website is fantastic, and we appreciate your team's expertise and professionalism.',
+ name: 'Mandar',
+ title: 'Formula AshwaRiders',
+ },
+ {
+ quote:
+ 'It was very personalised and they did multiple iterations according to my requirements.',
+ name: 'Aryan Goyal',
+ title: 'Thirtyml',
+ },
+];
diff --git a/src/components/TiltCard.tsx b/src/components/TiltCard.tsx
new file mode 100644
index 000000000..2364de85c
--- /dev/null
+++ b/src/components/TiltCard.tsx
@@ -0,0 +1,110 @@
+'use client';
+import React, { useRef } from 'react';
+import {
+ motion,
+ useMotionTemplate,
+ useMotionValue,
+ useSpring,
+} from 'framer-motion';
+
+const Example = () => {
+ return (
+
+
+ );
+};
+
+const ROTATION_RANGE = 32.5;
+const HALF_ROTATION_RANGE = 32.5 / 2;
+
+interface CardProps {
+ card: {
+ title: string;
+ description: string;
+ };
+}
+
+export const TiltCard = ({ card }: CardProps) => {
+ const ref = useRef(null);
+
+ const x = useMotionValue(0);
+ const y = useMotionValue(0);
+
+ const xSpring = useSpring(x);
+ const ySpring = useSpring(y);
+
+ const transform = useMotionTemplate`rotateX(${xSpring}deg) rotateY(${ySpring}deg)`;
+
+ const handleMouseMove = (e: React.MouseEvent) => {
+ if (!ref.current) return;
+
+ const rect = ref.current.getBoundingClientRect();
+
+ const width = rect.width;
+ const height = rect.height;
+
+ const mouseX = (e.clientX - rect.left) * ROTATION_RANGE;
+ const mouseY = (e.clientY - rect.top) * ROTATION_RANGE;
+
+ const rX = (mouseY / height - HALF_ROTATION_RANGE) * -1;
+ const rY = mouseX / width - HALF_ROTATION_RANGE;
+
+ x.set(rX);
+ y.set(rY);
+ };
+
+ const handleMouseLeave = () => {
+ x.set(0);
+ y.set(0);
+ };
+
+ return (
+
+
+
+
+ {card.title}
+
+
+ {card.description}
+
+
+
+ );
+};
+
+export default Example;
diff --git a/src/components/image-slider.tsx b/src/components/image-slider.tsx
new file mode 100644
index 000000000..85067ee3d
--- /dev/null
+++ b/src/components/image-slider.tsx
@@ -0,0 +1,152 @@
+'use client';
+
+import { cn } from '@/utils/cs';
+import { motion, AnimatePresence } from 'framer-motion';
+import React, { useEffect, useState } from 'react';
+
+export const ImagesSlider = ({
+ images,
+ children,
+ overlay = true,
+ overlayClassName,
+ className,
+ autoplay = true,
+ direction = 'up',
+}: {
+ images: string[];
+ children: React.ReactNode;
+ overlay?: React.ReactNode;
+ overlayClassName?: string;
+ className?: string;
+ autoplay?: boolean;
+ direction?: 'up' | 'down';
+}) => {
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [loading, setLoading] = useState(false);
+ const [loadedImages, setLoadedImages] = useState([]);
+
+ const handleNext = () => {
+ setCurrentIndex((prevIndex) =>
+ prevIndex + 1 === images.length ? 0 : prevIndex + 1
+ );
+ };
+
+ const handlePrevious = () => {
+ setCurrentIndex((prevIndex) =>
+ prevIndex - 1 < 0 ? images.length - 1 : prevIndex - 1
+ );
+ };
+
+ useEffect(() => {
+ loadImages();
+ }, []);
+
+ const loadImages = () => {
+ setLoading(true);
+ const loadPromises = images.map((image) => {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.src = image;
+ img.onload = () => resolve(image);
+ img.onerror = reject;
+ });
+ });
+
+ Promise.all(loadPromises)
+ .then((loadedImages) => {
+ setLoadedImages(loadedImages as string[]);
+ setLoading(false);
+ })
+ .catch((error) => console.error('Failed to load images', error));
+ };
+ useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === 'ArrowRight') {
+ handleNext();
+ } else if (event.key === 'ArrowLeft') {
+ handlePrevious();
+ }
+ };
+
+ window.addEventListener('keydown', handleKeyDown);
+
+ // autoplay
+ let interval: any;
+ if (autoplay) {
+ interval = setInterval(() => {
+ handleNext();
+ }, 5000);
+ }
+
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ clearInterval(interval);
+ };
+ }, []);
+
+ const slideVariants = {
+ initial: {
+ scale: 0,
+ opacity: 0,
+ rotateX: 45,
+ },
+ visible: {
+ scale: 1,
+ rotateX: 0,
+ opacity: 1,
+ transition: {
+ duration: 0.5,
+ ease: [0.645, 0.045, 0.355, 1.0],
+ },
+ },
+ upExit: {
+ opacity: 1,
+ y: '-150%',
+ transition: {
+ duration: 1,
+ },
+ },
+ downExit: {
+ opacity: 1,
+ y: '150%',
+ transition: {
+ duration: 1,
+ },
+ },
+ };
+
+ const areImagesLoaded = loadedImages.length > 0;
+
+ return (
+
+ {areImagesLoaded && children}
+ {areImagesLoaded && overlay && (
+
+ )}
+
+ {areImagesLoaded && (
+
+
+ )}
+
(null);
+ const scrollerRef = React.useRef(null);
+
+ useEffect(() => {
+ addAnimation();
+ }, []);
+ const [start, setStart] = useState(false);
+ function addAnimation() {
+ if (containerRef.current && scrollerRef.current) {
+ const scrollerContent = Array.from(scrollerRef.current.children);
+
+ scrollerContent.forEach((item) => {
+ const duplicatedItem = item.cloneNode(true);
+ if (scrollerRef.current) {
+ scrollerRef.current.appendChild(duplicatedItem);
+ }
+ });
+
+ getDirection();
+ getSpeed();
+ setStart(true);
+ }
+ }
+ const getDirection = () => {
+ if (containerRef.current) {
+ if (direction === 'left') {
+ containerRef.current.style.setProperty(
+ '--animation-direction',
+ 'forwards'
+ );
+ } else {
+ containerRef.current.style.setProperty(
+ '--animation-direction',
+ 'reverse'
+ );
+ }
+ }
+ };
+ const getSpeed = () => {
+ if (containerRef.current) {
+ if (speed === 'fast') {
+ containerRef.current.style.setProperty('--animation-duration', '20s');
+ } else if (speed === 'normal') {
+ containerRef.current.style.setProperty('--animation-duration', '40s');
+ } else {
+ containerRef.current.style.setProperty('--animation-duration', '80s');
+ }
+ }
+ };
+ return (
+
+
+ {items.map((item, idx) => (
+
+
+
+
+ {item.quote}
+
+
+
+
+ {item.name}
+
+
+ {item.title}
+
+
+
+
+
+ ))}
+
+
- {active !== id ? (
- 
- 
- 
*/}
- 
-
- 
- {menu ? (
- 
-
- 
*/}
- 
- 
-
- 
- 
- 
-
- 
*/}
- 
- 
- 
- 
- 
-
- 
- 
- 
- 
+ 
+ {/*