diff --git a/frontend/app/globals.css b/frontend/app/globals.css index a2dc41e..4aee959 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -22,5 +22,85 @@ body { background: var(--background); color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; + font-family: sans-serif; +} + +/* Custom Animations for Dynamic Homepage */ +@keyframes gradient-x { + 0%, 100% { + background-size: 200% 200%; + background-position: left center; + } + 50% { + background-size: 200% 200%; + background-position: right center; + } +} + +@keyframes float { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-10px); + } +} + +@keyframes pulse-glow { + 0%, 100% { + opacity: 0.5; + transform: scale(1); + } + 50% { + opacity: 0.8; + transform: scale(1.05); + } +} + +/* Animation Classes */ +.animate-gradient-x { + animation: gradient-x 4s ease infinite; +} + +.animate-float { + animation: float 3s ease-in-out infinite; +} + +.animate-pulse-glow { + animation: pulse-glow 2s ease-in-out infinite; +} + +/* Animation Delays */ +.animation-delay-1000 { + animation-delay: 1s; +} + +.animation-delay-2000 { + animation-delay: 2s; +} + +.animation-delay-3000 { + animation-delay: 3s; +} + +.animation-delay-4000 { + animation-delay: 4s; +} + +.animation-delay-5000 { + animation-delay: 5s; +} + +.animation-delay-6000 { + animation-delay: 6s; +} + +/* Smooth hover transitions */ +.hover-lift { + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.hover-lift:hover { + transform: translateY(-5px); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index f7fa87e..6b02e98 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -13,8 +13,8 @@ const geistMono = Geist_Mono({ }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Skinalyze", + description: "AI-powered skin disease detection platform. Upload photos or use your camera for instant skin condition analysis and health insights.", }; export default function RootLayout({ diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 21b686d..622bb4a 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -1,103 +1,507 @@ -import Image from "next/image"; +"use client"; + +import { useState } from "react"; +import NextImage from "next/image"; +// Union type for safer section navigation +type Section = "home" | "about" | "features" | "tutorial"; +type View = "main" | "login" | "signup"; export default function Home() { - return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
- -
- ("home"); + const [currentView, setCurrentView] = useState("main"); + + // Smooth scroll to section (switches to main page first if needed) + const scrollToSection = (sectionId: string) => { + // First switch to main page if not already there + if (currentView !== 'main') { + setCurrentView('main'); + } + + // Small delay to ensure the main page is rendered before scrolling + setTimeout(() => { + const element = document.getElementById(sectionId); + if (element) { + element.scrollIntoView({ behavior: 'smooth' }); + setActiveSection(sectionId as Section); + } + }, 100); + }; + + const NavButton = ({ section, label, isActive }: { section: Section; label: string; isActive: boolean }) => ( + + ); + + const ViewButton = ({ view, label, isActive }: { view: View; label: string; isActive: boolean }) => ( + + ); + + // Home Section Component + const HomeSection = () => ( +
+ {/* Floating Icons */} +
+
🔬
+
📱
+
🧬
+
🩺
+
🩹
+
💊
+
+ + {/* Hero Section */} +
+
+

+ Skinalyze +

+
+ +
+

+ AI-powered skin disease detection through image analysis. Upload a photo or use your camera to get instant skin condition insights +

+ + {/* Feature badges */} +
+ + ⚡ Instant Analysis + + + 🔒 Secure & Private + +
+
+ +
+ +
+
+
+ ); + + // About Section Component + const AboutSection = () => ( +
+ {/* Background Animation Elements */} +
+
+
+
+
+ +
+ {/* Enhanced Title */} +
+

+ About Skinalyze +

+
+
+ + {/* Mission Content */} +
+

+ We're democratizing access to skin health insights through cutting-edge AI technology. Our mission is to provide early detection and awareness of skin conditions, making dermatological screening accessible to everyone, anywhere. +

+ + {/* Mission Values */} +
+
+ 🌍 Accessible +
+
+ 💡 Innovative +
+
+ 🔒 Reliable +
+
+
+
+
+ ); + + // Features Section Component + const FeaturesSection = () => ( +
+ {/* Background Animation Elements */} +
+
+
+
+
+ +
+ {/* Enhanced Title */} +
+

+ Features +

+
+
+ + {/* How It Works Section */} +
+
+
+

How It Works

+
+

+ Using advanced machine learning algorithms trained on thousands of dermatological images, + Skinalyze can identify potential skin conditions, analyze skin health, and provide + personalized recommendations for skincare and medical consultation. +

+
+ AI-Powered • Fast • Accurate +
+
+
+ + {/* Enhanced Feature Cards */} +
+
+
+ 📸 +
+

Image Analysis

+

Upload photos for instant AI-powered skin condition analysis with 95% accuracy

+
+ ⚡ Instant Results +
+
+ +
+
+ 📷 +
+

Camera Detection

+

Use your device camera for real-time skin health monitoring and analysis

+
+ 📱 Real-time Scan +
+
+ +
+
+ 🔬 +
+

AI Insights

+

Machine learning helps identify potential skin conditions and provides recommendations

+
+ 🎯 Smart Analysis +
+
+
+
+
+ ); + + // Tutorial Section Component + const TutorialSection = () => ( +
+
+

