Skip to content

Commit b00b4a7

Browse files
ytube-downloaderytube-downloader
authored
Merge pull request #2 from ytube-downloader/dev
Update
2 parents 19cf3fa + ad34c81 commit b00b4a7

File tree

6 files changed

+209
-437
lines changed

6 files changed

+209
-437
lines changed

‎src/app/[locale]/contact/page.tsx‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import { useTranslations } from 'next-intl';
2+
3+
const ContactPage = () => {
4+
const t = useTranslations();
5+
6+
return (
7+
<main className='px-5 lg:px-0 min-h-screen py-20'>
8+
<div className="max-w-4xl mx-auto">
9+
<div className="text-center mb-12">
10+
<h1 className="text-4xl font-bold text-heading_main dark:text-dark_heading_main mb-4">
11+
Contact Us
12+
</h1>
13+
<p className="text-lg text-base_one dark:text-dark_base_one">
14+
Get in touch with our team for support and inquiries
15+
</p>
16+
</div>
17+
18+
<div className="grid lg:grid-cols-2 gap-12">
19+
{/* Contact Form */}
20+
<div className="bg-white dark:bg-dark_heading rounded-2xl p-8 shadow-sm">
21+
<h2 className="text-2xl font-bold text-heading_main dark:text-dark_heading_main mb-6">
22+
Send us a message
23+
</h2>
24+
25+
<form className="space-y-6">
26+
<div>
27+
<label htmlFor="name" className="block text-sm font-medium text-heading_main dark:text-dark_heading_main mb-2">
28+
Name
29+
</label>
30+
<input
31+
type="text"
32+
id="name"
33+
name="name"
34+
className="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-body dark:bg-dark_body text-heading_main dark:text-dark_heading_main focus:outline-none focus:ring-2 focus:ring-purple_main"
35+
required
36+
/>
37+
</div>
38+
39+
<div>
40+
<label htmlFor="email" className="block text-sm font-medium text-heading_main dark:text-dark_heading_main mb-2">
41+
Email
42+
</label>
43+
<input
44+
type="email"
45+
id="email"
46+
name="email"
47+
className="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-body dark:bg-dark_body text-heading_main dark:text-dark_heading_main focus:outline-none focus:ring-2 focus:ring-purple_main"
48+
required
49+
/>
50+
</div>
51+
52+
<div>
53+
<label htmlFor="message" className="block text-sm font-medium text-heading_main dark:text-dark_heading_main mb-2">
54+
Message
55+
</label>
56+
<textarea
57+
id="message"
58+
name="message"
59+
rows={6}
60+
className="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-body dark:bg-dark_body text-heading_main dark:text-dark_heading_main focus:outline-none focus:ring-2 focus:ring-purple_main resize-none"
61+
required
62+
></textarea>
63+
</div>
64+
65+
<button
66+
type="submit"
67+
className="w-full bg-purple_main text-white font-semibold py-3 px-6 rounded-xl hover:bg-opacity-90 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple_main focus:ring-offset-2"
68+
>
69+
Send Message
70+
</button>
71+
</form>
72+
</div>
73+
74+
{/* Contact Information */}
75+
<div className="space-y-8">
76+
<div className="bg-white dark:bg-dark_heading rounded-2xl p-8 shadow-sm">
77+
<h2 className="text-2xl font-bold text-heading_main dark:text-dark_heading_main mb-6">
78+
Get in touch
79+
</h2>
80+
81+
<div className="space-y-6">
82+
<div className="flex items-start gap-4">
83+
<div className="w-12 h-12 bg-purple_main bg-opacity-10 rounded-xl flex items-center justify-center">
84+
<span className="text-purple_main text-xl">📧</span>
85+
</div>
86+
<div>
87+
<h3 className="font-semibold text-heading_main dark:text-dark_heading_main">
88+
Email
89+
</h3>
90+
<p className="text-base_one dark:text-dark_base_one">
91+
[email protected]
92+
</p>
93+
</div>
94+
</div>
95+
96+
<div className="flex items-start gap-4">
97+
<div className="w-12 h-12 bg-purple_main bg-opacity-10 rounded-xl flex items-center justify-center">
98+
<span className="text-purple_main text-xl">⏰</span>
99+
</div>
100+
<div>
101+
<h3 className="font-semibold text-heading_main dark:text-dark_heading_main">
102+
Response Time
103+
</h3>
104+
<p className="text-base_one dark:text-dark_base_one">
105+
We typically respond within 24 hours
106+
</p>
107+
</div>
108+
</div>
109+
</div>
110+
</div>
111+
112+
<div className="bg-white dark:bg-dark_heading rounded-2xl p-8 shadow-sm">
113+
<h2 className="text-2xl font-bold text-heading_main dark:text-dark_heading_main mb-6">
114+
Frequently Asked Questions
115+
</h2>
116+
117+
<div className="space-y-4">
118+
<details className="group">
119+
<summary className="font-semibold text-heading_main dark:text-dark_heading_main cursor-pointer list-none flex items-center justify-between">
120+
<span>How do I download videos?</span>
121+
<span className="group-open:rotate-45 transition-transform">+</span>
122+
</summary>
123+
<p className="text-base_one dark:text-dark_base_one mt-2 text-sm">
124+
Simply paste the YouTube URL, choose your format, and click download.
125+
</p>
126+
</details>
127+
128+
<details className="group">
129+
<summary className="font-semibold text-heading_main dark:text-dark_heading_main cursor-pointer list-none flex items-center justify-between">
130+
<span>Is the service free?</span>
131+
<span className="group-open:rotate-45 transition-transform">+</span>
132+
</summary>
133+
<p className="text-base_one dark:text-dark_base_one mt-2 text-sm">
134+
Yes, our YouTube video downloader is completely free to use.
135+
</p>
136+
</details>
137+
</div>
138+
</div>
139+
</div>
140+
</div>
141+
</div>
142+
</main>
143+
);
144+
};
145+
146+
export default ContactPage;

