Skip to content

Commit f48f7de

Browse files
saurav-kumar-sah-devsaurav-kumar-sah-dev
committed
feat: Enhanced navbar and footer with colorful themes and profile features
- Updated navbar with teal/emerald color scheme and profile image display - Enhanced footer with orange/red color scheme and animations - Added profile image support with name/username fallback logic - Removed theme toggle from navbar (kept only in profile settings) - Fixed FiSparkles import error in About.jsx (replaced with FiStar) - Improved mobile responsiveness for profile display - Added floating orbs and gradient animations to footer - Enhanced visual effects and hover animations throughout
1 parent 317ac70 commit f48f7de

4 files changed

Lines changed: 555 additions & 155 deletions

File tree

‎client/src/App.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import Register from './pages/Auth/Register';
1717
import TermsOfService from './pages/TermsOfService';
1818
import PrivacyPolicy from './pages/PrivacyPolicy';
1919
import CookiePolicy from './pages/CookiePolicy';
20+
import About from './pages/About';
2021
import NotFound from './pages/NotFound';
2122
import ProtectedRoute from './components/Auth/ProtectedRoute';
2223
import PublicRoute from './components/Auth/PublicRoute';
@@ -98,6 +99,7 @@ function App() {
9899
</PublicRoute>
99100
}
100101
/>
102+
<Route path="/about" element={<About />} />
101103
<Route path="/terms" element={<TermsOfService />} />
102104
<Route path="/privacy" element={<PrivacyPolicy />} />
103105
<Route path="/cookies" element={<CookiePolicy />} />

‎client/src/components/Layout/Footer.jsx‎

Lines changed: 171 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,167 +1,194 @@
11
import React from 'react';
22
import { Link } from 'react-router-dom';
3-
import { FiHeart } from 'react-icons/fi';
3+
import { FiHeart, FiCode, FiZap, FiShield, FiGlobe, FiMail, FiGithub, FiLinkedin, FiExternalLink } from 'react-icons/fi';
44

