Skip to content

Commit 3694dd6

Browse files
quinta-blipquinta-blip
committed
Add HTML templates using Twig
1 parent 83d5c77 commit 3694dd6

File tree

16 files changed

+512
-25
lines changed

16 files changed

+512
-25
lines changed

‎src/data/blog.json‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
{
2+
"page_title": "BINABOX Blog",
3+
"breadcrumbs": [
4+
{ "text": "Home", "href": "index.html" },
5+
{ "text": "Blog", "href": "blog.html" }
6+
],
7+
"categories": [
8+
{ "text": "NFT News", "href": "blog.html?category=nft-news", "count": 12 },
9+
{ "text": "Guides", "href": "blog.html?category=guides", "count": 5 },
10+
{ "text": "Interviews", "href": "blog.html?category=interviews", "count": 3 }
11+
],
12+
"tags": ["NFT", "Blockchain", "Art", "Crypto"],
13+
"article": {
14+
"image": "/src/assets/images/blog-main.png",
15+
"alt": "NFT Artwork",
16+
"caption": "Featured NFT of the month",
17+
"title": "How NFTs are Changing the Art World",
18+
"status": "Featured",
19+
"author": "Jane Doe",
20+
"date": "2025-01-10",
21+
"text": "Explore the impact of NFTs on modern art and digital ownership.",
22+
"points": [
23+
"NFTs provide provable digital ownership",
24+
"Artists can reach a global audience",
25+
"Blockchain ensures transparency and security"
26+
],
27+
"features": [
28+
{
29+
"image": "/src/assets/images/feature1.png",
30+
"alt": "Feature 1",
31+
"text": "Feature description 1"
32+
},
33+
{
34+
"image": "/src/assets/images/feature2.png",
35+
"alt": "Feature 2",
36+
"text": "Feature description 2"
37+
}
38+
],
39+
"quote": {
40+
"text": "NFTs are revolutionizing the art market.",
41+
"rating": "5/5",
42+
"company": "CryptoArt Magazine"
43+
},
44+
"gallery": [
45+
{ "image": "/src/assets/images/gallery1.png", "alt": "Gallery 1", "caption": "Artwork 1" },
46+
{ "image": "/src/assets/images/gallery2.png", "alt": "Gallery 2", "caption": "Artwork 2" }
47+
]
48+
},
49+
"content": {
50+
"title": "In-Depth Analysis",
51+
"paragraphs": [
52+
"NFTs have transformed how art is bought, sold, and valued in the digital era.",
53+
"Collectors can now verify authenticity and ownership on the blockchain."
54+
],
55+
"subtitle": "Additional Insights",
56+
"generators": [
57+
{ "text": "Learn more about NFTs ", "link": { "text": "here", "href": "https://example.com/nft-guide" } }
58+
],
59+
"tags": ["NFT", "Digital Art", "Blockchain"],
60+
"share_links": [
61+
{ "platform": "Twitter", "href": "https://twitter.com/share?url=blog.html" },
62+
{ "platform": "Facebook", "href": "https://facebook.com/share?url=blog.html" },
63+
{ "platform": "LinkedIn", "href": "https://linkedin.com/shareArticle?url=blog.html" }
64+
]
65+
}
66+
}

