f3976872b3
Sets up the fundamental structure for the AURORA LUXE TRAVEL Angular application. Includes project configuration, dependencies for Angular and Tailwind CSS, and basic HTML and TypeScript entry points. Defines static destination, experience, and testimonial data for initial use.
110 lines
No EOL
3.6 KiB
HTML
110 lines
No EOL
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AURORA LUXE TRAVEL</title>
|
|
<meta name="description" content="Beyond First Class. Bespoke luxury travel itineraries for the discerning voyager.">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Tailwind -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
aurora: {
|
|
bg: '#050508',
|
|
card: '#0F0F16',
|
|
border: '#1F1F2E',
|
|
}
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
display: ['Space Grotesk', 'sans-serif'],
|
|
},
|
|
backgroundImage: {
|
|
'aurora-gradient': 'linear-gradient(to right, #00f0ff, #7000ff, #ff00aa)',
|
|
'glass': 'linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%)',
|
|
},
|
|
animation: {
|
|
'blob': 'blob 10s infinite',
|
|
'shimmer': 'shimmer 2s linear infinite',
|
|
},
|
|
keyframes: {
|
|
blob: {
|
|
'0%': { transform: 'translate(0px, 0px) scale(1)' },
|
|
'33%': { transform: 'translate(30px, -50px) scale(1.1)' },
|
|
'66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
|
|
'100%': { transform: 'translate(0px, 0px) scale(1)' },
|
|
},
|
|
shimmer: {
|
|
'0%': { backgroundPosition: '200% 0' },
|
|
'100%': { backgroundPosition: '-200% 0' }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #050508;
|
|
color: #ffffff;
|
|
}
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
/* Intersection Observer Animation Classes */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
|
|
}
|
|
.reveal.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.glass-panel {
|
|
background: rgba(15, 15, 22, 0.6);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.text-glow {
|
|
text-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
|
|
}
|
|
</style>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"rxjs": "https://esm.sh/rxjs@^7.8.2?conditions=es2015",
|
|
"rxjs/operators": "https://esm.sh/rxjs@^7.8.2/operators?conditions=es2015",
|
|
"rxjs/ajax": "https://esm.sh/rxjs@^7.8.2/ajax?conditions=es2015",
|
|
"rxjs/webSocket": "https://esm.sh/rxjs@^7.8.2/webSocket?conditions=es2015",
|
|
"rxjs/testing": "https://esm.sh/rxjs@^7.8.2/testing?conditions=es2015",
|
|
"rxjs/fetch": "https://esm.sh/rxjs@^7.8.2/fetch?conditions=es2015",
|
|
"@angular/forms": "https://esm.sh/@angular/forms@^21.1.4?external=rxjs",
|
|
"@angular/compiler": "https://esm.sh/@angular/compiler@^21.1.4?external=rxjs",
|
|
"@angular/core": "https://esm.sh/@angular/core@^21.1.4?external=rxjs",
|
|
"@angular/common": "https://esm.sh/@angular/common@^21.1.4?external=rxjs",
|
|
"@angular/platform-browser": "https://esm.sh/@angular/platform-browser@^21.1.4?external=rxjs"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<app-root></app-root>
|
|
</body>
|
|
</html> |