Skip to content

theme change of landing page #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Gaurav-meena95 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

theme change of landing page #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import ProtectedRoute from "./components/ProtectedRoute";
import { AuthProvider, useAuth } from "./contexts/AuthContext";
import apiService from "./services/apiService";
import Footer from "./components/Footer";
import { ThemeProvider } from "./contexts/ThemeContext";


function DashboardPage({ mindmaps, onSelect, onCreate }) {
Expand Down Expand Up @@ -125,10 +126,16 @@ function AppContent() {
path="/mindmap/:id"
element={
<ProtectedRoute>
<Navbar
onCreate={handleCreate}
onLogout={logout}
/>
<MindMapRoute
mindmaps={mindmaps}
onSelect={handleSelect}
selectedId={selectedId}
/>
<Footer />
</ProtectedRoute>
}
/>
Expand All @@ -138,10 +145,12 @@ function AppContent() {

export default function App() {
return (
<AuthProvider>
<Router>
<AppContent />
</Router>
</AuthProvider>
<ThemeProvider>
<AuthProvider>
<Router>
<AppContent />
</Router>
</AuthProvider>
</ThemeProvider>
);
}
24 changes: 12 additions & 12 deletions src/Dashboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default function Dashboard({ onSelect, onCreate, mindmaps }) {
};

return (
<div className="min-h-screen bg-gray-50">
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
{/* Header */}
{/* <div className="bg-white border-b border-gray-200">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
Expand All @@ -51,7 +51,7 @@ export default function Dashboard({ onSelect, onCreate, mindmaps }) {
</div> */}

{/* Search and Controls */}
<div className="bg-white border-b border-gray-200">
<div className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div className="flex flex-col sm:flex-row gap-4 sm:items-center">
{/* Search */}
Expand All @@ -62,7 +62,7 @@ export default function Dashboard({ onSelect, onCreate, mindmaps }) {
placeholder="Search mind maps..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-sm"
className="w-full pl-10 pr-4 py-2.5 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400"
/>
</div>

Expand All @@ -71,7 +71,7 @@ export default function Dashboard({ onSelect, onCreate, mindmaps }) {
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value)}
className="border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none bg-white"
className="border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
>
<option value="updated">Recently updated</option>
<option value="name">Name A-Z</option>
Expand All @@ -98,8 +98,8 @@ export default function Dashboard({ onSelect, onCreate, mindmaps }) {
<div className="w-20 h-20 bg-blue-50 rounded-2xl flex items-center justify-center mx-auto mb-6">
<FiFolder className="w-10 h-10 text-blue-500" />
</div>
<h3 className="text-xl font-semibold text-gray-900 mb-2">No mind maps yet</h3>
<p className="text-gray-500 mb-8 max-w-sm mx-auto">
<h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">No mind maps yet</h3>
<p className="text-gray-500 dark:text-gray-400 mb-8 max-w-sm mx-auto">
Create your first mind map to start organizing your ideas.
</p>
<button
Expand All @@ -116,8 +116,8 @@ export default function Dashboard({ onSelect, onCreate, mindmaps }) {
<div className="w-20 h-20 bg-gray-50 rounded-2xl flex items-center justify-center mx-auto mb-6">
<FiSearch className="w-10 h-10 text-gray-400" />
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">No results found</h3>
<p className="text-gray-500">
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">No results found</h3>
<p className="text-gray-500 dark:text-gray-400">
No mind maps found matching "<span className="font-medium">{searchTerm}</span>"
</p>
</div>
Expand All @@ -127,21 +127,21 @@ export default function Dashboard({ onSelect, onCreate, mindmaps }) {
{sortedMindmaps.map((mm) => (
<div
key={mm.id}
className="bg-white rounded-xl border border-gray-200 hover:border-blue-200 hover:shadow-lg transition-all duration-200 cursor-pointer group"
className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 hover:border-blue-200 dark:hover:border-blue-800/40 hover:shadow-lg transition-all duration-200 cursor-pointer group"
onClick={() => onSelect(mm.id)}
>
<div className="p-6">
<div className="flex items-start justify-between mb-4">
<div className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center">
<div className="w-12 h-12 bg-blue-50 dark:bg-blue-900/30 rounded-xl flex items-center justify-center">
<FiEdit3 className="w-6 h-6 text-blue-600" />
</div>
</div>

<h3 className="font-semibold text-gray-900 mb-3 line-clamp-2" title={mm.name}>
<h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-3 line-clamp-2" title={mm.name}>
{mm.name}
</h3>

<div className="flex items-center justify-between text-sm text-gray-500">
<div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
<span className="flex items-center">
<FiFolder className="w-4 h-4 mr-1.5" />
{(mm.nodes && mm.nodes.length) || 0} nodes
Expand Down
71 changes: 43 additions & 28 deletions src/components/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,15 @@ import { useNavigate } from "react-router-dom";
import { FiCheck, FiZap, FiShield, FiUsers } from "react-icons/fi";
import logo from "../assets/mind-tinker-logo-new.png";
import Footer from "./Footer";
import { FiSun, FiMoon } from "react-icons/fi";
import { useTheme } from "../contexts/ThemeContext";

export default function Home() {
const navigate = useNavigate();
const { isDark, toggleTheme } = useTheme();

return (
<div className="min-h-screen bg-white animated-bg">
<div className="min-h-screen bg-white dark:bg-gray-900 animated-bg">


{/* Floating Particles */}
Expand All @@ -24,19 +27,31 @@ export default function Home() {
<div className="particle"></div>
</div>
{/* Navigation Header */}
<nav className="relative z-10 px-6 py-2 bg-white border-b border-gray-200">
<nav className="relative z-10 px-6 py-2 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
<div className="max-w-7xl mx-auto flex justify-between items-center">
{/* Logo */}
<div className="flex items-center space-x-3">
<img src={logo} alt="Mind Tinker" className="w-10 h-10 rounded-lg object-contain" />
<span className="text-gray-900 font-bold text-lg">Mind Tinker AI</span>
<span className="text-gray-900 dark:text-gray-100 font-bold text-lg">Mind Tinker AI</span>
</div>

{/* Auth Buttons */}
{/* Auth Buttons + Theme Toggle */}
<div className="flex items-center space-x-4">
<button
onClick={toggleTheme}
className="p-2 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
title={isDark ? "Switch to light" : "Switch to dark"}
aria-label="Toggle theme"
>
{isDark ? (
<FiSun className="w-5 h-5 text-amber-400" />
) : (
<FiMoon className="w-5 h-5 text-gray-700" />
)}
</button>
<button
onClick={() => navigate('/login')}
className="text-gray-600 hover:text-gray-900 transition-colors px-4 py-2"
className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors px-4 py-2"
>
Sign In
</button>
Expand All @@ -54,12 +69,12 @@ export default function Home() {
<section className="relative z-10 px-6 py-24 bg-transparent">
<div className="max-w-4xl mx-auto text-center">
{/* Main Heading */}
<h1 className="text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
<h1 className="text-5xl lg:text-6xl font-bold text-gray-900 dark:text-gray-100 mb-6 leading-tight">
Create Mind Maps in <span className="text-blue-600">Seconds</span>
</h1>

{/* Subtext */}
<p className="text-xl text-gray-600 mb-10 max-w-2xl mx-auto">
<p className="text-xl text-gray-600 dark:text-gray-300 mb-10 max-w-2xl mx-auto">
Transform your ideas into beautiful, organized mind maps with the power of AI.
Save hours of manual work and focus on what matters.
</p>
Expand All @@ -73,7 +88,7 @@ export default function Home() {
</button>

{/* Trust Indicators */}
<div className="flex items-center justify-center space-x-8 mt-12 text-sm text-gray-500">
<div className="flex items-center justify-center space-x-8 mt-12 text-sm text-gray-500 dark:text-gray-400">
<div className="flex items-center">
<FiCheck className="w-4 h-4 text-green-500 mr-1" />
No credit card required
Expand All @@ -91,14 +106,14 @@ export default function Home() {
</section>

{/* How it Works Section */}
<section className="relative z-10 px-6 py-20 bg-gray-50">
<section className="relative z-10 px-6 py-20 bg-gray-50 dark:bg-gray-950">
<div className="max-w-5xl mx-auto">
{/* Section Header */}
<div className="text-center mb-16">
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
How it works
</h2>
<p className="text-lg text-gray-600">
<p className="text-lg text-gray-600 dark:text-gray-300">
Three simple steps to transform your ideas into visual mind maps.
</p>
</div>
Expand All @@ -110,8 +125,8 @@ export default function Home() {
<div className="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
<span className="text-white font-bold text-2xl">1</span>
</div>
<h3 className="text-gray-900 font-bold text-xl mb-3">Input Your Ideas</h3>
<p className="text-gray-600">
<h3 className="text-gray-900 dark:text-gray-100 font-bold text-xl mb-3">Input Your Ideas</h3>
<p className="text-gray-600 dark:text-gray-300">
Simply type your concepts, topics, or project ideas into our intuitive interface.
</p>
</div>
Expand All @@ -121,8 +136,8 @@ export default function Home() {
<div className="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
<span className="text-white font-bold text-2xl">2</span>
</div>
<h3 className="text-gray-900 font-bold text-xl mb-3">AI Creates Structure</h3>
<p className="text-gray-600">
<h3 className="text-gray-900 dark:text-gray-100 font-bold text-xl mb-3">AI Creates Structure</h3>
<p className="text-gray-600 dark:text-gray-300">
Our AI analyzes your input and automatically creates logical connections and hierarchies.
</p>
</div>
Expand All @@ -132,8 +147,8 @@ export default function Home() {
<div className="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
<span className="text-white font-bold text-2xl">3</span>
</div>
<h3 className="text-gray-900 font-bold text-xl mb-3">Export & Share</h3>
<p className="text-gray-600">
<h3 className="text-gray-900 dark:text-gray-100 font-bold text-xl mb-3">Export & Share</h3>
<p className="text-gray-600 dark:text-gray-300">
Download your beautiful mind map or share it with your team for collaboration.
</p>
</div>
Expand All @@ -142,10 +157,10 @@ export default function Home() {
</section>

{/* Features Section */}
<section className="relative z-10 px-6 py-20 bg-white">
<section className="relative z-10 px-6 py-20 bg-white dark:bg-gray-900">
<div className="max-w-5xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
Why choose Mind Tinker?
</h2>
</div>
Expand All @@ -156,8 +171,8 @@ export default function Home() {
<div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-4">
<FiZap className="w-6 h-6 text-blue-600" />
</div>
<h3 className="text-gray-900 font-semibold text-lg mb-3">Lightning Fast</h3>
<p className="text-gray-600">
<h3 className="text-gray-900 dark:text-gray-100 font-semibold text-lg mb-3">Lightning Fast</h3>
<p className="text-gray-600 dark:text-gray-300">
Create complex mind maps in seconds, not hours. Our AI processes your ideas instantly.
</p>
</div>
Expand All @@ -167,8 +182,8 @@ export default function Home() {
<div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-4">
<FiShield className="w-6 h-6 text-blue-600" />
</div>
<h3 className="text-gray-900 font-semibold text-lg mb-3">Secure & Private</h3>
<p className="text-gray-600">
<h3 className="text-gray-900 dark:text-gray-100 font-semibold text-lg mb-3">Secure & Private</h3>
<p className="text-gray-600 dark:text-gray-300">
Your data is encrypted and stored securely. You maintain complete control over your information.
</p>
</div>
Expand All @@ -178,8 +193,8 @@ export default function Home() {
<div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-4">
<FiUsers className="w-6 h-6 text-blue-600" />
</div>
<h3 className="text-gray-900 font-semibold text-lg mb-3">Team Collaboration</h3>
<p className="text-gray-600">
<h3 className="text-gray-900 dark:text-gray-100 font-semibold text-lg mb-3">Team Collaboration</h3>
<p className="text-gray-600 dark:text-gray-300">
Share mind maps with your team and collaborate in real-time on projects and ideas.
</p>
</div>
Expand All @@ -188,12 +203,12 @@ export default function Home() {
</section>

{/* CTA Section */}
<section className="relative z-10 px-6 py-20 bg-gray-50">
<section className="relative z-10 px-6 py-20 bg-gray-50 dark:bg-gray-950">
<div className="max-w-3xl mx-auto text-center">
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
Start creating mind maps today
</h2>
<p className="text-lg text-gray-600 mb-8">
<p className="text-lg text-gray-600 dark:text-gray-300 mb-8">
Join thousands of users who save hours every week with AI-powered mind mapping.
</p>
<button
Expand Down
Loading