diff --git a/src/app/globals.css b/src/app/globals.css index 063c788..6568b0e 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -157,4 +157,21 @@ body, margin: 0; padding: 0; +} + +@keyframes pulseGradient { + 0% { + background-color: #374151; /* gray-700 */ + } + 50% { + background-color: #475569; /* slate-600 */ + } + 100% { + background-color: #374151; /* gray-700 */ + } +} + +.skeleton-animation div[class*="bg-gray-700"], +.skeleton-animation div[class*="bg-gray-800"] { + animation: pulseGradient 2s ease-in-out infinite; } \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 3bb91ca..ce11e8e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,27 +1,19 @@ "use client"; import React, { useState, useEffect } from "react"; -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 { FileText, UploadCloud, CreditCard } from 'lucide-react'; 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 { NavbarDemo } from "@/components/nav"; -import { DotLottieReact } from '@lottiefiles/dotlottie-react'; - - +import Image from "next/image"; +import PageSkeleton from "@/components/PageSkeleton"; export default function BackgroundBoxesDemo() { const [scrollY, setScrollY] = useState(0); const [isLoading, setIsLoading] = useState(true); const [mounted, setMounted] = useState(false); - const router = useRouter(); useEffect(() => { setMounted(true); @@ -54,140 +46,131 @@ export default function BackgroundBoxesDemo() { return (
{/* Loading Screen */} - {isLoading && ( -
-
- -

Loading...

-
-
- )} - - - - {/* Aurora as background */} -
- -
+ {isLoading ? :( + <> + - {/* Main content centered - positioned fixed to stay in center */} -
- {/* 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 */} -
- - {/* ContainerScroll in normal document flow for scrolling */} -
- -

- - - - -

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

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.

+ + {/* Main content centered - positioned fixed to stay in center */} +
+ {/* 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. +
-
- {/* 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.

+
+
- {/* 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.

-
+ + {/* Spacer div to replace the br tags */} +
+ + {/* ContainerScroll in normal document flow for scrolling */} +
+ +

+ + + + +

+ + } + > + hero + +
-
-
- {/* End 3 Steps Section */} - - {/* Made by and Copyright */} -
- -
Copyright © {new Date().getFullYear()} asshelp All rights reserved.
-
+ {/* 3 Steps Section */} +
+
HOW IT WORKS
+

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.

+
+
+ {/* 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 */} + + + )}
); } \ No newline at end of file diff --git a/src/components/PageSkeleton.tsx b/src/components/PageSkeleton.tsx new file mode 100644 index 0000000..bccab57 --- /dev/null +++ b/src/components/PageSkeleton.tsx @@ -0,0 +1,21 @@ +import FooterSkeleton from "./skeletons/FooterSkeleton"; +import HeroSkeleton from "./skeletons/HeroSkeleton"; +import NavbarSkeleton from "./skeletons/NavbarSkeleton"; +import ScrollSectionSkeleton from "./skeletons/ScrollSectionSkeletion"; +import StepsSkeleton from "./skeletons/StepsSkeleton"; +import TestimonialsSkeleton from "./skeletons/TestimonialsSkeleton"; + +const PageSkeleton = () => { + return ( +
+ + + + + + +
+ ) +}; + +export default PageSkeleton; \ No newline at end of file diff --git a/src/components/nav.tsx b/src/components/nav.tsx index a3725d5..1160933 100644 --- a/src/components/nav.tsx +++ b/src/components/nav.tsx @@ -13,7 +13,7 @@ import { import { useState, useEffect } from "react"; import { GitHubStarsButton } from '@/components/animate-ui/buttons/github-stars'; import { useRouter } from "next/navigation"; -import { supabase } from "@/lib/supabaseclient"; +// import { supabase } from "@/lib/supabaseclient"; export function NavbarDemo() { const navItems = [ @@ -35,20 +35,20 @@ export function NavbarDemo() { const [user, setUser] = useState(null); const router = useRouter(); - useEffect(() => { - const getUser = async () => { - const { data: { user } } = await supabase.auth.getUser(); - setUser(user); - }; - getUser(); - // Listen for auth state changes - const { data: listener } = supabase.auth.onAuthStateChange((_event, session) => { - setUser(session?.user ?? null); - }); - return () => { - listener?.subscription.unsubscribe(); - }; - }, []); + // useEffect(() => { + // const getUser = async () => { + // const { data: { user } } = await supabase.auth.getUser(); + // setUser(user); + // }; + // getUser(); + // // Listen for auth state changes + // const { data: listener } = supabase.auth.onAuthStateChange((_event, session) => { + // setUser(session?.user ?? null); + // }); + // return () => { + // listener?.subscription.unsubscribe(); + // }; + // }, []); return (
diff --git a/src/components/skeletons/FooterSkeleton.tsx b/src/components/skeletons/FooterSkeleton.tsx new file mode 100644 index 0000000..3c25369 --- /dev/null +++ b/src/components/skeletons/FooterSkeleton.tsx @@ -0,0 +1,8 @@ +export default function FooterSkeleton () { + return ( +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/skeletons/HeroSkeleton.tsx b/src/components/skeletons/HeroSkeleton.tsx new file mode 100644 index 0000000..f666113 --- /dev/null +++ b/src/components/skeletons/HeroSkeleton.tsx @@ -0,0 +1,14 @@ +export default function HeroSkeleton () { + return ( +
+
+
+
+
+
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/skeletons/NavbarSkeleton.tsx b/src/components/skeletons/NavbarSkeleton.tsx new file mode 100644 index 0000000..70deb8d --- /dev/null +++ b/src/components/skeletons/NavbarSkeleton.tsx @@ -0,0 +1,13 @@ +export default function NavbarSkeleton () { + return ( +
+
+
+
+
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/skeletons/ScrollSectionSkeletion.tsx b/src/components/skeletons/ScrollSectionSkeletion.tsx new file mode 100644 index 0000000..3d186b9 --- /dev/null +++ b/src/components/skeletons/ScrollSectionSkeletion.tsx @@ -0,0 +1,7 @@ +export default function ScrollSectionSkeleton () { + return ( +
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/skeletons/StepsSkeleton.tsx b/src/components/skeletons/StepsSkeleton.tsx new file mode 100644 index 0000000..96f7d0d --- /dev/null +++ b/src/components/skeletons/StepsSkeleton.tsx @@ -0,0 +1,21 @@ +export default function StepsSkeleton () { + return ( +
+
+
+ +
+ {[1, 2, 3].map((step) => ( +
+
+
+
+
+
+
+
+ ))} +
+
+ ) +} \ No newline at end of file diff --git a/src/components/skeletons/TestimonialsSkeleton.tsx b/src/components/skeletons/TestimonialsSkeleton.tsx new file mode 100644 index 0000000..1aa3f76 --- /dev/null +++ b/src/components/skeletons/TestimonialsSkeleton.tsx @@ -0,0 +1,7 @@ +export default function TestimonialsSkeleton () { + return ( +
+
+
+ ) +} \ No newline at end of file diff --git a/src/lib/supabaseclient.ts b/src/lib/supabaseclient.ts index 39f02ea..f458fff 100644 --- a/src/lib/supabaseclient.ts +++ b/src/lib/supabaseclient.ts @@ -1,7 +1,7 @@ -import { createClient } from '@supabase/supabase-js' +// import { createClient } from '@supabase/supabase-js' -// You can use environment variables for safety -const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string -const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string +// // You can use environment variables for safety +// const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string +// const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string -export const supabase = createClient(supabaseUrl, supabaseAnonKey) +// export const supabase = createClient(supabaseUrl, supabaseAnonKey)