diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index ddde132..a6efb57 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -1,74 +1,31 @@ "use client"; import React, { useState, useEffect } from 'react'; +import { AnimatePresence, motion } from 'framer-motion'; +import { ContainerTextFlip } from "@/components/ui/container-text-flip"; import { Search, ShoppingCart, User, Menu, X, Star, Clock, Filter } from 'lucide-react'; import { useRouter } from 'next/navigation'; import { NavbarDemo } from "@/components/nav"; -// import Loader from '@/components/loader'; // OLD LOADER REMOVED -import { AnimatePresence } from 'framer-motion'; import AcademicHubSkeleton from '@/components/skeletons/dashboardPageSkeleton'; - const AcademicHub = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [isLoading, setIsLoading] = useState(true); const [mounted, setMounted] = useState(false); const router = useRouter(); - useEffect(() => { - setMounted(true); - }, []); - + useEffect(() => setMounted(true), []); useEffect(() => { if (!mounted) return; - const timer = setTimeout(() => { - setIsLoading(false); - }, 4000); + const timer = setTimeout(() => setIsLoading(false), 4000); return () => clearTimeout(timer); }, [mounted]); if (!mounted) return null; const featuredProjects = [ - { - id: 1, - title: "Assignment-Med", - category: "Assignments", - level: "Advanced", - rating: 4.9, - reviews: 5, - duration: "5 days", - price: 100, - originalPrice: 200, - tag: "Best Seller", - tagColor: "bg-amber-500" - }, - { - id: 2, - title: "Termwork-Med", - category: "Termwork", - level: "Expert", - rating: 4.8, - reviews: 15, - duration: "2-3 weeks", - price: 250, - originalPrice: 400, - tag: "New", - tagColor: "bg-emerald-500" - }, - { - id: 3, - title: "PPTs", - category: "Presentations", - level: "Intermediate", - rating: 4.7, - reviews: 8, - duration: "3-4 days", - price: 50, - originalPrice: 100, - tag: "Popular", - tagColor: "bg-blue-500" - } - + { id: 1, title: "Assignment-Med", category: "Assignments", level: "Advanced", rating: 4.9, reviews: 5, duration: "5 days", price: 100, originalPrice: 200, tag: "Best Seller", tagColor: "bg-amber-500" }, + { id: 2, title: "Termwork-Med", category: "Termwork", level: "Expert", rating: 4.8, reviews: 15, duration: "2-3 weeks", price: 250, originalPrice: 400, tag: "New", tagColor: "bg-emerald-500" }, + { id: 3, title: "PPTs", category: "Presentations", level: "Intermediate", rating: 4.7, reviews: 8, duration: "3-4 days", price: 50, originalPrice: 100, tag: "Popular", tagColor: "bg-blue-500" } ]; const stats = [ @@ -78,212 +35,170 @@ const AcademicHub = () => { { number: "24/7", label: "Support" } ]; - const categories = [ - "Assignments", - "Projects", - "Presentations", - "Termwork" - ]; + const categories = ["Assignments", "Projects", "Presentations", "Termwork"]; return (
- {/* Loading Screen --- UPDATED SECTION */} {isLoading && } - -
- - {/* Hero Section */} -
-
-
-

- Premium Academic{" "} - - Solutions - -

-

- Get high-quality assignments, projects, and research papers crafted by experts. - Boost your academic performance with our premium collection. -

-
- - -
-
-
+ + - {/* Featured Projects */} -
-
-
-

Featured Projects

-
- -
+
+ + {/* Featured Projects */} +
+
+
+

Featured Projects

