From a89eaf5eee6ca98bf1990e6b78f3f8ed52ab1edf Mon Sep 17 00:00:00 2001 From: kscheidecker Date: Fri, 7 Mar 2025 09:29:08 +0100 Subject: [PATCH] new hero --- assets/css/hero.css | 107 ++++++++++++++++++------------- partials/components/hero.hbs | 121 +++++++++++++++++++++++------------ 2 files changed, 143 insertions(+), 85 deletions(-) diff --git a/assets/css/hero.css b/assets/css/hero.css index 836568c..8b68e1b 100644 --- a/assets/css/hero.css +++ b/assets/css/hero.css @@ -15,6 +15,7 @@ align-items: center; text-align: center; width: 100%; + height: 30vw; /* max-width: 1200px; */ gap: 4rem; /* Space between items */ margin-bottom: 4rem; @@ -79,60 +80,94 @@ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } +.hero-catch-phrase { + text-align: center; + font-size: 2.5rem; + color: #333; + margin: 40px 0; +} + .hero-second { display: flex; flex-direction: column; /* Stack elements vertically by default */ align-items: center; text-align: center; - width: 80%; + width: 70%; gap: 4rem; /* Space between items */ margin-bottom: 4rem; } -/* How It Works Section */ -#how-it-works { - /* background-color: #f8f9fa; */ - padding: 30px 0; -} -#how-it-works h2 { - margin-bottom: 35px; -} - -.steps { +.hero-bloc { display: flex; - flex-direction: column; - gap: 120px; - text-align: center; + justify-content: space-between; + align-items: center; + padding: 20px; + background-color: #f5f5f5; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } -.step h3 { - font-size: 1.6rem; - margin-bottom: 10px; +/* Styling for bloc-text */ +.bloc-text { + flex: 1; + padding: 20px; + font-size: 1.2rem; + color: #333; } -/* Features Section */ -#features { - padding: 30px 0; +.bloc-text h3 { + font-size: 1.8rem; + color: #E72E77; + margin-bottom: 1rem; } -#features h2 { - margin-bottom: 35px; +.bloc-text ul { + list-style-type: disc; + padding-left: 20px; } -.features-list { +.bloc-text ul li { + margin-bottom: 0.5rem; +} + +/* Styling for bloc-image */ +.bloc-image { + flex: 1; + max-width: 400px; + padding: 20px; display: flex; - flex-direction: column; - gap: 50px; + justify-content: center; + align-items: center; } -.feature { - text-align: center; +.bloc-image img { + max-width: 100%; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } -.feature h3 { +/* Button at the end of the hero-second */ +.hero-button-end { + display: flex; + justify-content: center; + padding: 40px 0; +} + +.hero-button-end a { + background-color: #E72E77; + color: white; + padding: 20px 40px; font-size: 1.6rem; - margin-bottom: 10px; + font-weight: bold; + border-radius: 8px; + text-decoration: none; + transition: background-color 0.3s; +} + +.hero-button-end a:hover { + background-color: #F9B208; + color: #333; } /* Responsive layout for larger screens */ @@ -188,18 +223,4 @@ 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%; - } } \ No newline at end of file diff --git a/partials/components/hero.hbs b/partials/components/hero.hbs index 6d1db4e..958eac4 100644 --- a/partials/components/hero.hbs +++ b/partials/components/hero.hbs @@ -1,6 +1,7 @@
+
@@ -22,51 +23,87 @@
+ + +
+

Let's plan trips your way!

+
+ +
- -
-
-

How It Works

-
-
-

1. Set Your Preferences

-

Choose the experiences that matter to you, whether it's history, nature, or shopping, your preferences guide the trip. Choose the length of your trip as well, be it an hour or the whole day.

- -
-
-

2. Generate an Optimized Trip

-

Our app uses an internally-developed algorithm to find the best route, balancing popular landmarks and hidden gems to create a personalized experience.

- -
-
-

3. Explore at Your Own Pace

-

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.

- -
-
-
-
- -
-
-

Why Choose AnyWay?

-
-
-

Personalized Itineraries

-

Custom-tailored trips based on your unique interests, ensuring every stop is something you'll love.

-
-
-

Smart Optimization

-

Our advanced algorithm combines both well-known landmarks and local hidden gems for the perfect balance.

-
-
-

Real-time Flexibility

-

Change your itinerary anytime, and the app will instantly recalculate to ensure you still see all the best spots.

-
-
+
+
+

Set Your Preferences

+
    +
  • Choose from sightseeing, nature, and shopping categories.
    • +
  • Refine by subcategories like museums or restaurants.
    • +
  • Select trip durations from quick stops to full-day adventures.
    • +
-
+
+ Preferences Screen +
+
+
+
+ Optimization Process +
+
+

Get the Perfect Trip

+
    +
  • Our intelligent algorithm balances landmarks and hidden gems.
    • +
  • Custom-tailored trips ensure every stop aligns with your interests.
    • +
  • Enjoy smart optimization for the perfect balance of activities.
    • +
+
+
+ +
+
+

Explore at Your Own Pace

+
    +
  • Skip or remove landmarks as you go.
    • +
  • Save your trip for later and revisit anytime.
    • +
  • Flexible trip design ensures you never miss important spots.
    • +
+
+
+ Itinerary Screen +
+
+ +
+
+ App Mockup +
+
+

Real-time Flexibility

+
    +
  • Remove landmarks or recalculate the trip on-the-go.
    • +
  • Adjust your itinerary anytime and keep exploring effortlessly.
    • +
+
+
+ +
+
+

Find Nearby Toilets

+
    +
  • Never struggle to find public restrooms during your trip.
    • +
  • Simply ask, and the app shows nearby public toilets.
    • +
  • A quick and free solution to an everyday problem.
    • +
+
+
+ Toilet Finder +
+
+ + +
+ Get Started Now +