diff --git a/tools/website/assets/css/style.css b/tools/website/assets/css/style.css
new file mode 100644
index 00000000..e76592f5
--- /dev/null
+++ b/tools/website/assets/css/style.css
@@ -0,0 +1,329 @@
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ line-height: 1.6;
+ background-color: #121212;
+ color: #f0f0f0;
+ scroll-behavior: smooth;
+}
+
+.hero {
+ text-align: center;
+ background: linear-gradient(135deg, #1e1e2e, #313450);
+ color: white;
+ padding: 50px 20px;
+}
+
+.hero h1 {
+ font-size: 2.8em;
+ margin-bottom: 10px;
+ text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+}
+
+.hero p {
+ margin-bottom: 20px;
+ font-size: 1.3em;
+}
+
+.hero button {
+ background-color: #282828;
+ color: #ffffff;
+ border: none;
+ padding: 12px 25px;
+ font-size: 1.1em;
+ border-radius: 25px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 10px rgba(14, 14, 14, 0.5);
+}
+
+.hero button:hover {
+ background-color: #ff6b81;
+ color: black;
+ transform: scale(1.15);
+ box-shadow: 0 6px 15px rgba(255, 71, 87, 0.7);
+}
+
+.buttons-section {
+ text-align: center;
+ margin: 40px 20px;
+}
+
+.buttons-section h2 {
+ font-size: 2em;
+ margin-bottom: 20px;
+ text-transform: uppercase;
+ color: #ff4757;
+}
+
+.buttons-section button {
+ color: white;
+}
+
+.button {
+ background-color: #313450;
+ color: black;
+ border: none;
+ padding: 15px 30px;
+ font-size: 1.1em;
+ margin: 10px;
+ border-radius: 50px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: none;
+}
+
+.button:hover {
+ background-color: #ff4757;
+ transform: scale(1.1);
+ box-shadow: 0 6px 15px rgba(255, 71, 87, 0.6);
+ color: black;
+}
+
+.button:focus {
+ outline: none;
+}
+
+.screenshot-section {
+ text-align: center;
+ margin: 40px 20px;
+}
+
+.screenshot {
+ max-width: 80%;
+ height: auto;
+ border-radius: 15px;
+ box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5);
+ transition: transform 0.5s ease, box-shadow 0.5s ease;
+}
+
+.screenshot:hover {
+ transform: scale(1.05);
+ box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.8);
+}
+
+.features-section {
+ background-color: #1e1e2e;
+ padding: 40px 20px;
+}
+
+.features-section h2 {
+ text-align: center;
+ margin-bottom: 20px;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ font-size: 2em;
+}
+
+.features {
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+ flex-wrap: wrap;
+}
+
+.card {
+ background: linear-gradient(135deg, #313450, #1e1e2e);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+ padding: 20px;
+ width: 300px;
+ border-radius: 15px;
+ text-align: center;
+ transition: transform 0.4s ease, box-shadow 0.4s ease;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.card:hover {
+ transform: translateY(-10px) scale(1.05);
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+}
+
+.card h3 {
+ color: #ff4757;
+ margin-bottom: 10px;
+}
+
+.card p {
+ color: #ccc;
+}
+
+.feature-detail {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 40px 20px;
+ gap: 30px;
+ opacity: 0;
+ transform: translateY(50px);
+ transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.feature-detail.active {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.feature-detail:nth-child(even) {
+ flex-direction: row-reverse;
+}
+
+.feature-detail img {
+ max-width: 50%;
+ border-radius: 15px;
+ box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5);
+ transition: transform 0.8s ease, box-shadow 0.8s ease;
+ margin: 0 40px;
+}
+
+.feature-detail.active img:hover {
+ transform: scale(1.11);
+ box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.8);
+}
+
+.feature-detail img.active {
+ transform: scale(1.1);
+ box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.7);
+}
+
+.feature-detail .text {
+ max-width: 40%;
+ padding: 0 20px;
+}
+
+.feature-detail .text h3 {
+ font-size: 1.8em;
+ margin-bottom: 10px;
+ color: #ff4757;
+}
+
+.feature-detail .text p {
+ color: #ccc;
+ font-size: 1.1em;
+ line-height: 1.6;
+}
+
+.footer {
+ text-align: center;
+ padding: 20px;
+ background-color: #121212;
+ color: #bbb;
+ border-top: 1px solid #2a2a2a;
+}
+
+@media (max-width: 768px) {
+ .features {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .feature-detail {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .feature-detail img,
+ .feature-detail .text {
+ max-width: 100%;
+ }
+}
+
+header {
+ position: sticky;
+ top: 0;
+ max-height: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+ backdrop-filter: blur(10px);
+ background: rgba(0, 0, 0, 0.5);
+ z-index: 999;
+}
+
+header img {
+ width: 64px;
+ height: 64px;
+}
+
+.div-warning {
+ text-decoration: none;
+ color: white;
+ font-size: 1.2em;
+ text-align: center;
+ display: flex;
+ margin-left: auto;
+ text-shadow: 0px 0px 5px rgba(255, 0, 0, 1);
+}
+
+.div-dropdown {
+ position: relative;
+ display: flex;
+ align-items: center;
+ margin-left: auto;
+}
+
+.header-button {
+ background-color: #313450;
+ color: white;
+ border: none;
+ text-decoration: none;
+ display: block;
+ border-radius: 8px;
+ font-size: 1.1em;
+ padding: 8px 12px;
+ margin: 0;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+}
+
+.header-button:hover {
+ transform: scale(1.05);
+}
+
+.dropdown-content {
+ display: none;
+ position: absolute;
+ top: 110%;
+ right: 0;
+ background-color: #313450;
+ z-index: 1;
+ border-radius: 12px;
+ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
+ padding: 10px 0;
+ max-height: 300px;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.dropdown-content::-webkit-scrollbar {
+ width: 8px;
+}
+
+.dropdown-content::-webkit-scrollbar-thumb {
+ background-color: #ff4757;
+ border-radius: 4px;
+}
+
+.dropdown-content::-webkit-scrollbar-thumb:hover {
+ background-color: #ff6b81;
+}
+
+.dropdown-content a {
+ color: white;
+ white-space: nowrap;
+ text-decoration: none;
+ display: block;
+ padding: 8px 12px;
+ border-radius: 8px;
+ font-size: 1.1em;
+ transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
+}
+
+.dropdown-content a:hover {
+ background-color: #ff4757;
+ color: black;
+ transform: scale(1.05);
+}
\ No newline at end of file
diff --git a/tools/website/assets/images/feature-default.png b/tools/website/assets/images/feature-default.png
new file mode 100644
index 00000000..e1dc44d2
Binary files /dev/null and b/tools/website/assets/images/feature-default.png differ
diff --git a/tools/website/assets/images/feature1-en.png b/tools/website/assets/images/feature1-en.png
new file mode 100644
index 00000000..f091cc56
Binary files /dev/null and b/tools/website/assets/images/feature1-en.png differ
diff --git a/tools/website/assets/images/feature2-en.png b/tools/website/assets/images/feature2-en.png
new file mode 100644
index 00000000..2c7a9b35
Binary files /dev/null and b/tools/website/assets/images/feature2-en.png differ
diff --git a/tools/website/assets/images/feature3-en.png b/tools/website/assets/images/feature3-en.png
new file mode 100644
index 00000000..e26b2148
Binary files /dev/null and b/tools/website/assets/images/feature3-en.png differ
diff --git a/tools/website/assets/images/screenshot-default.png b/tools/website/assets/images/screenshot-default.png
new file mode 100644
index 00000000..604acfb7
Binary files /dev/null and b/tools/website/assets/images/screenshot-default.png differ
diff --git a/tools/website/assets/images/screenshot-en.png b/tools/website/assets/images/screenshot-en.png
new file mode 100644
index 00000000..e66939d9
Binary files /dev/null and b/tools/website/assets/images/screenshot-en.png differ
diff --git a/tools/website/assets/js/script.js b/tools/website/assets/js/script.js
new file mode 100644
index 00000000..e74fc32d
--- /dev/null
+++ b/tools/website/assets/js/script.js
@@ -0,0 +1,91 @@
+const featureDetails = document.querySelectorAll('.feature-detail');
+
+const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('active');
+ const img = entry.target.querySelector('img');
+ img.classList.add('active');
+ }
+ else {
+ entry.target.classList.remove('active');
+ const img = entry.target.querySelector('img');
+ img.classList.remove('active');
+ }
+ });
+}, {
+ threshold: 0.1
+});
+
+featureDetails.forEach(detail => {
+ observer.observe(detail);
+});
+
+function updateContent(langData) {
+ document.querySelectorAll('[data-i18n]').forEach(element => {
+ const key = element.getAttribute('data-i18n');
+
+ if (key in langData) {
+ if (element.tagName === "IMG") {
+ element.src = langData[key];
+ } else {
+ element.innerHTML = langData[key];
+ }
+ } else {
+ console.warn(`Missing translation for key: '${key}'`);
+ }
+ });
+}
+
+function setLanguagePreference(lang) {
+ localStorage.setItem('language', lang);
+ location.reload();
+}
+
+async function fetchLanguageData(lang) {
+ try {
+ const response = await fetch(`assets/lang/${lang}.json`);
+ if (!response.ok) {
+ throw new Error(`Language file for '${lang}' not found`);
+ }
+ return response.json();
+ } catch (error) {
+ console.warn(error.message + `. Falling back to English.`);
+ return fetchLanguageData('en');
+ }
+}
+
+async function detectAndLoadLanguage() {
+ const savedLanguage = localStorage.getItem('language');
+ const browserLanguage = navigator.language || navigator.languages[0];
+ const languageToLoad = savedLanguage || browserLanguage.split('-')[0] || 'en';
+
+ console.log(`Detected language: ${browserLanguage}. Loading: ${languageToLoad}`);
+
+ const langData = await fetchLanguageData(languageToLoad);
+ updateContent(langData);
+}
+
+async function changeLanguage(lang) {
+ setLanguagePreference(lang);
+}
+
+window.addEventListener('DOMContentLoaded', detectAndLoadLanguage);
+
+function toggleDropdown() {
+ const dropdownMenu = document.getElementById('dropdownMenu');
+ dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
+}
+
+window.onclick = function (event) {
+ const dropdownMenu = document.getElementById('dropdownMenu');
+ const dropdownButton = document.querySelector('.header-button');
+ if (!dropdownMenu.contains(event.target) && event.target !== dropdownButton) {
+ dropdownMenu.style.display = 'none';
+ }
+};
+
+function downloadFennix() {
+ // TODO: Here will download the iso file
+ window.location.href = "https://github.com/EnderIce2/Fennix";
+}
diff --git a/tools/website/assets/lang/README.md b/tools/website/assets/lang/README.md
new file mode 100644
index 00000000..0725ae73
--- /dev/null
+++ b/tools/website/assets/lang/README.md
@@ -0,0 +1 @@
+# Language Directory
diff --git a/tools/website/assets/lang/bg.json b/tools/website/assets/lang/bg.json
new file mode 100644
index 00000000..e69de29b
diff --git a/tools/website/assets/lang/de.json b/tools/website/assets/lang/de.json
new file mode 100644
index 00000000..e69de29b
diff --git a/tools/website/assets/lang/en.json b/tools/website/assets/lang/en.json
new file mode 100644
index 00000000..37893787
--- /dev/null
+++ b/tools/website/assets/lang/en.json
@@ -0,0 +1,38 @@
+{
+ "home": "Fennix - Future of Computing",
+ "warning_message": "⚠️ The operating system is in early development ⚠️Fennix
- Fennix
+
-
-
Fennix
-
Operating System from scratch made in C and C++
-
Download Stable
- Version
-
Download
- Unstable Version
+
+
+
-
-
+ 
- 
- 
- 
- 
+ 
+