+
+ + +
+
-
- {featuredProjects.map((project) => ( -
-
- - {project.tag} - -
- -
- {project.id === 1 && ( - Assignment - )} - {project.id === 2 && ( - Termwork - )} - {project.id !== 1 && project.id !== 2 && ( -
- )} -
+
+ {featuredProjects.map((project) => ( +
+ {project.tag} + +
+ {project.id === 1 && Assignment} + {project.id === 2 && Termwork} + {project.id !== 1 && project.id !== 2 &&
} +
-
-
- {project.category} - {project.level} +
+
+ {project.category} + {project.level} +
+

+ {project.title} +

-

- -

-
-
-
- - {project.rating} - ({project.reviews} reviews) +
+
+ {project.rating} ({project.reviews} reviews) +
-
-
- - {project.duration} -
+
+ {project.duration} +
-
-
- ₹{project.price} - ₹{project.originalPrice} +
+
+ ₹{project.price} + ₹{project.originalPrice} +
+
-
-
- ))} + ))} +
-
-
- - {/* Stats Section */} -
-
-
- {stats.map((stat, index) => ( -
-
- {stat.number} +
+ + {/* Stats Section */} +
+
+
+ {stats.map((stat, idx) => ( +
+
+ {stat.number} +
+
{stat.label}
-
{stat.label}
-
- ))} + ))} +
-
- - - {/* Footer */} - + ); }; -export default AcademicHub; \ No newline at end of file +export default AcademicHub; diff --git a/src/app/page.tsx b/src/app/page.tsx index 763d0f5..df02bb7 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,34 +1,31 @@ "use client"; -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useRef } from "react"; +import LoadingScreen from "@/components/LoadingScreen"; +import { ContainerTextFlip } from "@/components/ui/container-text-flip"; import { Boxes } from "@/components/ui/background-boxes"; import { cn } from "@/lib/utils"; import Button2 from '@/components/button2'; import { User, FileText, UploadCloud, CreditCard, Github } from 'lucide-react'; import Upload from '@/components/upload'; import Aurora from '@/components/Backgrounds/Aurora'; -import { useRef } from 'react'; -import { ContainerTextFlip } from "@/components/ui/container-text-flip"; import { ContainerScroll } from "@/components/ui/container-scroll-animation"; import TailwindConnectButton from "@/components/button"; import { useRouter } from "next/navigation"; -import TestimonialMarquee from "@/components/mwrap" +import TestimonialMarquee from "@/components/mwrap"; import { NavbarDemo } from "@/components/nav"; import { DotLottieReact } from '@lottiefiles/dotlottie-react'; - -// IMPORTED AnimatePresence for exit animations and the new HomePageSkeleton -import { AnimatePresence } from "framer-motion"; +import { AnimatePresence, motion } from "framer-motion"; import HomePageSkeleton from "@/components/skeletons/homePageSkeleton"; - export default function BackgroundBoxesDemo() { const [scrollY, setScrollY] = useState(0); const [isLoading, setIsLoading] = useState(true); const [mounted, setMounted] = useState(false); const router = useRouter(); + const heroRef = useRef(null); useEffect(() => { setMounted(true); - const handleScroll = () => setScrollY(window.scrollY); window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); @@ -36,37 +33,31 @@ export default function BackgroundBoxesDemo() { useEffect(() => { if (!mounted) return; - - // Simulate loading time for components - const timer = setTimeout(() => { - setIsLoading(false); - }, 4000); // Show loader for 4 seconds to see the animation properly - + const timer = setTimeout(() => setIsLoading(false), 4000); return () => clearTimeout(timer); }, [mounted]); - // Hide main content after scrolling 100px const mainContentOpacity = scrollY > 100 ? 0 : 1; const mainContentTransform = scrollY > 100 ? 'translateY(-50px)' : 'translateY(0)'; - // Don't render anything until mounted to prevent hydration mismatch - if (!mounted) { - return null; - } + if (!mounted) return null; return ( -
- {/* Loading Screen --- UPDATED SECTION */} +
+ {/* Loading Skeleton */} {isLoading && } - {/* The main content now fades in correctly after the skeleton loader fades out */} -
+ - - {/* Aurora as background */} -
+ + {/* Aurora Background */} +
- - {/* Main content centered - positioned fixed to stay in center */} + + {/* Hero Section */}
- {/* Hero Section Layout Fix */} -
- {/* Button Row */} +
- {/* Heading + Flip Row */} +

Want help in

- {/* Description Row */} +
Get professional assignment writing services from verified experts. 100% AI-free, plagiarism-free content.
+
- - {/* Spacer div to replace the br tags */} + + {/* Spacer */}
- - {/* ContainerScroll in normal document flow for scrolling */} + + {/* Scroll Container */}
-

- - - - -

- +

+ +

} > -
+ {/* 3 Steps Section */}
HOW IT WORKS
-

Just 3 steps to get started

+

Just 3 steps to get started

- {/* Step 1 */} -
- - - -
-

1. Upload Your Data

-

Simply upload your data to our secure platform. We support various file formats and data types to ensure a seamless integration with your existing systems.

-
-
- {/* Step 2 */} -
- - - -
-

2. Click Start

-

Our advanced AI algorithms automatically process and analyze your data, extracting valuable insights and patterns that would be difficult to identify manually.

