Update Twig templates

Author: quinta-blip

src/data/common.json

@@ -3,25 +3,24 @@
     "title": "BINABOX",
     "discordUrl": "#",
     "menu": [
-      { "label": "Home", "url": "index.html", "active": true },
-      { "label": "Blog", "url": "blog.html", "active": false },
-      { "label": "Catalog", "url": "catalog.html", "active": false },
-      { "label": "About", "url": "about.html", "active": false },
-      { "label": "Contact", "url": "contact.html", "active": false }
+      { "label": "Home", "url": "index.twig", "active": true },
+      { "label": "Blog", "url": "blog.twig", "active": false },
+      { "label": "Catalog", "url": "catalog.twig", "active": false },
+      { "label": "About", "url": "about.twig", "active": false },
+      { "label": "Contact", "url": "contact.twig", "active": false }
     ]
   },
   "footer": {
     "description": "We are the best way to check the rarity of NFT collections.",
     "menu": [
-      { "label": "Home", "url": "index.html" },
-      { "label": "Blog", "url": "blog.html" },
-      { "label": "Catalog", "url": "catalog.html" },
-      { "label": "Contact", "url": "contact.html" }
+      { "label": "Home", "url": "index.twig" },
+      { "label": "Blog", "url": "blog.twig" },
+      { "label": "Catalog", "url": "catalog.twig" },
+      { "label": "Contact", "url": "contact.twig" }
     ],
     "social": [
       { "name": "Twitter", "url": "https://twitter.com" },
       { "name": "Discord", "url": "https://discord.com" }
     ]
   }
 }
-

src/pages/blog.twig

@@ -1,4 +1,4 @@
-{% extends "src/templates/layouts/base.twig" %}
+{% extends "templates/layouts/base.twig" %}
 
 {% block title %}BINABOX Blog Page{% endblock %}
 

src/pages/index.twig

@@ -1,4 +1,5 @@
-{% extends "src/templates/layouts/base.twig" %}
+{% extends "templates/layouts/base.twig" %}
+
 
 
 {% block content %}
@@ -22,7 +23,9 @@
         <button class="banner__button banner__button--disable">Whitelist now</button>
     </div>
 
-    <img src="{{ page.banner_image }}" class="banner__image" alt="Banner Image">
+   <img src="{{ page.banner_image }}" class="banner__image" alt="Banner Image">
+
+
 </section>
 
 <!-- ============== CATALOG ============== -->
@@ -36,7 +39,8 @@
         {% for product in page.catalog_products %}
             <li class="catalog__item">
                 <article class="catalog__product">
-                    <img src="{{ product.image }}" class="catalog__image" alt="{{ product.title }}">
+                   <img src="{{ product.image }}" class="catalog__image" alt="{{ product.title }}">
+
                     {% if product.badge %}
                         <span class="catalog__badge">{{ product.badge }}</span>
                     {% endif %}
@@ -54,6 +58,7 @@
     {% for post in page.blog_posts %}
         <article class="blog__post">
             <img src="{{ post.image }}" class="blog__image" alt="{{ post.title }}">
+
             <div class="blog__meta">
                 <span class="blog__subtitle">{{ post.author }}</span> |
                 <span class="blog__date">{{ post.date }}</span>
@@ -85,7 +90,8 @@
     <h2 class="team__title">Our Team</h2>
     {% for member in page.team_members %}
         <div class="team__card">
-            <img src="{{ member.image }}" alt="{{ member.name }}" class="team__image">
+          <img src="{{ member.image }}" alt="{{ member.name }}" class="team__image">
+
             <h3 class="team__name">{{ member.name }}</h3>
             <p class="team__role">{{ member.role }}</p>
             <ul class="team__social">

src/templates/layouts/base.twig

@@ -9,23 +9,24 @@
     <link href="https://fonts.googleapis.com/css2?family=Bakbak+One&family=Black+Han+Sans&family=Candal&family=Lalezar&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Bakbak+One&family=Black+Han+Sans&family=Candal&family=Lalezar&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
