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/page.tsx
+44 -42
View File
@@ -3,43 +3,12 @@ import Link from 'next/link';
export default function HomePage() {
return (
<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 */}
<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="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>
Established 1995 • Accredited Institution
</div>
@@ -73,27 +42,60 @@ export default function HomePage() {
</div>
<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-blue-200 text-sm">Students Enrolled</div>
<div className="text-blue-100 text-sm font-medium">Students Enrolled</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-blue-200 text-sm">Academic Programs</div>
<div className="text-blue-100 text-sm font-medium">Academic Programs</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-blue-200 text-sm">Graduate Success Rate</div>
<div className="text-blue-100 text-sm font-medium">Graduate Success Rate</div>
</div>
<div className="text-center p-6 bg-white bg-opacity-10 rounded-lg">
<div className="text-3xl font-bold text-white mb-2">$2.5B</div>
<div className="text-blue-200 text-sm">Research Funding</div>
<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">OMR 2.5B</div>
<div className="text-blue-100 text-sm font-medium">Research Funding</div>
</div>
</div>
</div>
</div>
</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 */}
<section className="py-20 bg-gray-50">
<div className="container mx-auto px-4">
@@ -125,7 +127,7 @@ export default function HomePage() {
</div>
<h3 className="text-xl font-bold text-gray-900 mb-4">Research Leadership</h3>
<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>
</div>