🎨 Fix UI transparency and color coordination issues
- 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
@@ -11,7 +11,7 @@ export default function AdmissionsPage() {
|
||||
"SAT/ACT scores (optional for 2024)",
|
||||
"Personal statement",
|
||||
"Letters of recommendation",
|
||||
"Application fee: $50"
|
||||
"Application fee: OMR 20"
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -22,7 +22,7 @@ export default function AdmissionsPage() {
|
||||
"GRE/GMAT scores",
|
||||
"Research proposal",
|
||||
"Letters of recommendation (3)",
|
||||
"Application fee: $75"
|
||||
"Application fee: OMR 30"
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -33,7 +33,7 @@ export default function AdmissionsPage() {
|
||||
"Financial documentation",
|
||||
"Visa requirements",
|
||||
"Health insurance",
|
||||
"Application fee: $100"
|
||||
"Application fee: OMR 40"
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google';
|
||||
import './globals.css';
|
||||
import { ClientProviders } from '@/components/providers/ClientProviders';
|
||||
import { AIChatButton } from '@/components/Chat/AIChatButton';
|
||||
import { MainNavigation } from '@/components/Navigation/MainNavigation';
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] });
|
||||
|
||||
@@ -20,6 +21,7 @@ export default function RootLayout({
|
||||
<html lang="en">
|
||||
<body className={inter.className}>
|
||||
<ClientProviders>
|
||||
<MainNavigation />
|
||||
{children}
|
||||
<AIChatButton />
|
||||
</ClientProviders>
|
||||
|
||||
+44
-42
@@ -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>
|
||||
|
||||
|
||||
@@ -85,7 +85,7 @@ export function HeroSection() {
|
||||
<div className="text-blue-200 text-sm">Graduate Success Rate</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-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>
|
||||
</div>
|
||||
|
||||
@@ -45,7 +45,7 @@ export function MainNavigation() {
|
||||
|
||||
return (
|
||||
<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="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>
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<div className="text-xl font-bold text-gray-900">University Portal</div>
|
||||
<div className="text-xs text-gray-600">Excellence in Education</div>
|
||||
<div className={`text-xl font-bold ${isScrolled ? 'text-gray-900' : 'text-gray-800'}`}>University Portal</div>
|
||||
<div className={`text-xs ${isScrolled ? 'text-gray-600' : 'text-gray-500'}`}>Excellence in Education</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden lg:flex items-center space-x-8">
|
||||
<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>
|
||||
<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" />
|
||||
@@ -78,7 +80,9 @@ export function MainNavigation() {
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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" />
|
||||
@@ -92,7 +96,9 @@ export function MainNavigation() {
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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" />
|
||||
@@ -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="/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="/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 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>
|
||||
<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" />
|
||||
@@ -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">
|
||||
<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="/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>
|
||||
@@ -151,7 +159,9 @@ export function MainNavigation() {
|
||||
<>
|
||||
<Link
|
||||
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
|
||||
</Link>
|
||||
@@ -167,9 +177,11 @@ export function MainNavigation() {
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
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" />
|
||||
</svg>
|
||||
</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="/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="/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>
|
||||
|
||||
@@ -214,7 +226,7 @@ export function MainNavigation() {
|
||||
<div className="space-y-1">
|
||||
<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="/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>
|
||||
|
||||
Reference in New Issue
Block a user