-    <link rel="stylesheet" href="{{ asset('src/styles/style.css') }}">
+   <link rel="stylesheet" href="/src/styles/style.css">
+
 
 
     {% block head %}{% endblock %}
 </head>
 <body>
 {# Header block (default includes header partial) #}
     {% block header %}
-        {% include "partials/header.twig" %}
+       {% include "../partials/header.twig" %}
     {% endblock %}
 
     {# Main content block #}
     {% block content %}{% endblock %}
 
     {# Footer block (default includes footer partial) #}
     {% block footer %}
-        {% include "partials/footer.twig" %}
+        {% include "../partials/footer.twig" %}
     {% endblock %}
 
 

src/templates/partials/footer.twig

@@ -1,27 +1,24 @@
-<nav class="main-nav">
-    <div class="container">
-        <!-- Logo -->
-        <a href="index.html" class="logo">
-            <img src="/src/assets/images/logo.svg" alt="BINABOX Logo">
-        </a>
+<footer class="site-footer">
+  <div class="container">
 
-        <!-- Navigation Menu -->
-        <ul class="nav-menu">
-            {% for item in common.site.menu %}
-                <li class="nav-item {% if item.active %}active{% endif %}">
-                    <a href="{{ item.url }}" class="nav-link">{{ item.label }}</a>
-                </li>
-            {% endfor %}
-        </ul>
+    <!-- Footer Description -->
+    <p class="footer-description">{{ common.footer.description }}</p>
 
-        <!-- Social Links -->
-        <div class="nav-social">
-            {% for social in common.footer.social %}
-                <a href="{{ social.url }}" class="social-link" target="_blank" rel="noopener">{{ social.name }}</a>
-            {% endfor %}
-        </div>
+    <!-- Footer Menu -->
+    <ul class="footer-menu">
+      {% for item in common.footer.menu %}
+        <li class="footer-menu-item">
+          <a href="{{ item.url }}" class="footer-link">{{ item.label }}</a>
+        </li>
+      {% endfor %}
+    </ul>
 
-        <!-- Discord / Action Button -->
-        <a href="{{ common.site.discordUrl }}" class="btn btn-discord">Join Discord</a>
+    <!-- Social Links -->
+    <div class="footer-social">
+      {% for social in common.footer.social %}
+        <a href="{{ social.url }}" class="social-link" target="_blank" rel="noopener">{{ social.name }}</a>
+      {% endfor %}
     </div>
-</nav>
+
+  </div>
+</footer>

src/templates/partials/header.twig

@@ -3,6 +3,7 @@
         <!-- Logo -->
         <a href="index.html" class="logo">
             <img src="/src/assets/images/logo.svg" alt="BINABOX Logo">
+
         </a>
 
         <!-- Navigation Menu -->

vite.config.js

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite';
 import fs from 'fs';
 import path from 'path';
+import vituum from 'vituum'
 import twig from '@vituum/vite-plugin-twig';
 import nunjucks from '@vituum/vite-plugin-nunjucks';
 import postcss from '@vituum/vite-plugin-postcss';
@@ -12,6 +13,10 @@ const commonData = JSON.parse(
   fs.readFileSync(path.resolve('src/data/common.json'), 'utf-8')
 );
 
+const indexData = JSON.parse(
+  fs.readFileSync(path.resolve('src/data/index.json'), 'utf-8')
+);
+
 export default defineConfig({
   server: {
     port: 5173,
@@ -23,15 +28,17 @@ export default defineConfig({
   },
   plugins: [
     svgSprite(),
+    vituum(), 
     twig({
       root: 'src', // Root folder for Twig templates
       templatesDir: [
-        'src/pages',             // your page templates
-        'src/templates/layouts', // layouts like base.twig
-        'src/templates/partials' // header/footer partials
+        'pages',             // your page templates
+        'templates/layouts', // layouts like base.twig
+        'templates/partials' // header/footer partials
       ],
       globals: {
-        common: commonData
+        common: commonData,
+        page: indexData 
       }
     }),
     nunjucks(),