diff --git a/app/about/page.tsx b/app/about/page.tsx index 911feb5..b9c69d6 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -1,5 +1,6 @@ "use client"; +import { useState, useEffect } from 'react'; import Image from 'next/image'; import Link from 'next/link'; import { motion } from 'framer-motion'; @@ -24,6 +25,22 @@ const staggerContainer = { }; export default function About() { + const [isDarkMode, setIsDarkMode] = useState(false); + + useEffect(() => { + const savedDarkMode = localStorage.getItem('darkMode'); + if (savedDarkMode !== null) { + setIsDarkMode(JSON.parse(savedDarkMode)); + } + }, []); + + // Toggle dark mode + const toggleDarkMode = () => { + const newDarkMode = !isDarkMode; + setIsDarkMode(newDarkMode); + localStorage.setItem('darkMode', JSON.stringify(newDarkMode)); + }; + // Team members data const teamMembers = [ @@ -83,12 +100,44 @@ export default function About() { ]; return ( -
+
+ {/* Dark Mode Toggle */} + + {isDarkMode ? ( + + + + ) : ( + + + + )} + + {/* Hero Section */} -
+
-
-
+
+
@@ -101,7 +150,7 @@ export default function About() { About Visiflow - +
@@ -130,16 +179,24 @@ export default function About() { variants={staggerContainer} > -

Our Mission

-

+

Our Mission

+

At Visiflow, we're on a mission to revolutionize how communities predict and respond to flood threats. We believe that with the right technology and information, the devastating impact of floods can be significantly reduced.

-

+

Our advanced sensor devices and AI-powered analytics provide unprecedented accuracy in water level monitoring and flood prediction, giving communities valuable time to prepare and respond.

-

+

Beyond technology, we work closely with local governments, emergency services, and communities to implement effective early warning systems and develop comprehensive flood preparedness plans.

@@ -153,7 +210,9 @@ export default function About() { transition={{ duration: 0.6 }} >
-
+
Visiflow mission
-
-
+
+
@@ -179,7 +242,9 @@ export default function About() {
{/* Our Journey */} -
+
-

Our Journey

-

+

Our Journey

+

From a small startup to a global leader in flood prediction technology

@@ -197,7 +266,9 @@ export default function About() {
{/* Timeline line */} -
+
{milestones.map((milestone, index) => ( @@ -239,7 +310,9 @@ export default function About() {
{/* Team Section */} -
+
-

Meet Our Team

-

+

Meet Our Team

+

Passionate experts dedicated to building technology that saves lives

@@ -258,7 +335,9 @@ export default function About() { {teamMembers.map((member, index) => (
-

{member.bio}

+

{member.bio}

))} @@ -299,8 +378,8 @@ export default function About() { viewport={{ once: true }} transition={{ duration: 0.6 }} > -

Our Values

-

+

Our Values

+

The principles that guide our work and mission

@@ -337,18 +416,28 @@ export default function About() { ].map((value, index) => ( -
+
{value.icon}
-

{value.title}

-

{value.description}

+

{value.title}

+

{value.description}

))}
@@ -356,7 +445,11 @@ export default function About() {
{/* CTA Section */} -
+

Join Our Mission

-

+

Want to be part of our journey to protect communities from flood disasters?

diff --git a/app/auth/page.tsx b/app/auth/page.tsx index f3161ad..34d745c 100644 --- a/app/auth/page.tsx +++ b/app/auth/page.tsx @@ -42,11 +42,27 @@ const tabVariants = { export default function AuthPage() { const [activeTab, setActiveTab] = useState('signin'); + const [isDarkMode, setIsDarkMode] = useState(false); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(''); const [success, setSuccess] = useState(''); const [formFocus, setFormFocus] = useState(null); const [callbackUrl, setCallbackUrl] = useState('/'); + + // Load dark mode preference from localStorage + useEffect(() => { + const savedDarkMode = localStorage.getItem('darkMode'); + if (savedDarkMode !== null) { + setIsDarkMode(JSON.parse(savedDarkMode)); + } + }, []); + + // Toggle dark mode + const toggleDarkMode = () => { + const newDarkMode = !isDarkMode; + setIsDarkMode(newDarkMode); + localStorage.setItem('darkMode', JSON.stringify(newDarkMode)); + }; // Form data const [formData, setFormData] = useState({ @@ -273,7 +289,33 @@ export default function AuthPage() { }; return ( -
+
+ {/* Dark Mode Toggle */} + + {isDarkMode ? ( + + + + ) : ( + + + + )} + + {/* Wrap the component in Suspense */} Loading...
}> {/* Tabs */}
handleTabChange('signin')} @@ -334,7 +388,11 @@ export default function AuthPage() { Sign In handleTabChange('signup')} diff --git a/app/components/ui/FeatureCard.tsx b/app/components/ui/FeatureCard.tsx index fac315e..1a6a64c 100644 --- a/app/components/ui/FeatureCard.tsx +++ b/app/components/ui/FeatureCard.tsx @@ -9,9 +9,10 @@ interface FeatureCardProps { title: string; description: string; delay?: number; + isDarkMode?: boolean; } -export default function FeatureCard({ icon, title, description, delay = 0 }: FeatureCardProps) { +export default function FeatureCard({ icon, title, description, delay = 0, isDarkMode = false }: FeatureCardProps) { return ( -
+
-
+
{icon}
-

{title}

-

+

+ {title} +

+

{description}

{/* Learn more */} @@ -65,8 +78,12 @@ export default function FeatureCard({ icon, title, description, delay = 0 }: Fea
{/* Background decoration */} -
-
+
+
diff --git a/app/contact/page.tsx b/app/contact/page.tsx index 2aeacd8..f4dc938 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import Link from 'next/link'; import { motion } from 'framer-motion'; @@ -14,6 +14,7 @@ const fadeIn = { }; export default function Contact() { + const [isDarkMode, setIsDarkMode] = useState(false); const [formState, setFormState] = useState({ name: '', email: '', @@ -23,6 +24,21 @@ export default function Contact() { const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitted, setIsSubmitted] = useState(false); + // Load dark mode preference from localStorage + useEffect(() => { + const savedDarkMode = localStorage.getItem('darkMode'); + if (savedDarkMode !== null) { + setIsDarkMode(JSON.parse(savedDarkMode)); + } + }, []); + + // Toggle dark mode + const toggleDarkMode = () => { + const newDarkMode = !isDarkMode; + setIsDarkMode(newDarkMode); + localStorage.setItem('darkMode', JSON.stringify(newDarkMode)); + }; + const handleChange = (e: React.ChangeEvent) => { setFormState({ ...formState, @@ -66,8 +82,38 @@ export default function Contact() { return ( -
-
+
+ {/* Dark Mode Toggle */} + + {isDarkMode ? ( + + + + ) : ( + + + + )} + + +
-

+

Contact Us

-

+

Have questions about Visiflow? Need assistance with your device? Our team is here to help you protect your community from flood disasters.

@@ -93,19 +145,29 @@ export default function Contact() { animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.5, delay: 0.2 }} > -
-

Get in Touch

+
+

Get in Touch

-
+
-

Address

-

+

Address

+

Kamand
Mandi
Himachal Pradesh - 175075 @@ -114,29 +176,41 @@ export default function Contact() {

-
+
-

Phone

-

+91 7488011618

-

Mon-Fri, 9am-5pm PST

+

Phone

+

+91 7488011618

+

Mon-Fri, 9am-5pm PST

-
+
-

Email

-

admin@visiflow.com

-

We respond within 24 hours

+

Email

+

admin@visiflow.com

+

We respond within 24 hours

diff --git a/app/page.tsx b/app/page.tsx index f4738fd..32db93d 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -30,6 +30,8 @@ const staggerContainer = { export default function Home() { const [scrollY, setScrollY] = useState(0); + const [isDarkMode, setIsDarkMode] = useState(false); + const [currentSlide, setCurrentSlide] = useState(0); const heroRef = useRef(null); const { scrollYProgress } = useScroll({ target: heroRef, @@ -44,6 +46,14 @@ export default function Home() { const y = useTransform(scrollYProgress, [0, 1], ["0%", "40%"]); const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0]); + // Load dark mode preference from localStorage + useEffect(() => { + const savedDarkMode = localStorage.getItem('darkMode'); + if (savedDarkMode !== null) { + setIsDarkMode(JSON.parse(savedDarkMode)); + } + }, []); + useEffect(() => { const handleScroll = () => { setScrollY(window.scrollY); @@ -53,33 +63,146 @@ export default function Home() { return () => window.removeEventListener("scroll", handleScroll); }, []); + // Background slider for flood scenes + const floodScenes = [ + { + title: "Water Body Monitoring", + description: "Real-time water level detection", + bgGradient: "from-slate-600 via-blue-600 to-indigo-600", + bgImage: "/monitoring-pattern.svg" + }, + { + title: "Flood Alerts", + description: "Early warning systems active", + bgGradient: "from-indigo-600 via-purple-600 to-blue-600", + bgImage: "/flood-pattern.svg" + }, + { + title: "Data Analytics", + description: "Live data visualization", + bgGradient: "from-blue-700 via-indigo-600 to-purple-600", + bgImage: "/hero-3d-bg.svg" + } + ]; + + // Auto-slide effect + useEffect(() => { + const interval = setInterval(() => { + setCurrentSlide((prev) => (prev + 1) % floodScenes.length); + }, 4000); + return () => clearInterval(interval); + }, []); + + // Toggle dark mode + const toggleDarkMode = () => { + const newDarkMode = !isDarkMode; + setIsDarkMode(newDarkMode); + localStorage.setItem('darkMode', JSON.stringify(newDarkMode)); + }; + return ( -
+ <> + + +
+ {/* Dark Mode Toggle */} + + {isDarkMode ? ( + + + + ) : ( + + + + )} + + {/* Hero Section */}
- {/* River Conservation Background Effect */} + {/* Animated Background Slider */} +
+ {floodScenes.map((scene, index) => ( + + {/* Background Image */} +
+ {/* Enhanced Gradient Overlay */} +
+ {/* Advanced 3D Pattern Overlay */} +
+ + ))} +
+ + {/* 3D Flood Visualization Background */} - {/* Option 1: Using CSS background with river conservation pattern */} -
- - {/* Additional overlay for depth */} -
- - - {/* Alternative Option 2: More detailed river conservation SVG pattern */} - + {/* 3D Water Waves */} - - - - - - - - - - - + + + + + + + + + - - {/* Main river flow */} - - - - {/* Conservation elements - trees and vegetation */} - - - - - - - - - - - - - - - - - - - - - {/* Fish and aquatic life representations */} - - - - - - - - {/* Water ripples */} - - - - - - - - + + + + {/* Particle System for Atmospheric Effect */} +
+ {[...Array(30)].map((_, i) => ( + + ))} +
-
+
+ {/* Add backdrop blur for better text readability */} +
View Live Data ):( Sign In to View Data @@ -215,7 +391,16 @@ export default function Home() { Learn More @@ -225,13 +410,29 @@ export default function Home() { {/* Account Links - Only show when not authenticated */} {!isAuthenticated && (
- Already have an account? + + Already have an account? +
- + Sign In - | - + | + Sign Up
@@ -245,16 +446,36 @@ export default function Home() { animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.8, delay: 0.3 }} > - {/* Animated Device Visual */} + {/* Enhanced Device Visual */}
-
V
+ {/* Enhanced 3D Background Pattern */} +
+ + + + + + + + + + + + + + + +
+ + {/* Large V Logo */} +
V
+ + {/* Centered Monitor Display */}
+ {/* Scene Title */} + {floodScenes[currentSlide].title} + + + {/* VISIFLOW Branding */} + -
- - VISIFLOW - -
+ > + VISIFLOW + + + {/* Simple Data Bars */}
{[1, 2, 3, 4, 5, 6].map(i => ( - {/* Animated elements */} + {/* Enhanced 3D floating badge */} + {/* Enhanced 3D glow effects */} + +
@@ -355,7 +664,7 @@ export default function Home() {
{/* Scroll indicator */} -
-

Scroll to explore

-
+

+ Scroll to explore +

+
- + */} + + {/* Background Slide Indicators */} +
+
+ {floodScenes.map((_, index) => ( +
+
+ + {floodScenes[currentSlide].title} + +

+ {floodScenes[currentSlide].description} +

+
+
{/* Features Section */} -
+
@@ -395,8 +743,14 @@ export default function Home() { viewport={{ once: true, margin: "-100px" }} variants={fadeIn} > -

Advanced Flood Detection Features

-

+

+ Advanced Flood Detection Features +

+

Visiflow combines cutting-edge sensor technology with advanced analytics to protect communities

@@ -411,6 +765,7 @@ export default function Home() { title="Real-time Monitoring" description="Get access to live data about river flow, water levels, and velocity analytics with millisecond precision." delay={0} + isDarkMode={isDarkMode} />
{/* Data Visualization Section */} -
+
-

Powerful Data Visualization

-

+

+ Powerful Data Visualization +

+

Make informed decisions with our interactive dashboards and real-time analytics

-

Monitor River Flow in Real-Time

-

+

+ Monitor River Flow in Real-Time +

+

Our dashboard provides instant access to critical river flow data, and historical comparisons to help you anticipate flood conditions before they become dangerous.

- Advanced algorithms + + Advanced algorithms +
- Historical data comparison + + Historical data comparison +
- Visualize flow of river + + Visualize flow of river +
View Live Data @@ -496,11 +877,19 @@ export default function Home() {
-
- {/* Sample Dashboard UI */} -
+
+ {/* Clean Sample Dashboard UI */} +
-

Water Level Monitor

+

+ Water Level Monitor +

@@ -508,76 +897,65 @@ export default function Home() {
-
- {/* Animated chart */} -
- {[...Array(20)].map((_, i) => ( +
+ {/* Simple animated chart */} +
+ {[...Array(8)].map((_, i) => ( 7 && i < 11 ? 'bg-blue-600' : - i > 4 && i < 14 ? 'bg-blue-500' : 'bg-blue-400' + className={`w-6 rounded-t ${ + isDarkMode ? 'bg-blue-400' : 'bg-blue-600' }`} animate={{ - height: [ - `${20 + (i % 3) * 20}%`, - `${20 + ((i + 2) % 5) * 15}%`, - `${20 + (i % 3) * 20}%` - ] + height: [`${30 + (i % 3) * 20}px`, `${20 + (i % 3) * 25}px`, `${30 + (i % 3) * 20}px`] }} transition={{ - duration: 3 + (i % 3), + duration: 2 + (i * 0.2), repeat: Infinity, repeatType: "reverse" - }} + }} /> ))}
-
-

Current Level

+
+

+ Current Level +

2.4m
-
-

Status

-

Normal

+
+

+ Status +

+

+ Normal +

- - {/* Floating elements */} - -
@@ -586,7 +964,11 @@ export default function Home() {
{/* Call to Action Section */} -
+
Get Started Today - {/* - - Request Demo - - */}
@@ -644,5 +1022,6 @@ export default function Home() { {/* Footer */}
+ ); } \ No newline at end of file diff --git a/app/profile/page.tsx b/app/profile/page.tsx index b1deadd..82d8265 100644 --- a/app/profile/page.tsx +++ b/app/profile/page.tsx @@ -13,6 +13,7 @@ export default function ProfilePage() { const [isEditing, setIsEditing] = useState(false); const [isSaving, setIsSaving] = useState(false); const [message, setMessage] = useState({ type: '', text: '' }); + const [isDarkMode, setIsDarkMode] = useState(false); // Image upload state const [profileImage, setProfileImage] = useState(null); @@ -101,6 +102,21 @@ export default function ProfilePage() { } }, [isEditing]); + // Load dark mode preference from localStorage + useEffect(() => { + const savedDarkMode = localStorage.getItem('darkMode'); + if (savedDarkMode !== null) { + setIsDarkMode(JSON.parse(savedDarkMode)); + } + }, []); + + // Toggle dark mode + const toggleDarkMode = () => { + const newDarkMode = !isDarkMode; + setIsDarkMode(newDarkMode); + localStorage.setItem('darkMode', JSON.stringify(newDarkMode)); + }; + const handleTabChange = (tab: string) => { setActiveTab(tab); }; @@ -233,10 +249,40 @@ export default function ProfilePage() { } return ( -
+
+ {/* Dark Mode Toggle */} + + {isDarkMode ? ( + + + + ) : ( + + + + )} + +
{formData.location && ( {/* Tabs */} -
+