more shadow

.github/workflows/deploy-theme.yml

@@ -14,4 +14,4 @@ jobs:
         with:
           api-url: ${{ secrets.GHOST_ADMIN_API_URL }}
           api-key: ${{ secrets.GHOST_ADMIN_API_KEY }}
-          theme-name: "anyway_theme"
+          theme-name: "anyway_theme"

.gitignore

@@ -0,0 +1 @@
+node_modules/*

assets/css/hero.css

@@ -5,22 +5,25 @@
   margin: 0 auto; /* Centering the hero section */
   display: flex;
   justify-content: space-between;
+  flex-direction: column;
   align-items: center;
-  padding-top: 80px;
-  padding-bottom: 80px;
-  padding-left: 40px;
-  padding-right: 40px;
-  background: linear-gradient(to bottom right, #F9B208, #E72E77);
+  /* background: linear-gradient(to bottom right, #F9B208, #ed5c51); */
 }
 
-.hero-inner {
+.hero-first {
   display: flex;
-  flex-direction: column; /* Stack elements vertically by default */
+  flex-direction: row;
   align-items: center;
   text-align: center;
+  justify-content: center;
   width: 100%;
-  max-width: 1200px;
-  gap: 2rem; /* Space between items */
+  height: 70vh;
+  gap: 4rem; /* Space between items */
+  margin: auto;
+  /* margin-bottom: 4vh; */
+  background: linear-gradient(to bottom right, #FAB108, #E72E77);
+  padding-right: 3vw; /* 40 px approx*/
+  padding-left: 3vw;
 }
 
 .hero-content {
@@ -28,11 +31,14 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
+  width: 35vw;
+  /* padding-right: 4vw; 40 px approx
+  padding-left: 4vw; */
 }
 
 .hero-logo {
-  max-width: 150px;
-  margin-bottom: 1rem;
+  height: 130px;
+  margin-bottom: 3rem;
 }
 
 .hero-title {
@@ -44,6 +50,7 @@
 .hero-button {
   background-color: white;
   color: #E72E77;
+  white-space: nowrap;
   padding: 15px 30px;
   border: none;
   border-radius: 5px;
@@ -56,82 +63,215 @@
 
 .hero-button:hover {
   background-color: #E72E77;
+  opacity: 1;
   color: white;
 }
 
 /* Screenshots styling */
 .hero-screenshots {
   display: flex;
-  flex-direction: column;
-  gap: 3rem;
-  width: 100%;
+  flex-direction: row;
   align-items: center;
+  width: 35vw;
+  gap: 3rem;
 }
 
 .screenshot img {
-  max-width: 80vmin;
   height: auto;
-  border-radius: 10px;
+  width: 11vw;
+  border-radius: 15px;
   border: 4px solid black;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-/* Responsive layout for larger screens */
-@media screen and (min-width: 768px) {  
-  .hero-inner {
-    justify-content: space-between;
+.hero-catch-phrase {
+  text-align: center;
+  font-size: 2.5rem;
+  color: #E72E77;
+  margin: 10px 0;
+  margin-bottom: 25px;
+  /* text-shadow: 0 0 10px #E72E77; */
+
+}
+
+.hero-second {
+  display: flex;
+  flex-direction: column; /* Stack elements vertically by default */
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  gap: 2rem; /* Space between items */
+  margin-bottom: 4rem;
+  padding-top: 4vh;
+  /* background: linear-gradient(to bottom left, #E72E77, #F9B208); */
+}
+
+
+.hero-bloc {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 65%;
+}
+
+/* Alternate layout for image on left or right */
+.hero-bloc:nth-child(even) {
+  flex-direction: row-reverse; /* Reverse order for alternating layout */
+}
+
+/* Styling for bloc-text */
+.bloc-text {
+  flex: 1;
+  text-align: left;
+  padding: 20px;
+  font-size: 1.8rem;
+  color: #333;
+  /* background-color: #fbfbfb; */
+  border-radius: 20px;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
+
+}
+
+.bloc-text h3 {
+  font-size: 2.8rem;
+  color: #E72E77;
+  margin-bottom: 1rem;
+  font-variant: small-caps;
+}
+
+.bloc-text ul {
+  list-style-type: disc;
+  padding-left: 20px;
+}
+
+.bloc-text ul li {
+  margin-bottom: 0.5rem;
+}
+
+/* Styling for bloc-image */
+.bloc-image {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 2vw;
+  padding-bottom: 2vw;
+
+}
+
+.bloc-image img {
+  width: 15vw;
+  max-width: 250px;
+  height: auto;
+  border-radius: 15px;
+  border: 4px solid black;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+
+}
+
+/* Button at the end of the hero-second */
+
+.hero-button-end {
+  display: flex;
+  justify-content: center;
+  padding: 40px 0;
+  color: white;
+  background-color: #E72E77;
+  padding: 20px 40px;
+  font-size: 1.6rem;
+  font-weight: bold;
+  border: 0px;
+  border-radius: 8px;
+  text-decoration: none;
+  transition: background-color 0.3s;
+}
+
+.hero-button-end:hover {
+  background-color: #cd2c6c;
+  color: white;
+}
+
+
+/* Phone screens */
+@media (max-width: 767px) {
+
+  .hero-first {
+    height: auto;
     width: 100%;
-    flex-direction: row;
+    flex-direction: column;
+    padding-top: 7vh;
+    padding-bottom: 7vh;
   }
-  
+
   .hero-content {
-    text-align: center;
-    padding: 20px;
-    margin-right: none;
+    height: auto;
+    width: 80vw;
   }
-  
+
   .hero-logo {
-    width: 200px;
-    margin: 0 auto 20px;
-    margin-bottom: 40px;
+    height: auto;
+    width: 35vw; 
   }
-  
+
   .hero-title {
-    font-size: 2.5rem;
-    color: white;
-    margin-bottom: 40px;
+    font-size: 1.8rem; /* Adjust for smaller screens */
+    margin-bottom: 1.5rem;
   }
-  
-  .hero-button:hover {
-    background-color: white;
-    /* color: #2ee797; */
-    color: #ff3988;
-    opacity: 1;
-    box-shadow: 0 0px 16px rgba(0, 0, 0, 0.3);
-  }
-  
+
   .hero-screenshots {
-    max-width: 50%;
-    display: flex;
-    gap: 40px;
-    margin-left: 0px;
-    padding-left: 0px;
-    flex-direction: row;
+    width: 80vw;
+    align-items: center;
+    justify-content: center;
   }
-  
-  .screenshot {
-    width: auto;
-    height: 330px;
-    background-color: white;
-    border: 5px solid black;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-    border-radius: 13px;
-    overflow: hidden;
-  }
-  
+
   .screenshot img {
+    width: 20vw;
+    height: auto;
+    border-radius: 10px;
+    border: 2.75px solid black;
+  }
+
+  .hero-catch-phrase {
+    font-size: 1.75rem;
+  }
+
+  .hero-second {
+    margin-top: 2vh;
+  }
+
+  .hero-bloc {
+    flex-direction: column;
     width: 100%;
-    height: 100%;
-    object-fit: cover;
+
+  }
+
+  /* Revoke alternate layout for image on left or right */
+  .hero-bloc:nth-child(even) {
+    flex-direction: column;
+  }
+
+  .bloc-image img {
+    width: 45vw;
+    max-width: 500px;
+    height: auto;
+  }
+
+  .bloc-image {
+    margin-bottom: 3vh;
+  }
+
+  .bloc-text {
+    font-size: 1.8rem;
+    box-shadow: none;
+    margin-bottom: 1vh;
+  }
+  
+  .bloc-text h3 {
+    font-size: 3rem;
+    text-align: center;
+  }
+
+  .hero-button-end {
+    margin-top: 30px;
   }
 }

assets/css/screen.css

@@ -1,4 +1,4 @@
-@import "hero.css"
+
 
 /* Table of contents
 /* ------------------------------------------------------------
@@ -415,7 +415,7 @@ button.gh-form-input {
 /* ---------------------------------------------------------- */
 
 .gh-navigation {
-    height: 120px;
+    height: 100px;
     font-size: 1.5rem;
     font-weight: 550;
     background-color: var(--background-color);
@@ -2758,12 +2758,13 @@ figcaption a {
 /* 21.2. Footer bar */
 
 .gh-footer-bar {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
+    display: flex;
+    /* grid-template-columns: 1fr auto 1fr; */
     align-items: center;
-    column-gap: 32px;
-    margin-bottom: 100px;
-    padding-block: 28px;
+    /* column-gap: 32px; */
+    justify-content: center;
+    margin-bottom: 15px;
+    padding-block: 15px;
     font-weight: 550;
     border-block: 1px solid var(--color-border);
 }
@@ -2788,8 +2789,38 @@ figcaption a {
     margin: 0;
     padding: 0;
     list-style-type: none;
+    font-size: 15px;
 }
 
+
+.gh-footer-social {
+    display: flex;
+    align-items: center;
+    justify-content: center; /* Centers the icons horizontally */
+    gap: 10px; /* Adds some space between the icons */
+    margin-top: 0px;
+    margin-bottom: 35px;
+
+}
+
+.gh-footer-social a img {
+    width: 20px; /* Adjust the size of the icons */
+    height: auto;
+}
+
+.gh-footer-sph {
+    display: flex;
+    align-items: center;
+    justify-content: center;  
+}
+
+.gh-footer-sph img{
+    width: 150px;
+    height: auto;
+    margin-bottom: 75px;
+}
+
+
 .gh-footer-copyright {
     text-align: right;
     white-space: nowrap;
@@ -3333,3 +3364,4 @@ figcaption a {
     background: none;
 }
 
+@import "hero.css"

assets/screenshots/Fichier 1 (1).png:Zone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-HostUrl=https://drive.usercontent.google.com/download?id=17-rSNYft5OTG7FjjQ8KpVuEe7LMhMBYg&export=download&authuser=0&confirm=t&uuid=d5b2b664-20e8-471f-808e-b5d245ab4d69&at=AN_67v1ddJPbPEreEhpVqKr2pduW:1729157331582

assets/screenshots/Fichier 1.png:Zone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-HostUrl=https://drive.usercontent.google.com/download?id=1UENvnthrZ2QmciQuFRzcDotlxL-2U5Dv&export=download&authuser=0&confirm=t&uuid=50133674-e7d6-4b50-b923-7038eceed7cb&at=AN_67v22zgn5lW_DLX5fgB40-Q4R:1729153908415

assets/screenshots/Fichier 2.png:Zone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-HostUrl=https://drive.usercontent.google.com/download?id=1ScwxkujL7CJ01b0fKSPS6vahfqtdTt7U&export=download&authuser=0&confirm=t&uuid=d8f66c34-88a7-4cfe-b09f-79799d3babbd&at=AN_67v2OmG9fbCRePXqvfKtril0R:1729157438108

assets/screenshots/Fichier 3 (1).png:Zone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-HostUrl=https://drive.usercontent.google.com/download?id=1Ewi9IxGDo7_zau5wlhfKghOLAdiLp7eh&export=download&authuser=0&confirm=t&uuid=2263e7ee-30ab-4771-9c5c-f3de74a8785c&at=AN_67v03j-q8tz6D3ZpxzO84iCz7:1729157333760

assets/screenshots/Fichier 3.png:Zone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-HostUrl=https://drive.usercontent.google.com/download?id=1vRKX4TP8rm9lrzAnYDNonBQJRL6mLk0P&export=download&authuser=0&confirm=t&uuid=f689efd1-1753-483f-8b25-d28da6bec9cb&at=AN_67v2ni_u44m654d9_GoijrRtm:1729153724195

assets/screenshots/Fichier 4.png:Zone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-HostUrl=https://drive.usercontent.google.com/download?id=1-AOdgwXREymtBxP6itiwm7I74S0t31xl&export=download&authuser=0&confirm=t&uuid=dd5b4806-38b7-4abe-b2b0-2bfee1bd09fc&at=AN_67v01K6rVAAuRFUS6lBsbLvMO:1729157337143

assets/screenshots/screenshot_1.png:Zone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-HostUrl=https://ai.nero.com/

assets/screenshots/screenshot_3.png:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://www.iloveimg.com/
+HostUrl=https://api6.iloveimg.com/v1/download/vb8Afkdp7n3dymAcdn0w0gpxsl282b44bx0j19pbpjryjqxnmqtx99hhl7mzzmgkc5vstlkd576st9AAcyAm56pxrtAnzdkrq7tpzdhppyhrAkq1sdptl08hv1z2lp3fjj8vb8klyfkchfgt2tnpnlffbm6g2qqnxz53c7qs6clAqp0f2wcq

package.json

@@ -53,7 +53,7 @@
         "gulp-uglify": "3.0.2",
         "gulp-zip": "5.1.0",
         "inquirer": "8.2.4",
-        "postcss": "8.2.13",
+        "postcss": "^8.2.15",
         "postcss-easy-import": "4.0.0",
         "pump": "3.0.0"
     },

partials/components/footer.hbs

@@ -1,35 +1,32 @@
 <footer class="gh-footer{{#match @custom.header_and_footer_color "Accent color"}} has-accent-color{{/match}} gh-outer">
     <div class="gh-footer-inner gh-inner">
-
         <div class="gh-footer-bar">
-            <span class="gh-footer-logo is-title">
-                {{#if @site.logo}}
-                    <img src="{{@site.logo}}" alt="{{@site.title}}">
-                {{else}}
-                    {{@site.title}}
-                {{/if}}
-            </span>
             <nav class="gh-footer-menu">
                 {{navigation type="secondary"}}
             </nav>
-            <div class="gh-footer-copyright">
-                Powered by <a href="https://ghost.org/" target="_blank" rel="noopener">Ghost</a>
-            </div>
         </div>
-
-        {{#if @site.members_enabled}}
-            {{#unless @member}}
-                <section class="gh-footer-signup">
-                    <h2 class="gh-footer-signup-header is-title">
-                        {{#if @custom.signup_heading}}{{@custom.signup_heading}}{{else}}{{@site.title}}{{/if}}
-                    </h2>
-                    <p class="gh-footer-signup-subhead is-body">
-                        {{#if @custom.signup_subheading}}{{@custom.signup_subheading}}{{else}}{{@site.description}}{{/if}}
-                    </p>
-                    {{> "email-subscription" email_field_id="footer-email"}}
-                </section>
-            {{/unless}}
-        {{/if}}
-
+        <!-- Social Media Icons Row -->
+        <div class="gh-footer-social">
+            <a href="https://www.facebook.com/profile.php?id=61567646910186" target="_blank">
+                <img src="/assets/logos/facebook_256.png" alt="Facebook" />
+            </a>
+            {{!-- <a href="https://x.com/anyway_app" target="_blank">
+                <img src="/assets/logos/X_256.png" alt="X (Twitter)" />
+            </a> --}}
+            <a href="https://www.linkedin.com/company/105495433" target="_blank">
+                <img src="/assets/logos/linkedin_256.png" alt="LinkedIn" />
+            </a>
+            <a href="https://www.instagram.com/anydev.info?igsh=bHc1Y3JrZDlqYTNt" target="_blank">
+                <img src="/assets/logos/instagram_256.png" alt="Instagram" />
+            </a>
+            <a href="https://git.kluster.moll.re/anydev/anyway" target="_blank">
+                <img src="/assets/logos/gitea_256.png" alt="Gitea" />
+            </a>
+        </div>
+        <!-- SPH logo below social media links -->
+        <div class="gh-footer-sph">
+            <img src="/assets/SPH/SPH_logo_use_on_white_background.png" alt="SPH"/>
+        </div>
     </div>
-</footer>
+
+</footer>

partials/components/hero.hbs

@@ -1,12 +1,13 @@
 <link rel="stylesheet" href="{{asset "css/hero.css"}}">
 
 <section class="hero">
-    <div class="hero-inner">
+    <!-- First Section -->
+    <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">
             <h1 class="hero-title">Our new app is available for download</h1>
-            <a href="https://anydev.info/download/" class="hero-button">Start now</a>
+            <a href="https://anydev.info/early-access/" class="hero-button">Start now</a>
         </div>
 
         <!-- Right content with app screenshots -->
@@ -22,4 +23,73 @@
             </div>
         </div>
     </div>
+
+    <!-- Second Section -->
+    <div class="hero-second">
+        <!-- Catch phrase -->
+        <div class="hero-catch-phrase">
+            <h1>Let's plan trips your way!</h1>
+        </div>
+
+        <meta>
+
+        <div class="hero-bloc">
+            <div class="bloc-text">
+                <h3>set your preferences</h3>
+                <ul>
+                    <li>Choose the amount of sightseeing, nature, and shopping landmarks.</li>
+                    <li>Select your preferred duration, from quick 30-minutes to full-day adventures.</li>
+                    <li>Finer categories like museums or restaurants will be coming soon.</li>
+                </ul>
+            </div>
+            <div class="bloc-image">
+                <img src="assets/screenshots/screenshot_3.png" alt="Preferences Screen">
+            </div>
+        </div>
+
+        <div class="hero-bloc">
+            <div class="bloc-text">
+                <h3>get the perfect trip</h3>
+                <ul>
+                    <li>Our intelligent algorithm balances famous must-do's and hidden gems.</li>
+                    <li>Custom-tailored trips ensure every stop aligns with your interests.</li>
+                    <li>Enjoy our smart optimization for the perfect balance of activities.</li>
+                </ul>
+            </div>
+            <div class="bloc-image">
+                <img src="assets/screenshots/screenshot_1.png" alt="Optimization Process">
+            </div>
+        </div>
+
+        <div class="hero-bloc">
+            <div class="bloc-text">
+                <h3>explore at your own pace</h3>
+                <ul>
+                    <li>Skip or remove landmarks as you go.</li>
+                    <li>Save your trip for later and revisit anytime.</li>
+                    <li>Follow the directions to the next stop.</li>
+                </ul>
+            </div>
+            <div class="bloc-image">
+                <img src="assets/screenshots/screenshot_2.png" alt="Itinerary Screen">
+            </div>
+        </div>
+
+        <div class="hero-bloc">
+            <div class="bloc-text">
+                <h3>bonus: find nearby toilets</h3>
+                <ul>
+                    <li>Never struggle to find public restrooms again.</li>
+                    <li>Simply ask, and the app shows nearby public toilets.</li>
+                    <li>A quick and free solution to an everyday problem.</li>
+                </ul>
+            </div>
+            <div class="bloc-image">
+                <img src="assets/screenshots/screenshot_2.png" alt="Toilet Finder">
+            </div>
+        </div>
+
+        <!-- Call to Action Button -->
+        <a href="https://anydev.info/early-access/" class="hero-button-end">Get Started Now</a>
+    </div>
 </section>