anydev/anydev-website
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more hero
All checks were successful
Deploy Theme / deploy (push) Successful in 10s
Details

Browse Source
This commit is contained in:
kscheidecker 2025-03-07 07:29:07 +01:00
parent 94a649126a
commit 2039144094
2 changed files with 117 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
assets/css/hero.css
View File

@ -13,7 +13,18 @@
background: linear-gradient(to bottom right, #F9B208, #E72E77);
}
.hero-inner {
.hero-first {
display: flex;
flex-direction: column; /* Stack elements vertically by default */
align-items: center;
text-align: center;
width: 100%;
max-width: 1200px;
gap: 4rem; /* Space between items */
margin-bottom: 4rem;
}
.hero-second {
display: flex;
flex-direction: column; /* Stack elements vertically by default */
align-items: center;
@ -78,6 +89,45 @@
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* How It Works Section */
#how-it-works {
background-color: #f8f9fa;
padding: 60px 0;
}
.steps {
display: flex;
flex-direction: column;
gap: 40px;
text-align: center;
}
.step h3 {
font-size: 1.6rem;
margin-bottom: 10px;
}
/* Features Section */
#features {
padding: 60px 0;
}
.features-list {
display: flex;
flex-direction: column;
gap: 30px;
}
.feature {
text-align: center;
}
.feature h3 {
font-size: 1.6rem;
margin-bottom: 10px;
}
/* Responsive layout for larger screens */
@media screen and (min-width: 768px) {
.hero-inner {
@ -131,4 +181,18 @@
height: 100%;
object-fit: cover;
}
.steps {
flex-direction: row;
justify-content: space-around;
}
.features-list {
flex-direction: row;
justify-content: space-between;
}
.feature {
flex-basis: 45%;
}
}

53
partials/components/hero.hbs
View File

@ -1,7 +1,7 @@
<link rel="stylesheet" href="{{asset "css/hero.css"}}">
<section class="hero">
<div class="hero-inner">
<div class="hero-first">
<!-- Left content with logo and text -->
<div class="hero-content">
<img src="assets/images/anyway_logo_black.png" alt="Logo" class="hero-logo">
@ -22,4 +22,55 @@
</div>
</div>
</div>
<div class="hero-second">
<!-- How It Works Section -->
<section id="how-it-works">
<div class="container">
<h2>How It Works</h2>
<div class="steps">
<div class="step">
<h3>1. Set Your Preferences</h3>
<p>Choose the experiences that matter to you – whether it's history, nature, or shopping, your preferences guide the trip.</p>
<!-- Add a screenshot of the preference selection screen -->
</div>
<div class="step">
<h3>2. Generate an Optimized Trip</h3>
<p>Our app uses intelligent algorithms to find the best route, balancing popular landmarks and hidden gems to create a personalized experience.</p>
<!-- Add a screenshot of a generated trip route -->
</div>
<div class="step">
<h3>3. Explore at Your Own Pace</h3>
<p>Follow the plan or make changes on the go – our flexible trip design allows you to explore freely while ensuring you never miss anything important.</p>
<!-- Add a screenshot of an itinerary view -->
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features">
<div class="container">
<h2>Why Choose Trip Optimizer?</h2>
<div class="features-list">
<div class="feature">
<h3>Personalized Itineraries</h3>
<p>Custom-tailored trips based on your unique interests, ensuring every stop is something you'll love.</p>
</div>
<div class="feature">
<h3>Smart Optimization</h3>
<p>Our intelligent algorithms combine both well-known landmarks and local hidden gems for the perfect balance.</p>
</div>
<div class="feature">
<h3>Real-time Flexibility</h3>
<p>Change your itinerary anytime, and our system will instantly recalculate to ensure you still see all the best spots.</p>
</div>
<div class="feature">
<h3>Discover Hidden Gems</h3>
<p>Explore lesser-known spots that regular travel guides miss, giving you a truly unique adventure.</p>
</div>
</div>
</div>
</section>
</div>
</section>