inicio da v2

.gitignore

@@ -4,6 +4,7 @@ composer.lock
 app/logs/*.log
 app/cache/*.gz
 TODO.md
+node_modules
 
 # Created by https://www.toptal.com/developers/gitignore/api/composer,windows,macos,linux
 # Edit at https://www.toptal.com/developers/gitignore?templates=composer,windows,macos,linux

app/Gulpfile.js

@@ -0,0 +1,86 @@
+"use strict";
+
+const gulp = require('gulp');
+const sass = require('gulp-sass')(require('sass'));
+const concat = require('gulp-concat');
+const uglify = require('gulp-uglify');
+const clean_css = require('gulp-clean-css');
+const sourcemaps = require('gulp-sourcemaps');
+const imagemin = require('gulp-imagemin');
+const webp = require('gulp-webp');
+const newer = require('gulp-newer');
+const ttf2woff = require('gulp-ttf2woff');
+const ttf2woff2 = require('gulp-ttf2woff2');
+
+const paths = {
+	styles: {
+		src: 'assets/scss/*.scss',
+		dest: 'dist/css'
+	},
+	scripts: {
+		src: 'assets/js/*.js',
+		dest: 'dist/js'
+	},
+	images: {
+		src: 'assets/images/**/*',
+		dest: 'dist/images'
+	},
+	fonts: {
+		src: 'assets/fonts/**/*',
+		dest: 'dist/fonts'
+	}
+};
+
+function styles() {
+	return gulp.src(paths.styles.src)
+		.pipe(sourcemaps.init())
+		.pipe(sass({
+			outputStyle: "expanded",
+			includePaths: ['./node_modules']
+		}))
+		.pipe(concat('style.css'))
+		.pipe(clean_css())
+		.pipe(gulp.dest(paths.styles.dest))
+		.pipe(sourcemaps.write('.'))
+		.pipe(gulp.dest(paths.styles.dest))
+}
+
+function scripts() {
+	return gulp.src(paths.scripts.src)
+		.pipe(sourcemaps.init())
+		.pipe(concat('script.js'))
+		.pipe(uglify())
+		.pipe(gulp.dest(paths.scripts.dest))
+		.pipe(sourcemaps.write('.'))
+		.pipe(gulp.dest(paths.scripts.dest))
+}
+
+function images() {
+	return gulp.src(paths.images.src)
+		.pipe(newer(paths.images.dest))
+		.pipe(imagemin())
+		.pipe(gulp.dest(paths.images.dest))
+		.pipe(webp())
+		.pipe(gulp.dest(paths.images.dest))
+}
+
+function fonts() {
+	return gulp.src(paths.fonts.src)
+		.pipe(newer(paths.fonts.dest))
+		.pipe(ttf2woff())
+		.pipe(gulp.dest(paths.fonts.dest))
+		.pipe(ttf2woff2())
+		.pipe(gulp.dest(paths.fonts.dest))
+}
+
+function watch() {
+	gulp.watch(paths.styles.src, styles);
+	gulp.watch(paths.scripts.src, scripts);
+	gulp.watch(paths.images.src, images);
+	gulp.watch(paths.fonts.src, fonts);
+}
+
+exports.default = gulp.series(
+	gulp.parallel(styles, scripts, images, fonts),
+	watch
+);

app/assets/scss/_base.scss

@@ -0,0 +1,33 @@
+// Default
+body {
+	font-family: var(--font-family-haffer);
+	font-size: var(--font-size);
+	font-weight: var(--font-weight);
+	line-height: var(--line-height);
+	color: var(--text);
+	text-align: left;
+	background-color: var(--background);
+	min-width: 320px;
+}
+
+a {
+	text-decoration: none;
+	color: var(--link);
+
+	&:hover {
+		text-decoration: none;
+		color: var(--link-lighten);
+	}
+}
+
+.container {
+	padding-right: var(--container_spacing);
+	padding-left: var(--container_spacing);
+	margin-right: auto;
+	margin-left: auto;
+
+	@include devices(desktop) {
+        max-width: 1248px;
+    }
+
+}

app/assets/scss/_fonts.scss

