Remove sidebar navigation and floating elements
Deleted NavMenu component and its styles, removed sidebar layout from MainLayout, and cleaned up related CSS. The Home page was simplified by removing floating icons and animation effects. This streamlines the UI and focuses on main content presentation.
This commit is contained in:
@@ -2,20 +2,7 @@
|
||||
<PageTitle>I Know Them!</PageTitle>
|
||||
|
||||
<div class="landing-page">
|
||||
<div class="floating-elements">
|
||||
<div class="floating-icon">🎬</div>
|
||||
<div class="floating-icon">📺</div>
|
||||
<div class="floating-icon">🎭</div>
|
||||
<div class="floating-icon">🌟</div>
|
||||
<div class="floating-icon">🎪</div>
|
||||
<div class="floating-icon">🎯</div>
|
||||
<div class="floating-icon">🎨</div>
|
||||
<div class="floating-icon">🎵</div>
|
||||
<div class="floating-icon">🎮</div>
|
||||
</div>
|
||||
|
||||
<div class="hero">
|
||||
<div class="pulse-dot"></div>
|
||||
<h1>Welcome to <span class="highlight">I Know Them!</span></h1>
|
||||
<p class="subtitle">Ever watched a movie or show and thought, "I know that actor from somewhere..."?</p>
|
||||
<p class="description">This app helps you quickly identify actors, find out what else they've been in, and explore cast details for your favorite <strong>movies</strong> and <strong>TV shows</strong>.</p>
|
||||
@@ -45,91 +32,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@keyframes gradientFlow {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.floating-elements {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.floating-icon {
|
||||
position: absolute;
|
||||
opacity: 0.1;
|
||||
animation: float 20s infinite linear;
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(1) {
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(2) {
|
||||
left: 20%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(3) {
|
||||
left: 30%;
|
||||
animation-delay: 8s;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(4) {
|
||||
left: 40%;
|
||||
animation-delay: 12s;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(5) {
|
||||
left: 50%;
|
||||
animation-delay: 16s;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(6) {
|
||||
left: 60%;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(7) {
|
||||
left: 70%;
|
||||
animation-delay: 7s;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(8) {
|
||||
left: 80%;
|
||||
animation-delay: 11s;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(9) {
|
||||
left: 90%;
|
||||
animation-delay: 15s;
|
||||
}
|
||||
|
||||
@@keyframes float {
|
||||
0% {
|
||||
transform: translateY(100vh) rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-100px) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
max-width: 800px;
|
||||
text-align: center;
|
||||
@@ -175,15 +77,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: linear-gradient(45deg, #ffeaa7, #fdcb6e);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
display: inline-block;
|
||||
animation: shimmer 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@keyframes shimmer {
|
||||
0%, 100% {
|
||||
filter: brightness(1);
|
||||
@@ -311,34 +204,6 @@
|
||||
box-shadow: 0 20px 40px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.pulse-dot {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #ffeaa7;
|
||||
border-radius: 50%;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.8);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@media (max-width: 768px) {
|
||||
.hero {
|
||||
margin: 1rem;
|
||||
|
||||
Reference in New Issue
Block a user