‎src/data/common.json‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,27 @@
11
{
2-
"common": {
3-
"siteTitle": "Bro Starter"
2+
"site": {
3+
"title": "BINABOX",
4+
"discordUrl": "#",
5+
"menu": [
6+
{ "label": "Home", "url": "index.html", "active": true },
7+
{ "label": "Blog", "url": "blog.html", "active": false },
8+
{ "label": "Catalog", "url": "catalog.html", "active": false },
9+
{ "label": "About", "url": "about.html", "active": false },
10+
{ "label": "Contact", "url": "contact.html", "active": false }
11+
]
12+
},
13+
"footer": {
14+
"description": "We are the best way to check the rarity of NFT collections.",
15+
"menu": [
16+
{ "label": "Home", "url": "index.html" },
17+
{ "label": "Blog", "url": "blog.html" },
18+
{ "label": "Catalog", "url": "catalog.html" },
19+
{ "label": "Contact", "url": "contact.html" }
20+
],
21+
"social": [
22+
{ "name": "Twitter", "url": "https://twitter.com" },
23+
{ "name": "Discord", "url": "https://discord.com" }
24+
]
425
}
526
}
27+

‎src/data/index.json‎

Lines changed: 63 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,65 @@
11
{
2-
"index": {
3-
"title": "Hello World!"
4-
}
2+
"banner_text": "Discover the latest NFT collections and trends with BINABOX.",
3+
"banner_image": "/src/assets/images/banner-cube.png",
4+
"banner_stats": [
5+
{ "value": "500+", "text": "Collections" },
6+
{ "value": "10K+", "text": "Users" },
7+
{ "value": "1M+", "text": "Transactions" }
8+
],
9+
"catalog_products": [
10+
{ "image": "/src/assets/images/product1.png", "title": "NFT Collection 1", "price": "2.5 ETH", "badge": "Hot" },
11+
{ "image": "/src/assets/images/product2.png", "title": "NFT Collection 2", "price": "1.2 ETH", "badge": "New" },
12+
{ "image": "/src/assets/images/product3.png", "title": "NFT Collection 3", "price": "3.0 ETH", "badge": null }
13+
],
14+
15+
"blog_posts": [
16+
{
17+
"image": "/src/assets/images/blog1.png",
18+
"author": "Jane Doe",
19+
"date": "2025-01-10",
20+
"badge": "Featured",
21+
"title": "How NFTs are Changing the Art World",
22+
"description": "Explore the impact of NFTs on modern art and digital ownership."
23+
},
24+
{
25+
"image": "/src/assets/images/blog2.png",
26+
"author": "John Smith",
27+
"date": "2025-02-05",
28+
"badge": null,
29+
"title": "Top NFT Collections of 2025",
30+
"description": "A curated list of the most sought-after NFT collections this year."
31+
}
32+
],
33+
"about_intro": "BINABOX is your gateway to discovering, tracking, and trading NFTs.",
34+
"about_items": [
35+
{ "subtitle": "Mission", "text": "To simplify NFT discovery and trading for everyone." },
36+
{ "subtitle": "Vision", "text": "To become the leading NFT platform worldwide." },
37+
{ "subtitle": "Values", "text": "Innovation, Security, Transparency." }
38+
],
39+
"team_members": [
40+
{
41+
"name": "Alice Johnson",
42+
"role": "CEO",
43+
"image": "/src/assets/images/team1.png",
44+
"social": [
45+
{ "platform": "Twitter", "link": "https://twitter.com/alice" },
46+
{ "platform": "LinkedIn", "link": "https://linkedin.com/in/alice" }
47+
]
48+
},
49+
{
50+
"name": "Bob Lee",
51+
"role": "CTO",
52+
"image": "/src/assets/images/team2.png",
53+
"social": [
54+
{ "platform": "Twitter", "link": "https://twitter.com/bob" },
55+
{ "platform": "LinkedIn", "link": "https://linkedin.com/in/bob" }
56+
]
57+
}
58+
],
59+
"faqs": [
60+
{ "question": "What is BINABOX?", "answer": "BINABOX is a platform to explore, track, and trade NFT collections." },
61+
{ "question": "How can I buy an NFT?", "answer": "Connect your wallet and follow the purchase instructions on the NFT page." },
62+
{ "question": "Is BINABOX secure?", "answer": "Yes, we use state-of-the-art security protocols to protect users." }
63+
]
564
}
65+

‎src/pages/blog.twig‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{% extends "layouts/base.twig" %}
2+
3+
{% block title %}BINABOX Blog Page{% endblock %}
4+
5+
{% block head %}
6+
<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">
7+
<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">
8+
{% endblock %}
9+
10+
{% block header %}
11+
{% include "partials/header.twig" %}
12+
{% endblock %}
13+
14+
{% block content %}
15+
<main class="blog-page__main">
16+
<!-- Page Title Section -->
17+
<section class="page-title">
18+
<h1 class="page-title__heading">{{ page_title }}</h1>
19+
<ul class="page-title__breadcrumbs">
20+
{% for breadcrumb in breadcrumbs %}
21+
<li>
22+
<a href="{{ breadcrumb.href }}" class="breadcrumbs__link">{{ breadcrumb.text }}</a>
23+
</li>
24+
{% endfor %}
25+
</ul>
26+
</section>
27+
28+
<!-- Content Wrapper -->
29+
<div class="content-wrapper">
30+
<!-- Aside Section -->
31+
<aside class="blog-aside">
32+
<h2 class="blog-aside__title">Categories</h2>
33+
<ul class="blog-aside__list">
34+
{% for category in categories %}
35+
<li>
36+
<a href="{{ category.href }}" class="blog-aside__link">
37+
{{ category.text }} ({{ category.count }})
38+
</a>
39+
</li>
40+
{% endfor %}
41+
</ul>
42+
43+
<div class="blog-aside__tags">
44+
<h3 class="tags__title">Tag</h3>
45+
<ul class="tags__list">
46+
{% for tag in tags %}
47+
<li><button class="tags__btn">{{ tag }}</button></li>
48+
{% endfor %}
49+
</ul>
50+
</div>
51+
</aside>
52+
53+
<!-- Blog Article Section (Partial) -->
54+
{% include 'blog-article.twig' with { article: article } %}
55+
56+
<!-- Blog Content Section (Partial) -->
57+
{% include 'blog-content.twig' with { content: content } %}
58+
</div>
59+
</main>
60+
{% endblock %}
61+
62+
{% block footer %}
63+
{% include "partials/footer.twig" %}
64+
{% endblock %}

‎src/pages/index.twig‎

Lines changed: 84 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,89 @@
1-
{% extends 'src/templates/layouts/base.twig' %}
1+
{% extends "src/templates/layouts/base.twig"%}
22

3-
{% from 'src/templates/partials/ui/icon.twig' import icon %}
3+
{% block title %}BINABOX Home Page{% endblock %}
4+
5+
{% block header %}
6+
<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">
7+
<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">
8+
{% endblock %}
9+
10+
{% block header %}
11+
{% include "partials/header.twig" %}
12+
{% endblock %}
413

514
{% block content %}
6-
<h1>{{ index.title }}</h1>
15+
<main>
16+
<!-- Banner Section -->
17+
<section class="banner">
18+
<h1 class="banner__title">WITH <span class="BINABOX">BINABOX</span> EXPLORE NFT COLLECTION</h1>
19+
<p class="banner__text">{{ banner_text }}</p>
20+
<div class="banner-section">
21+
{% for stat in banner_stats %}
22+
<div class="banner-section__item">
23+
<span class="banner-section__value">{{ stat.value }}</span>
24+
<p class="banner-section__text">{{ stat.text }}</p>
25+
</div>
26+
{% endfor %}
27+
</div>
28+
<div class="banner__actions">
29+
<button class="banner__button banner__button--primary" type="button">Connect Wallet</button>
30+
<button class="banner__button banner__button--disable" type="button">Whitelist now</button>
31+
</div>
32+
<img src="{{ banner_image }}" class="banner__image" alt="Binabox Cube">
33+
</section>
34+
35+
<!-- Catalog Section -->
36+
<section class="catalog">
37+
<div class="catalog__header">
38+
<h2 class="catalog__title">Catalog</h2>
39+
<button class="catalog__button catalog__button--default" type="button">see all</button>
40+
<div class="catalog__controls">
41+
<button class="catalog__button catalog__button-left" type="button" aria-label="Previous"></button>
42+
<button class="catalog__button catalog__button-right" type="button" aria-label="Next"></button>
43+
</div>
44+
</div>
45+
<ul class="catalog__list">
46+
{% for product in catalog_products %}
47+
<li class="catalog__item">
48+
{% include "partials/catalog.twig" with { product: product } %}
49+
</li>
50+
{% endfor %}
51+
</ul>
52+
</section>
753

8-
{% include 'src/templates/partials/welcome-section.twig' %}
54+
<!-- Blog Section -->
55+
<section class="blog">
56+
<h2 class="blog__title">Our Blog</h2>
57+
{% for post in blog_posts %}
58+
{% include "partials/blog-card.twig" with { post: post }%}
59+
{% endfor %}
60+
</section>
61+
62+
<!-- About Section -->
63+
<section class="about">
64+
<h2 class="about__title">About us</h2>
65+
{% include "partials/about.twig" with { about_intro: about_intro, about_items: about_items } %}
66+
<button class="btn load-more">Read more</button>
67+
</section>
68+
69+
<!-- Team Section -->
70+
<section class="team">
71+
<h2 class="team__title">Our Team</h2>
72+
{% for member in team_members %}
73+
{% include "partials/team-card.twig" with { member: member } %}
74+
{% endfor %}
75+
</section>
76+
77+
<!-- FAQ Section -->
78+
<section class="faq">
79+
<h2 class="faq__title">FAQs</h2>
80+
{% for faq in faqs %}
81+
{% include "partials/faq.twig" with { faq: faq } %}
82+
{% endfor %}
83+
</section>
84+
</main>
985
{% endblock %}
86+
87+
{% block footer %}
88+
{% include "partials/footer.twig" %}
89+
{% endblock %}

‎src/templates/layouts/base.twig‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,29 @@
1-
<!doctype html>
2-
<html lang='en'>
1+
<!DOCTYPE html>
2+
<html lang="en">
33
<head>
44
<meta charset='UTF-8'>
55
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
6-
<title>
7-
{% block title %}{{ common.siteTitle }}{% endblock %}
8-
</title>
6+
<title>{% block title %}{{ site.title }}{% endblock %}</title>
97
<link rel='stylesheet' href='/src/styles/main.scss'>
8+
{% block head %}{% endblock %}
109
</head>
1110
<body>
12-
<header>
13-
<div class='container'>
14-
<h1>
15-
{% block header %}<img src='/src/assets/images/logo.svg' alt=''>{% endblock %}
16-
</h1>
17-
</div>
18-
</header>
11+
<header>
12+
{% block header %}
13+
<img src="/src/assets/images/logo.svg" alt="{{ common.siteTitle }}">
14+
{% endblock %}
15+
</header>
1916

2017
<main>
21-
<div class='container'>
2218
{% block content %}{% endblock %}
23-
</div>
2419
</main>
2520

2621
<footer>
27-
<div class='container'>
2822
<p>
2923
&copy; {% block year %}2024{% endblock %}
3024
{{ common.siteTitle }}. All rights reserved.
3125
</p>
32-
</div>
26+
{% block footer %}{% endblock %}
3327
</footer>
3428
</body>
3529
</html>

‎src/templates/partials/about.twig‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<p class="about__intro">{{ about_intro }}</p>
2+
<ol class="about__list">
3+
{% for item in about_items %}
4+
<li class="about__item">
5+
<h3 class="about__subtitle">{{ item.subtitle }}</h3>
6+
<p class="about__text">{{ item.text }}</p>
7+
</li>
8+
{% endfor %}
9+
</ol>

0 commit comments

Comments
 (0)