@@ -0,0 +1,35 @@
+@font-face {
+    font-family: 'inter';
+    src: url('../fonts/inter-500.eot');
+    src: local('Inter Medium'), local('Inter-Medium'),
+        url('../fonts/inter-500.woff2') format('woff2'),
+        url('../fonts/inter-500.woff') format('woff'),
+        url('../fonts/inter-500.ttf') format('truetype');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'inter';
+    src: url('../fonts/inter-600.eot');
+    src: local('Inter SemiBold'), local('Inter-SemiBold'),
+        url('../fonts/inter-600.woff2') format('woff2'),
+        url('../fonts/inter-600.woff') format('woff'),
+        url('../fonts/inter-600.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'unna';
+    src: url('../fonts/unna-400.eot');
+    src: local('Unna Regular'), local('Unna-Regular'),
+        url('../fonts/unna-400.woff2') format('woff2'),
+        url('../fonts/unna-400.woff') format('woff'),
+        url('../fonts/unna-400.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}

app/assets/scss/_icons.scss

@@ -0,0 +1,19 @@
+// https://icons.getbootstrap.com/
+// https://icofont.com/icons
+
+// https://jakearchibald.github.io/svgomg/
+// https://yoksel.github.io/url-encoder/
+// https://codepen.io/sosuke/pen/Pjoqqp
+
+.icon {
+	display: inline-block;
+	vertical-align: -0.125em;
+	fill: currentcolor;
+	width: 1em;
+	height: 1em;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: 100% auto;
+}
+
+@include icon('alice');

app/assets/scss/_mixin.scss

@@ -0,0 +1,24 @@
+
+@mixin create-color($name, $color) {
+    --#{$name}: #{$color};
+    --#{$name}-lighten: color.scale($color, $lightness: -100%);
+    --#{$name}-darken: color.adjust($color, $lightness: -10%)
+}    
+
+@mixin devices($breakpoint) {
+	@if $breakpoint == desktop {
+		@media only screen and (min-width: 1200px) {
+			@content;
+		}
+	}
+}
+
+@mixin background-image-svg($name) {
+	background-image: url("../images/icons/#{$name}.svg");
+}
+
+@mixin icon($name) {
+	.icon--#{$name} {
+		@include background-image-svg($name);
+	}
+}

app/assets/scss/_root.scss

@@ -0,0 +1,57 @@
+:root {
+	// Fonts
+	--font-family-sans-serif: -apple-system,
+		BlinkMacSystemFont,
+		"Segoe UI",
+		Roboto,
+		"Helvetica Neue",
+		Arial,
+		"Noto Sans",
+		"Liberation Sans",
+		sans-serif,
+		"Apple Color Emoji",
+		"Segoe UI Emoji",
+		"Segoe UI Symbol",
+		"Noto Color Emoji";
+	--font-family-monospace: SFMono-Regular,
+		Menlo, Monaco,
+		Consolas,
+		"Liberation Mono",
+		"Courier New",
+		monospace;
+	--font-family-haffer: "haffer";
+
+	//-- Styles
+	--font-size: 16px;
+	--font-weight: 500;
+	--line-height: 160%;
+
+	// Colors
+	$hex-marreta: #fff;
+	$hex-text: #000;
+    $hex-textmuted: #000;
+    $hex-link: #000;
+
+	@include create-color('marreta', $hex-marreta);
+    @include create-color('text', $hex-text);
+    @include create-color('textmuted', $hex-textmuted);
+    @include create-color('link', $hex-link);
+
+	// Borders
+	--border-radius-default: 1rem;
+
+	// Spacing
+	--container_spacing: 24px;
+	@include devices(desktop) {
+        --container_spacing: 64px;
+    }
+}
+
+html {
+	scroll-behavior: smooth;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+	html {
+		scroll-behavior: auto;
+	}
+}

app/assets/scss/index.scss

@@ -0,0 +1,13 @@
+@use "sass:math";
+@use "sass:color";
+
+@import "normalize.css/normalize";
+
+@import "mixin";
+@import "fonts";
+
+@import "root";
+@import "base";
+@import "icons";
+
+@import "home";