55
const Footer = () => {
66
return (
7-
<footer className="bg-gray-900 border-t border-gray-800">
8-
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
9-
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
10-
11-
{/* Brand Section */}
12-
<div className="md:col-span-1">
13-
<div className="flex items-center mb-4">
14-
<div className="w-8 h-8 bg-gradient-to-r from-primary-500 to-purple-500 rounded-lg flex items-center justify-center mr-3">
15-
<span className="text-white font-bold text-sm">S</span>
7+
<footer className="relative bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 border-t border-gray-700/50 overflow-hidden">
8+
{/* Background Pattern */}
9+
<div className="absolute inset-0 opacity-5">
10+
<div className="absolute inset-0" style={{
11+
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.1) 1px, transparent 0)`,
12+
backgroundSize: '20px 20px'
13+
}}></div>
14+
</div>
15+
16+
{/* Gradient Overlay */}
17+
<div className="absolute inset-0 bg-gradient-to-r from-primary-500/5 via-purple-500/5 to-primary-500/5"></div>
18+
19+
<div className="relative container mx-auto px-4 sm:px-6 lg:px-8">
20+
{/* Main Footer Content */}
21+
<div className="py-12">
22+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
23+
24+
{/* Brand Section */}
25+
<div className="lg:col-span-1">
26+
<div className="flex items-center mb-6">
27+
<div className="relative">
28+
<div className="w-12 h-12 bg-gradient-to-br from-primary-500 via-primary-600 to-purple-600 rounded-xl flex items-center justify-center mr-4 shadow-lg shadow-primary-500/25">
29+
<FiCode className="text-white text-xl" />
30+
</div>
31+
<div className="absolute -top-1 -right-1 w-4 h-4 bg-gradient-to-r from-green-400 to-emerald-500 rounded-full animate-pulse"></div>
32+
</div>
33+
<div>
34+
<h3 className="text-2xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
35+
SyncRunCode
36+
</h3>
37+
<p className="text-sm text-gray-400 font-medium">Online Code Compiler</p>
38+
</div>
39+
</div>
40+
<p className="text-gray-400 text-sm leading-relaxed mb-6">
41+
Compile and run your code online with support for multiple programming languages.
42+
Fast, secure, and developer-friendly.
43+
</p>
44+
45+
{/* Feature Icons */}
46+
<div className="flex items-center space-x-4 text-xs text-gray-500">
47+
<div className="flex items-center space-x-1">
48+
<FiZap className="text-yellow-400" />
49+
<span>Fast</span>
50+
</div>
51+
<div className="flex items-center space-x-1">
52+
<FiShield className="text-green-400" />
53+
<span>Secure</span>
54+
</div>
55+
<div className="flex items-center space-x-1">
56+
<FiGlobe className="text-blue-400" />
57+
<span>Online</span>
58+
</div>
1659
</div>
17-
<span className="text-xl font-bold text-white">SyncRunCode</span>
1860
</div>
19-
<p className="text-gray-400 text-sm mb-4 max-w-xs">
20-
SyncRunCode - The ultimate real-time collaborative code compiler supporting multiple programming languages with seamless collaboration.
21-
</p>
22-
<div className="flex space-x-4">
23-
<a
24-
href="https://github.com/saurav-kumar-sah-dev"
25-
target="_blank"
26-
rel="noopener noreferrer"
27-
className="text-gray-400 hover:text-primary-400 transition-colors"
28-
aria-label="GitHub"
29-
>
30-
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
31-
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
32-
</svg>
33-
</a>
34-
<a
35-
href="https://www.linkedin.com/in/sauravkumarsah-dev/"
36-
target="_blank"
37-
rel="noopener noreferrer"
38-
className="text-gray-400 hover:text-primary-400 transition-colors"
39-
aria-label="LinkedIn"
40-
>
41-
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
42-
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
43-
</svg>
44-
</a>
45-
<a
46-
href="https://saurav-portfolio-dun.vercel.app/"
47-
target="_blank"
48-
rel="noopener noreferrer"
49-
className="text-gray-400 hover:text-primary-400 transition-colors"
50-
aria-label="Portfolio Website"
51-
>
52-
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
53-
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
54-
</svg>
55-
</a>
61+
62+
{/* Quick Links */}
63+
<div>
64+
<h4 className="text-white font-semibold text-lg mb-6 relative">
65+
Quick Links
66+
<div className="absolute -bottom-2 left-0 w-8 h-0.5 bg-gradient-to-r from-primary-500 to-purple-500 rounded-full"></div>
67+
</h4>
68+
<ul className="space-y-3">
69+
{[
70+
{ name: 'Home', path: '/' },
71+
{ name: 'About', path: '/about' },
72+
{ name: 'Compiler', path: '/compiler' },
73+
{ name: 'Projects', path: '/projects' },
74+
{ name: 'Profile', path: '/profile' }
75+
].map((link) => (
76+
<li key={link.name}>
77+
<Link
78+
to={link.path}
79+
className="text-gray-400 hover:text-primary-400 transition-all duration-300 hover:translate-x-1 flex items-center group"
80+
>
81+
<span className="w-1 h-1 bg-gray-500 rounded-full mr-3 group-hover:bg-primary-400 transition-colors"></span>
82+
{link.name}
83+
</Link>
84+
</li>
85+
))}
86+
</ul>
5687
</div>
57-
</div>
5888

59-
{/* Features Section */}
60-
<div>
61-
<h3 className="text-white font-semibold mb-4">Features</h3>
62-
<ul className="space-y-2">
63-
<li>
64-
<a href="#" className="text-gray-400 hover:text-white transition-colors">
65-
Real-time Collaboration
66-
</a>
67-
</li>
68-
<li>
69-
<a href="#" className="text-gray-400 hover:text-white transition-colors">
70-
Multi-language Support
71-
</a>
72-
</li>
73-
<li>
74-
<a href="#" className="text-gray-400 hover:text-white transition-colors">
75-
Code Execution
76-
</a>
77-
</li>
78-
<li>
79-
<a href="#" className="text-gray-400 hover:text-white transition-colors">
80-
Project Management
81-
</a>
82-
</li>
83-
</ul>
84-
</div>
89+
{/* Legal Links */}
90+
<div>
91+
<h4 className="text-white font-semibold text-lg mb-6 relative">
92+
Legal
93+
<div className="absolute -bottom-2 left-0 w-8 h-0.5 bg-gradient-to-r from-primary-500 to-purple-500 rounded-full"></div>
94+
</h4>
95+
<ul className="space-y-3">
96+
{[
97+
{ name: 'Privacy Policy', path: '/privacy' },
98+
{ name: 'Terms of Service', path: '/terms' },
99+
{ name: 'Cookie Policy', path: '/cookies' }
100+
].map((link) => (
101+
<li key={link.name}>
102+
<Link
103+
to={link.path}
104+
className="text-gray-400 hover:text-primary-400 transition-all duration-300 hover:translate-x-1 flex items-center group"
105+
>
106+
<span className="w-1 h-1 bg-gray-500 rounded-full mr-3 group-hover:bg-primary-400 transition-colors"></span>
107+
{link.name}
108+
</Link>
109+
</li>
110+
))}
111+
</ul>
112+
</div>
85113

86-
{/* Resources Section */}
87-
<div>
88-
<h3 className="text-white font-semibold mb-4">Resources</h3>
89-
<ul className="space-y-2">
90-
<li>
91-
<a href="#" className="text-gray-400 hover:text-white transition-colors">
92-
Documentation
93-
</a>
94-
</li>
95-
<li>
96-
<a href="#" className="text-gray-400 hover:text-white transition-colors">
97-
API Reference
98-
</a>
99-
</li>
100-
<li>
101-
<a href="#" className="text-gray-400 hover:text-white transition-colors">
102-
Tutorials
103-
</a>
104-
</li>
105-
<li>
106-
<a href="#" className="text-gray-400 hover:text-white transition-colors">
107-
Examples
114+
{/* Contact & Social */}
115+
<div>
116+
<h4 className="text-white font-semibold text-lg mb-6 relative">
117+
Connect
118+
<div className="absolute -bottom-2 left-0 w-8 h-0.5 bg-gradient-to-r from-primary-500 to-purple-500 rounded-full"></div>
119+
</h4>
120+
121+
{/* Contact Info */}
122+
<div className="mb-6">
123+
<a
124+
href="https://saurav-portfolio-dun.vercel.app/contact"
125+
target="_blank"
126+
rel="noopener noreferrer"
127+
className="flex items-center text-gray-400 text-sm mb-2 group hover:text-primary-400 transition-colors"
128+
>
129+
<FiMail className="mr-3 text-primary-400 group-hover:animate-pulse" />
130+
<span>Contact Me</span>
108131
</a>
109-
</li>
110-
</ul>
111-
</div>
132+
<p className="text-gray-500 text-xs ml-6">sauravshubham903@gmail.com</p>
133+
</div>
112134

113-
{/* Support Section */}
114-
<div>
115-
<h3 className="text-white font-semibold mb-4">Support</h3>
116-
<ul className="space-y-2">
117-
<li>
118-
<a href="#" className="text-gray-400 hover:text-white transition-colors">
119-
Help Center
120-
</a>
121-
</li>
122-
<li>
123-
<a href="#" className="text-gray-400 hover:text-white transition-colors">
124-
Contact Us
125-
</a>
126-
</li>
127-
<li>
128-
<a href="#" className="text-gray-400 hover:text-white transition-colors">
129-
Bug Reports
130-
</a>
131-
</li>
132-
<li>
133-
<a href="#" className="text-gray-400 hover:text-white transition-colors">
134-
Feature Requests
135-
</a>
136-
</li>
137-
</ul>
135+
{/* Social Links */}
136+
<div className="space-y-4">
137+
<p className="text-gray-400 text-sm font-medium">Follow us</p>
138+
<div className="flex space-x-3">
139+
{[
140+
{
141+
href: 'https://github.com/saurav-kumar-sah-dev',
142+
icon: FiGithub,
143+
label: 'GitHub',
144+
color: 'hover:text-gray-300'
145+
},
146+
{
147+
href: 'https://www.linkedin.com/in/sauravkumarsah-dev/',
148+
icon: FiLinkedin,
149+
label: 'LinkedIn',
150+
color: 'hover:text-blue-400'
151+
},
152+
{
153+
href: 'https://saurav-portfolio-dun.vercel.app/',
154+
icon: FiExternalLink,
155+
label: 'Portfolio',
156+
color: 'hover:text-purple-400'
157+
}
158+
].map((social) => (
159+
<a
160+
key={social.label}
161+
href={social.href}
162+
target="_blank"
163+
rel="noopener noreferrer"
164+
className={`group relative p-3 bg-gray-800/50 hover:bg-gray-700/50 rounded-lg transition-all duration-300 hover:scale-110 hover:shadow-lg ${social.color}`}
165+
aria-label={social.label}
166+
>
167+
<social.icon className="w-5 h-5 text-gray-400 group-hover:text-white transition-colors" />
168+
<div className="absolute -top-1 -right-1 w-2 h-2 bg-gradient-to-r from-primary-500 to-purple-500 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
169+
</a>
170+
))}
171+
</div>
172+
</div>
173+
</div>
138174
</div>
139175
</div>
140176

141177
{/* Bottom Section */}
142-
<div className="border-t border-gray-800 pt-8">
178+
<div className="border-t border-gray-700/50 py-6">
143179
<div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
144-
<div className="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-6">
145-
<p className="text-gray-400 text-sm">
146-
© 2024 SyncRunCode by <a href="https://saurav-portfolio-dun.vercel.app/" target="_blank" rel="noopener noreferrer" className="text-primary-400 hover:text-primary-300 transition-colors">Saurav Kumar Sah</a>. All rights reserved.
147-
</p>
148-
<div className="flex space-x-6 text-sm">
149-
<Link to="/privacy" className="text-gray-400 hover:text-white transition-colors">
150-
Privacy Policy
151-
</Link>
152-
<Link to="/terms" className="text-gray-400 hover:text-white transition-colors">
153-
Terms of Service
154-
</Link>
155-
<Link to="/cookies" className="text-gray-400 hover:text-white transition-colors">
156-
Cookie Policy
157-
</Link>
158-
</div>
159-
</div>
160180

181+
{/* Copyright */}
161182
<div className="flex items-center space-x-2 text-sm text-gray-400">
162-
<span>Built with</span>
183+
<span>© 2024 SyncRunCode. All rights reserved.</span>
163184
<FiHeart className="text-red-500 animate-pulse" />
164-
<span>for developers worldwide</span>
185+
</div>
186+
187+
188+
{/* Status Indicator */}
189+
<div className="flex items-center space-x-2 text-xs text-gray-500">
190+
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
191+
<span>All systems operational</span>
165192
</div>
166193
</div>
167194
</div>

0 commit comments

Comments
 (0)