+ {[{ + icon: UploadCloud, + title: "Upload Your Data", + description: "Simply upload your data to our secure platform. We support various file formats and data types." + }, { + icon: FileText, + title: "Click Start", + description: "Our AI algorithms automatically process and analyze your data, extracting valuable insights." + }, { + icon: CreditCard, + title: "Get Actionable Insights", + description: "Receive clear insights and recommendations based on AI analysis to improve your strategy." + }].map((step, idx) => ( +
+ + + +
+

{step.title}

+

{step.description}

+
-
- {/* Step 3 */} -
- - - -
-

3. Get Actionable Insights

-

Receive clear, actionable insights and recommendations based on the AI analysis. Use these insights to make data-driven decisions and improve your business strategies.

-
-
+ ))}
- {/* End 3 Steps Section */} + - {/* Made by and Copyright */} + + {/* Footer */}
-
Copyright © {new Date().getFullYear()} asshelp All rights reserved.
-
+
); -} \ No newline at end of file +} diff --git a/src/components/LoadingScreen.tsx b/src/components/LoadingScreen.tsx new file mode 100644 index 0000000..518afe9 --- /dev/null +++ b/src/components/LoadingScreen.tsx @@ -0,0 +1,50 @@ +"use client"; + +import React from "react"; +import { motion, AnimatePresence } from "framer-motion"; +import Aurora from "./Backgrounds/Aurora"; +import { ContainerTextFlip } from "./ui/container-text-flip"; + +interface LoadingScreenProps { + isLoading: boolean; + phrases?: string[]; +} + +const defaultPhrases = [ + "Loading your dashboard...", + "Fetching latest insights...", + "Almost there...", + "Preparing content..." +]; + +const LoadingScreen: React.FC = ({ isLoading, phrases = defaultPhrases }) => { + return ( + + {isLoading && ( + + {/* Aurora full-screen background */} + + + {/* Centered dynamic loading text */} + + + + + )} + + ); +}; + +export default LoadingScreen; diff --git a/src/components/skeletons/dashboardPageSkeleton.tsx b/src/components/skeletons/dashboardPageSkeleton.tsx index 24d79b4..be116d7 100644 --- a/src/components/skeletons/dashboardPageSkeleton.tsx +++ b/src/components/skeletons/dashboardPageSkeleton.tsx @@ -1,25 +1,20 @@ -// components/skeletons/AcademicHubSkeleton.tsx +// components/skeletons/DashboardPageSkeleton.tsx "use client"; import React from "react"; import { motion } from "framer-motion"; import { cn } from "@/lib/utils"; +import { ContainerTextFlip } from "@/components/ui/container-text-flip"; -/** - * A reusable skeleton component with a pulsing animation. - */ const Skeleton = ({ className, ...props }: React.ComponentProps) => ( ); -/** - * Skeleton placeholder for the Navbar. - */ const NavbarSkeleton = () => (
@@ -36,77 +31,43 @@ const NavbarSkeleton = () => (
); -/** - * Skeleton placeholder for the Hero Section. - */ const HeroSkeleton = () => ( -
-
- -
- - -
-
- - -
+
+ +
+ + +
+
+ + +
+
+
); -/** - * Skeleton placeholder for a single Project Card. - */ -const ProjectCardSkeleton = () => ( -
-
- -
- -
-
- - -
- -
- - -
- - -
-
+const StatsCardSkeleton = () => ( +
+ + +
); -/** - * Skeleton placeholder for the Featured Projects section. - */ -const FeaturedProjectsSkeleton = () => ( -
-
-
- -
- - -
-
-
- - - -
-
-
+const CardsSkeleton = () => ( +
+ + + + +
); - -/** - * The main skeleton loader for the Academic Hub page. - */ -export default function AcademicHubSkeleton() { +export default function DashboardPageSkeleton() { return ( - {/* Add padding-top to account for the fixed navbar */}
- +
); -} \ No newline at end of file +} diff --git a/src/components/skeletons/homePageSkeleton.tsx b/src/components/skeletons/homePageSkeleton.tsx index ab653b4..7a14576 100644 --- a/src/components/skeletons/homePageSkeleton.tsx +++ b/src/components/skeletons/homePageSkeleton.tsx @@ -1,19 +1,17 @@ -// components/HomePageSkeleton.tsx "use client"; import React from "react"; import { motion } from "framer-motion"; import { cn } from "@/lib/utils"; +import { ContainerTextFlip } from "@/components/ui/container-text-flip"; /** * A reusable skeleton component with a pulsing animation. */ -// I've seen a few different typings for your Skeleton component. -// React.ComponentProps is the most robust. const Skeleton = ({ className, ...props }: React.ComponentProps) => ( @@ -63,20 +61,26 @@ const HeroSkeleton = () => ( {/* Main CTA Button Placeholder */} + + {/* Rotating loading messages */} +
+ +
); - /** * The main skeleton loader for the home page. - * It combines the Navbar and Hero skeletons to mimic the page layout. */ export default function HomePageSkeleton() { return ( @@ -85,4 +89,4 @@ export default function HomePageSkeleton() {
); -} \ No newline at end of file +}