How to Use Skinalyze

+ +
+ {/* Step 1 */} +
+
+ 1 +
+
+

Upload Your Image

+

+ Take a clear, well-lit photo of your skin condition or upload an existing image from your device. + Make sure the area is visible and the image is in focus. +

+
+

+ Tip: Use natural lighting and avoid shadows for best results. +

+
+
+
+ + {/* Step 2 */} +
+
+ 2 +
+
+

AI Analysis

+

+ Our advanced AI algorithms will analyze your image within seconds, identifying potential skin conditions, + analyzing texture, pigmentation, and other important factors. +

+
+

+ Processing: Analysis typically takes 2-5 seconds. +

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

Get Your Results

+

+ Review your personalized analysis report including potential conditions identified, + confidence levels, and recommended next steps or skincare advice. +

+
+

+ Remember: This is for informational purposes only. Consult a dermatologist for medical advice. +

+
+
+
+
+ +
+ +
+
+
+ ); + + // Main Page Component (Home + About + Features + Tutorial) + const MainPage = () => ( +
+ + + + +
+ ); + + // Login Page Component + const LoginPage = () => ( +
+
+

Welcome Back

+
e.preventDefault()}> +
+ + +
+
+ + +
+ + +
+

+ Don't have an account?{' '} + +

+
+
+ ); + + // SignUp Page Component + const SignUpPage = () => ( +
+
+

Create Account

+
e.preventDefault()}> +
+
+ + +
+
+ + +
+
+
+ + - Deploy now - - +
+ + +
+
+ + +
+ Terms of Service and{' '} + Privacy Policy + + + + +

+ Already have an account?{' '} + +

+
+
+ ); + + return ( +
+ {/* Dynamic Background Pattern */} +
+
+
+
+
+
+
+ + {/* Navigation */} + + + {/* Main Content */} +
{/* Added padding-top to account for fixed navbar */} + {currentView === 'main' && } + {currentView === 'login' && } + {currentView === 'signup' && }
-
); -} +} \ No newline at end of file diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 129336c..58d0d5e 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1213,6 +1213,66 @@ "node": ">=14.0.0" } }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": { + "version": "1.5.0", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/wasi-threads": "1.1.0", + "tslib": "^2.4.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": { + "version": "1.5.0", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": { + "version": "1.1.0", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": { + "version": "1.0.5", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/core": "^1.5.0", + "@emnapi/runtime": "^1.5.0", + "@tybys/wasm-util": "^0.10.1" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": { + "version": "0.10.1", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": { + "version": "2.8.1", + "dev": true, + "inBundle": true, + "license": "0BSD", + "optional": true + }, "node_modules/@tailwindcss/oxide-win32-arm64-msvc": { "version": "4.1.14", "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.14.tgz", diff --git a/frontend/public/LOGO.png b/frontend/public/LOGO.png new file mode 100644 index 0000000..9515d1f Binary files /dev/null and b/frontend/public/LOGO.png differ