feat: many design changes

packages/base/Resources/Public/Scss/abstracts/_fonts.scss

@@ -0,0 +1,65 @@
+// The fonts available are OTF and TTF. Modern browsers prefer WOFF/WOFF2,
+// but we'll use TTF/OTF here.
+// We assume main.css is compiled into Resources/Public/Css, so to reach Fonts: ../Fonts/
+// Make sure filenames match exactly (case-sensitive) and spaces are escaped or handled properly.
+
+// Hajime Sans (no weight variations provided other than normal)
+@font-face {
+  font-family: 'Hajime Sans';
+  src: url('../Fonts/Hajime Sans.ttf') format('truetype'),
+       url('../Fonts/Hajime Sans.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+// Inter as a variable font:
+// The Inter variable fonts likely contain multiple weights.
+// We'll define one face for normal and one for italic using the variable font files.
+// Define the weight range if needed (e.g., font-weight: 100 900 for variable range).
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../Fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
+  font-weight: 100 900; // Adjust as needed for variable font range
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../Fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
+  font-weight: 100 900;
+  font-style: italic;
+}
+
+// Use Inter for body text
+body {
+  font-family: 'Inter', sans-serif;
+  font-weight: 500;
+}
+
+// Use Hajime Sans for headlines
+h1, h2, h3 {
+  font-family: 'Hajime Sans', sans-serif;
+  font-weight: 400;
+}
+
+h2 {
+  font-size: 4rem;
+}
+
+h4 {
+  font-size: 1.5rem;
+}
+
+a {
+    color: var(--cl-primary);
+    text-decoration: none;
+    font-weight: 700;
+}
+
+
+// Use Hajime Sans for buttons as well
+button, .btn {
+  font-family: 'Hajime Sans', sans-serif;
+  font-weight: 400;
+}

packages/base/Resources/Public/Scss/abstracts/_icons.scss

@@ -0,0 +1,62 @@
+.ci {
+  position: relative;
+}
+
+.ci::before {
+  position: relative;
+  top: 3px;
+  display: inline-block;
+  content: ' ';
+  width: 1em;
+  height: 1em;
+  mask-size: 1em;
+  mask-repeat: no-repeat;
+  background-color: currentColor;
+  mask-position: center;
+}
+
+.ci-instagram::before {
+  mask-image: url(../Icons/instagram.svg);
+}
+.ci-tiktok::before {
+  mask-image: url(../Icons/tiktok.svg);
+}
+.ci-linkedin::before {
+  mask-image: url(../Icons/linkedin.svg);
+}
+.ci-x::before {
+  mask-image: url(../Icons/x.svg);
+}
+.ci-email::before {
+  mask-image: url(../Icons/email.svg);
+}
+.ci-phone::before {
+  mask-image: url(../Icons/phone.svg);
+}
+
+
+a[href*="instagram.com"], a[href*="tiktok.com"], a[href*="linkedin.com"], a[href*="twitter.com"], a[href*="x.com"] {
+  position: relative;
+  top: 3px;
+  display: inline-block;
+  content: ' ';
+  width: 1em;
+  height: 1em;
+  mask-size: 1em;
+  mask-repeat: no-repeat;
+  background-color: currentColor;
+  mask-position: center;
+}
+
+a[href*="instagram.com*"]::before {
+  mask-image: url(../Icons/instagram.svg);
+}
+a[href*="tiktok.com"]::before {
+  mask-image: url(../Icons/tiktok.svg);
+}
+a[href*="linkedin.com"]::before {
+  mask-image: url(../Icons/linkedin.svg);
+}
+a[href*="x.com"]::before {
+  mask-image: url(../Icons/x.svg);
+}

packages/base/Resources/Public/Scss/abstracts/_variables.scss

@@ -22,6 +22,10 @@ $xl: 1200px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;
+
+  --bs-primary: #233600;
+  --bs-yellow: #F5AE07;
+  --cl-primary: #233600;
 }
 
 // Additional global variables can be added here