georges/unai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 Fix UI transparency and color coordination issues

Browse Source 
- Fix navigation transparency with proper backdrop blur and contrast
- Change currency from USD to OMR for Omani market
- Add video section to landing page with proper looping
- Improve hero section readability with better contrast
- Fix navigation positioning in layout.tsx
- Enhance color coordination across all components
- Add proper glass effect styling for modern UI
This commit is contained in:
Krikorios
2025-07-20 11:01:38 +04:00
parent 52758cb799
commit f895052792
5 changed files with 76 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admissions/page.tsx
+3 -3
View File
@@ -11,7 +11,7 @@ export default function AdmissionsPage() {
"SAT/ACT scores (optional for 2024)", "SAT/ACT scores (optional for 2024)",
"Personal statement", "Personal statement",
"Letters of recommendation", "Letters of recommendation",
"Application fee: $50" "Application fee: OMR 20"
] ]
}, },
{ {
@@ -22,7 +22,7 @@ export default function AdmissionsPage() {
"GRE/GMAT scores", "GRE/GMAT scores",
"Research proposal", "Research proposal",
"Letters of recommendation (3)", "Letters of recommendation (3)",
"Application fee: $75" "Application fee: OMR 30"
] ]
}, },
{ {
@@ -33,7 +33,7 @@ export default function AdmissionsPage() {
"Financial documentation", "Financial documentation",
"Visa requirements", "Visa requirements",
"Health insurance", "Health insurance",
"Application fee: $100" "Application fee: OMR 40"
] ]
} }
]; ];
src/app/layout.tsx
+2
View File
@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google';
import './globals.css'; import './globals.css';
import { ClientProviders } from '@/components/providers/ClientProviders'; import { ClientProviders } from '@/components/providers/ClientProviders';
import { AIChatButton } from '@/components/Chat/AIChatButton'; import { AIChatButton } from '@/components/Chat/AIChatButton';
import { MainNavigation } from '@/components/Navigation/MainNavigation';
const inter = Inter({ subsets: ['latin'] }); const inter = Inter({ subsets: ['latin'] });
@@ -20,6 +21,7 @@ export default function RootLayout({
<html lang="en"> <html lang="en">
<body className={inter.className}> <body className={inter.className}>
<ClientProviders> <ClientProviders>
<MainNavigation />
{children} {children}
<AIChatButton /> <AIChatButton />
</ClientProviders> </ClientProviders>
src/app/page.tsx
+44 -42
View File
@@ -3,43 +3,12 @@ import Link from 'next/link';
export default function HomePage() { export default function HomePage() {
return ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-white">
{/* Navigation */}
<nav className="bg-white shadow-lg">
<div className="container mx-auto px-4">
<div className="flex justify-between items-center h-16">
<Link href="/" className="flex items-center space-x-3">
<div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
<span className="text-white font-bold text-lg">U</span>
</div>
<div>
<div className="text-xl font-bold text-gray-900">University Portal</div>
<div className="text-xs text-gray-600">Excellence in Education</div>
</div>
</Link>
<div className="hidden md:flex items-center space-x-8">
<Link href="/programs" className="text-gray-700 hover:text-blue-600">Programs</Link>
<Link href="/admissions" className="text-gray-700 hover:text-blue-600">Admissions</Link>
<Link href="/research" className="text-gray-700 hover:text-blue-600">Research</Link>
<Link href="/campus" className="text-gray-700 hover:text-blue-600">Campus</Link>
<Link href="/contact" className="text-gray-700 hover:text-blue-600">Contact</Link>
</div>
<div className="flex items-center space-x-4">
<Link href="/login" className="text-gray-700 hover:text-blue-600">Sign In</Link>
<Link href="/register" className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
Apply Now
</Link>
</div>
</div>
</div>
</nav>
{/* Hero Section */} {/* Hero Section */}
<section className="bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 text-white py-20"> <section className="bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 text-white py-20">
<div className="container mx-auto px-4 text-center"> <div className="container mx-auto px-4 text-center">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="inline-flex items-center px-4 py-2 bg-white bg-opacity-10 rounded-full text-sm font-medium mb-8"> <div className="inline-flex items-center px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full text-sm font-medium mb-8 border border-white/20">
<span className="w-2 h-2 bg-green-400 rounded-full mr-2"></span> <span className="w-2 h-2 bg-green-400 rounded-full mr-2"></span>
Established 1995 • Accredited Institution Established 1995 • Accredited Institution
</div> </div>
@@ -73,27 +42,60 @@ export default function HomePage() {
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-4xl mx-auto"> <div className="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
<div className="text-center p-6 bg-white bg-opacity-10 rounded-lg"> <div className="text-center p-6 bg-white/20 backdrop-blur-sm rounded-lg border border-white/20">
<div className="text-3xl font-bold text-white mb-2">25,000+</div> <div className="text-3xl font-bold text-white mb-2">25,000+</div>
<div className="text-blue-200 text-sm">Students Enrolled</div> <div className="text-blue-100 text-sm font-medium">Students Enrolled</div>
</div> </div>
<div className="text-center p-6 bg-white bg-opacity-10 rounded-lg"> <div className="text-center p-6 bg-white/20 backdrop-blur-sm rounded-lg border border-white/20">
<div className="text-3xl font-bold text-white mb-2">150+</div> <div className="text-3xl font-bold text-white mb-2">150+</div>
<div className="text-blue-200 text-sm">Academic Programs</div> <div className="text-blue-100 text-sm font-medium">Academic Programs</div>
</div> </div>
<div className="text-center p-6 bg-white bg-opacity-10 rounded-lg"> <div className="text-center p-6 bg-white/20 backdrop-blur-sm rounded-lg border border-white/20">
<div className="text-3xl font-bold text-white mb-2">95%</div> <div className="text-3xl font-bold text-white mb-2">95%</div>
<div className="text-blue-200 text-sm">Graduate Success Rate</div> <div className="text-blue-100 text-sm font-medium">Graduate Success Rate</div>
</div> </div>
<div className="text-center p-6 bg-white bg-opacity-10 rounded-lg"> <div className="text-center p-6 bg-white/20 backdrop-blur-sm rounded-lg border border-white/20">
<div className="text-3xl font-bold text-white mb-2">$2.5B</div> <div className="text-3xl font-bold text-white mb-2">OMR 2.5B</div>
<div className="text-blue-200 text-sm">Research Funding</div> <div className="text-blue-100 text-sm font-medium">Research Funding</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{/* Video Section */}
<section className="py-20 bg-gray-900">
<div className="container mx-auto px-4">
<div className="text-center mb-12">
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
Experience Our
<span className="text-blue-400"> Campus</span>
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto">
Take a virtual tour of our state-of-the-art facilities and discover the vibrant
learning environment that awaits you at our university.
</p>
</div>
<div className="max-w-6xl mx-auto">
<div className="relative rounded-2xl overflow-hidden shadow-2xl">
<video
className="w-full h-auto"
autoPlay
muted
loop
playsInline
poster="/images/hero1.jpg"
>
<source src="/Campus%20Tech%20Transformation%20July%2020%202025.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
</div>
</div>
</div>
</section>
{/* Features Section */} {/* Features Section */}
<section className="py-20 bg-gray-50"> <section className="py-20 bg-gray-50">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
@@ -125,7 +127,7 @@ export default function HomePage() {
</div> </div>
<h3 className="text-xl font-bold text-gray-900 mb-4">Research Leadership</h3> <h3 className="text-xl font-bold text-gray-900 mb-4">Research Leadership</h3>
<p className="text-gray-600"> <p className="text-gray-600">
Leading breakthrough research in medicine, technology, and environmental sciences with over $2.5 billion in research funding. Leading breakthrough research in medicine, technology, and environmental sciences with over OMR 2.5 billion in research funding.
</p> </p>
</div> </div>
src/components/Hero/HeroSection.tsx
+1 -1
View File
@@ -85,7 +85,7 @@ export function HeroSection() {
<div className="text-blue-200 text-sm">Graduate Success Rate</div> <div className="text-blue-200 text-sm">Graduate Success Rate</div>
</div> </div>
<div className="text-center p-6 bg-white bg-opacity-10 backdrop-blur-sm rounded-lg border border-white border-opacity-20"> <div className="text-center p-6 bg-white bg-opacity-10 backdrop-blur-sm rounded-lg border border-white border-opacity-20">
<div className="text-3xl font-bold text-white mb-2">$2.5B</div> <div className="text-3xl font-bold text-white mb-2">OMR 2.5B</div>
<div className="text-blue-200 text-sm">Research Funding</div> <div className="text-blue-200 text-sm">Research Funding</div>
</div> </div>
</div> </div>
src/components/Navigation/MainNavigation.tsx
+26 -14
View File
@@ -45,7 +45,7 @@ export function MainNavigation() {
return ( return (
<nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${ <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
isScrolled ? 'bg-white shadow-lg' : 'bg-transparent' isScrolled ? 'bg-white shadow-lg' : 'bg-white/95 backdrop-blur-sm shadow-sm'
}`}> }`}>
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="flex items-center justify-between h-16 lg:h-20"> <div className="flex items-center justify-between h-16 lg:h-20">
@@ -55,15 +55,17 @@ export function MainNavigation() {
<span className="text-white font-bold text-lg">U</span> <span className="text-white font-bold text-lg">U</span>
</div> </div>
<div className="hidden sm:block"> <div className="hidden sm:block">
<div className="text-xl font-bold text-gray-900">University Portal</div> <div className={`text-xl font-bold ${isScrolled ? 'text-gray-900' : 'text-gray-800'}`}>University Portal</div>
<div className="text-xs text-gray-600">Excellence in Education</div> <div className={`text-xs ${isScrolled ? 'text-gray-600' : 'text-gray-500'}`}>Excellence in Education</div>
</div> </div>
</Link> </Link>
{/* Desktop Navigation */} {/* Desktop Navigation */}
<div className="hidden lg:flex items-center space-x-8"> <div className="hidden lg:flex items-center space-x-8">
<div className="relative group"> <div className="relative group">
<button className="flex items-center space-x-1 py-2 text-gray-700 hover:text-blue-600 transition-colors"> <button className={`flex items-center space-x-1 py-2 transition-colors ${
isScrolled ? 'text-gray-700 hover:text-blue-600' : 'text-gray-800 hover:text-blue-600'
}`}>
<span>Study</span> <span>Study</span>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
@@ -78,7 +80,9 @@ export function MainNavigation() {
</div> </div>
<div className="relative group"> <div className="relative group">
<button className="flex items-center space-x-1 py-2 text-gray-700 hover:text-blue-600 transition-colors"> <button className={`flex items-center space-x-1 py-2 transition-colors ${
isScrolled ? 'text-gray-700 hover:text-blue-600' : 'text-gray-800 hover:text-blue-600'
}`}>
<span>Research</span> <span>Research</span>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
@@ -92,7 +96,9 @@ export function MainNavigation() {
</div> </div>
<div className="relative group"> <div className="relative group">
<button className="flex items-center space-x-1 py-2 text-gray-700 hover:text-blue-600 transition-colors"> <button className={`flex items-center space-x-1 py-2 transition-colors ${
isScrolled ? 'text-gray-700 hover:text-blue-600' : 'text-gray-800 hover:text-blue-600'
}`}>
<span>Campus Life</span> <span>Campus Life</span>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
@@ -102,12 +108,14 @@ export function MainNavigation() {
<Link href="/campus" className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Campus</Link> <Link href="/campus" className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Campus</Link>
<Link href="/events" className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Events</Link> <Link href="/events" className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Events</Link>
<Link href="/international" className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">International</Link> <Link href="/international" className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">International</Link>
<Link href="/wellbeing" className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Wellbeing</Link> <Link href="/fees" className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Fees</Link>
</div> </div>
</div> </div>
<div className="relative group"> <div className="relative group">
<button className="flex items-center space-x-1 py-2 text-gray-700 hover:text-blue-600 transition-colors"> <button className={`flex items-center space-x-1 py-2 transition-colors ${
isScrolled ? 'text-gray-700 hover:text-blue-600' : 'text-gray-800 hover:text-blue-600'
}`}>
<span>About</span> <span>About</span>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
@@ -116,7 +124,7 @@ export function MainNavigation() {
<div className="absolute top-full left-0 w-48 bg-white shadow-lg rounded-lg py-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300"> <div className="absolute top-full left-0 w-48 bg-white shadow-lg rounded-lg py-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
<Link href="/antarctic" className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Antarctic</Link> <Link href="/antarctic" className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Antarctic</Link>
<Link href="/contact" className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Contact</Link> <Link href="/contact" className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Contact</Link>
<Link href="/accessibility" className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Accessibility</Link> <Link href="/privacy" className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Privacy</Link>
</div> </div>
</div> </div>
</div> </div>
@@ -151,7 +159,9 @@ export function MainNavigation() {
<> <>
<Link <Link
href="/login" href="/login"
className="hidden sm:block py-2 px-4 text-gray-700 hover:text-blue-600 transition-colors" className={`hidden sm:block py-2 px-4 transition-colors ${
isScrolled ? 'text-gray-700 hover:text-blue-600' : 'text-gray-800 hover:text-blue-600'
}`}
> >
Sign In Sign In
</Link> </Link>
@@ -167,9 +177,11 @@ export function MainNavigation() {
{/* Mobile Menu Button */} {/* Mobile Menu Button */}
<button <button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
className="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors" className={`lg:hidden p-2 rounded-lg transition-colors ${
isScrolled ? 'hover:bg-gray-100' : 'hover:bg-gray-50'
}`}
> >
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className={`w-6 h-6 ${isScrolled ? 'text-gray-700' : 'text-gray-800'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg> </svg>
</button> </button>
@@ -205,7 +217,7 @@ export function MainNavigation() {
<Link href="/campus" className="block py-1 text-gray-600 hover:text-blue-600">Campus</Link> <Link href="/campus" className="block py-1 text-gray-600 hover:text-blue-600">Campus</Link>
<Link href="/events" className="block py-1 text-gray-600 hover:text-blue-600">Events</Link> <Link href="/events" className="block py-1 text-gray-600 hover:text-blue-600">Events</Link>
<Link href="/international" className="block py-1 text-gray-600 hover:text-blue-600">International</Link> <Link href="/international" className="block py-1 text-gray-600 hover:text-blue-600">International</Link>
<Link href="/wellbeing" className="block py-1 text-gray-600 hover:text-blue-600">Wellbeing</Link> <Link href="/fees" className="block py-1 text-gray-600 hover:text-blue-600">Fees</Link>
</div> </div>
</div> </div>
@@ -214,7 +226,7 @@ export function MainNavigation() {
<div className="space-y-1"> <div className="space-y-1">
<Link href="/antarctic" className="block py-1 text-gray-600 hover:text-blue-600">Antarctic</Link> <Link href="/antarctic" className="block py-1 text-gray-600 hover:text-blue-600">Antarctic</Link>
<Link href="/contact" className="block py-1 text-gray-600 hover:text-blue-600">Contact</Link> <Link href="/contact" className="block py-1 text-gray-600 hover:text-blue-600">Contact</Link>
<Link href="/accessibility" className="block py-1 text-gray-600 hover:text-blue-600">Accessibility</Link> <Link href="/privacy" className="block py-1 text-gray-600 hover:text-blue-600">Privacy</Link>
</div> </div>
</div> </div>
</div> </div>