‎src/app/[locale]/layout.tsx‎

Lines changed: 28 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { Footer } from "../_client/components/layout/footer";
1010
import { ToastContainer } from "react-toastify";
1111
import 'react-toastify/dist/ReactToastify.css';
1212
import { ThemeProvider } from "next-themes";
13-
import { PageTransitionProvider } from "../_client/components/layout/PageTransitionProvider";
1413

1514
export const metadata: Metadata = {
1615
title: "VDA - YouTube Video Downloader",
@@ -46,54 +45,35 @@ const Layout = async({ children, params }: LayoutProps) => {
4645
disableTransitionOnChange={false}
4746
>
4847
<NextIntlClientProvider messages={messages}>
49-
<PageTransitionProvider>
50-
{/* Main App Structure */}
51-
<div className="min-h-screen flex flex-col">
52-
<Header />
53-
54-
{/* Main Content Area */}
55-
<main className="flex-1 relative">
56-
{children}
57-
</main>
58-
59-
<Footer />
60-
</div>
48+
{/* Main App Structure - No PageTransitionProvider */}
49+
<div className="min-h-screen flex flex-col">
50+
<Header />
51+
52+
{/* Main Content Area - No animations */}
53+
<main className="flex-1 relative">
54+
{children}
55+
</main>
56+
57+
<Footer />
58+
</div>
6159

62-
{/* Toast Notifications with Enhanced Styling */}
63-
<ToastContainer
64-
position="top-right"
65-
autoClose={3000}
66-
hideProgressBar={false}
67-
newestOnTop={false}
68-
closeOnClick
69-
rtl={false}
70-
pauseOnFocusLoss
71-
draggable
72-
pauseOnHover
73-
theme="colored"
74-
className="toast-container"
75-
toastClassName="toast-item"
76-
bodyClassName="toast-body"
77-
progressClassName="toast-progress"
78-
/>
79-
80-
{/* Global Loading Overlay for Large Transitions */}
81-
<div id="global-loading" className="hidden fixed inset-0 z-50 bg-body dark:bg-dark_body bg-opacity-80 backdrop-blur-sm">
82-
<div className="flex items-center justify-center min-h-screen">
83-
<div className="bg-white dark:bg-dark_heading rounded-2xl p-8 shadow-2xl max-w-sm w-full mx-4">
84-
<div className="text-center">
85-
<div className="w-16 h-16 mx-auto mb-4 border-4 border-purple_main border-t-transparent rounded-full animate-spin"></div>
86-
<h3 className="text-lg font-semibold text-heading_main dark:text-dark_heading_main mb-2">
87-
Loading Page
88-
</h3>
89-
<p className="text-base_one dark:text-dark_base_one text-sm">
90-
Please wait while we prepare your content...
91-
</p>
92-
</div>
93-
</div>
94-
</div>
95-
</div>
96-
</PageTransitionProvider>
60+
{/* Toast Notifications */}
61+
<ToastContainer
62+
position="top-right"
63+
autoClose={3000}
64+
hideProgressBar={false}
65+
newestOnTop={false}
66+
closeOnClick
67+
rtl={false}
68+
pauseOnFocusLoss
69+
draggable
70+
pauseOnHover
71+
theme="colored"
72+
className="toast-container"
73+
toastClassName="toast-item"
74+
bodyClassName="toast-body"
75+
progressClassName="toast-progress"
76+
/>
9777
</NextIntlClientProvider>
9878
</ThemeProvider>
9979
</body>

‎src/app/_client/components/layout/PageTransitionProvider.tsx‎

Lines changed: 8 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,34 @@
11
"use client"
22
import { usePathname } from '@/i18n/routing'
3-
import { AnimatePresence, motion } from 'framer-motion'
43
import { useEffect, useState } from 'react'
5-
import { useRouter } from '@/i18n/routing'
64

75
interface PageTransitionProviderProps {
86
children: React.ReactNode
97
}
108

119
export const PageTransitionProvider = ({ children }: PageTransitionProviderProps) => {
1210
const pathname = usePathname()
13-
const router = useRouter()
14-
const [isLoading, setIsLoading] = useState(false)
1511
const [hasMounted, setHasMounted] = useState(false)
1612

1713
// Handle hydration
1814
useEffect(() => {
1915
setHasMounted(true)
2016
}, [])
2117

22-
// Listen for route changes
23-
useEffect(() => {
24-
const handleStart = () => setIsLoading(true)
25-
const handleComplete = () => setIsLoading(false)
26-
27-
// Since we're using Next.js App Router, we'll handle this differently
28-
// We'll use a timeout to simulate the loading state
29-
if (isLoading) {
30-
const timer = setTimeout(() => {
31-
setIsLoading(false)
32-
}, 300)
33-
return () => clearTimeout(timer)
34-
}
35-
}, [pathname, isLoading])
36-
37-
// Don't render transitions on server-side
18+
// Don't render on server-side
3819
if (!hasMounted) {
3920
return <div className="min-h-screen">{children}</div>
4021
}
4122

42-
const pageVariants = {
43-
initial: {
44-
opacity: 0,
45-
y: 20,
46-
scale: 0.98
47-
},
48-
in: {
49-
opacity: 1,
50-
y: 0,
51-
scale: 1
52-
},
53-
out: {
54-
opacity: 0,
55-
y: -20,
56-
scale: 0.98
57-
}
58-
}
59-
60-
const pageTransition = {
61-
type: "tween",
62-
ease: "anticipate",
63-
duration: 0.4
64-
}
65-
66-
const loadingVariants = {
67-
initial: { width: "0%" },
68-
animate: { width: "100%" },
69-
exit: { width: "100%" }
70-
}
71-
23+
// Return children without any animations
7224
return (
7325
<>
74-
{/* Loading Bar */}
75-
<AnimatePresence>
76-
{isLoading && (
77-
<motion.div
78-
className="fixed top-0 left-0 right-0 z-50 h-1 bg-gradient-to-r from-purple_main via-blue-500 to-purple_main"
79-
initial="initial"
80-
animate="animate"
81-
exit="exit"
82-
variants={loadingVariants}
83-
transition={{ duration: 0.3 }}
84-
/>
85-
)}
86-
</AnimatePresence>
87-
88-
{/* Page Content with Transitions */}
89-
<AnimatePresence mode="wait" initial={false}>
90-
<motion.div
91-
key={pathname}
92-
initial="initial"
93-
animate="in"
94-
exit="out"
95-
variants={pageVariants}
96-
transition={pageTransition}
97-
className="min-h-screen"
98-
>
99-
{children}
100-
</motion.div>
101-
</AnimatePresence>
102-
103-
{/* Loading Overlay */}
104-
<AnimatePresence>
105-
{isLoading && (
106-
<motion.div
107-
initial={{ opacity: 0 }}
108-
animate={{ opacity: 1 }}
109-
exit={{ opacity: 0 }}
110-
transition={{ duration: 0.2 }}
111-
className="fixed inset-0 z-40 bg-body dark:bg-dark_body bg-opacity-50 backdrop-blur-sm flex items-center justify-center"
112-
>
113-
<div className="bg-white dark:bg-dark_heading rounded-2xl p-8 shadow-2xl">
114-
<div className="flex items-center gap-4">
115-
<div className="w-8 h-8 border-4 border-purple_main border-t-transparent rounded-full animate-spin"></div>
116-
<span className="text-heading_main dark:text-dark_heading_main font-medium">
117-
Loading...
118-
</span>
119-
</div>
120-
</div>
121-
</motion.div>
122-
)}
123-
</AnimatePresence>
26+
{/* No loading bar */}
27+
28+
{/* Page Content without Transitions */}
29+
<div key={pathname}>
30+
{children}
31+
</div>
12432
</>
12533
)
12634
}

0 commit comments

Comments
 (0)