forgefy 1.0.0

package/templates/next/base/scss/_mixins.scss

@@ -0,0 +1,141 @@
+@use 'sass:map';
+
+// Mixins de Alinhamentos
+
+// alinha conteudo com flexbox
+@mixin flex-aligned {
+  display: flex;
+  align-items: center;
+}
+
+// Flex: centraliza conteúdo com flexbox
+@mixin center-flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+//Flex: Alinha conteudo na direita
+@mixin end-flex {
+  display: flex;
+  justify-content: flex-end;
+}
+
+// Flex: direção coluna
+@mixin column-flex {
+  display: flex;
+  flex-direction: column;
+}
+
+// Flex: direção linha
+@mixin row-flex {
+  display: flex;
+  flex-direction: row;
+}
+
+// Flex: centraliza conteúdo com espaçamento
+@mixin flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+// Flex: direção coluna com espaçamento
+@mixin column-flex-spacement {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+//Flex: Alinha conteudo no meio da tela
+@mixin center-screen-flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 90vh;
+}
+
+//Grid: Dividi em duas colunas iguais 
+@mixin column-equal-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+// Mixins Responsivos
+
+// Breakpoints
+$breakpoints: (
+  xs: 696px,
+  sm: 837px,
+  md: 1008px,
+  lg: 1200px,
+  exlg: 1700px
+);
+
+@mixin respond-to($breakpoint) {
+  @media (max-width: map.get($breakpoints, $breakpoint)) {
+    @content;
+  }
+}
+
+// Container responsivo
+@mixin container($max-width: 1200px) {
+  width: 100%;
+  max-width: $max-width;
+}
+
+// Fonte responsiva com clamp
+@mixin responsive-font($min, $max) {
+  font-size: clamp(#{$min}, 2vw, #{$max}) !important;
+}
+
+// Esconde visualmente
+@mixin hidden {
+  display: none;
+}
+
+// Esconde visualmente mas mantém acessível
+@mixin visually-hidden {
+  position: absolute !important;
+  height: 1px; width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+}
+
+// Oculta um elemento baseado na pseudo-classe `:nth-child()` Ex: n+6, 3, even, odd, etc.
+@mixin hidden-number-child($number-child) {
+  &:nth-child(#{$number-child}) {
+    @include hidden;
+  }
+}
+
+// Espaçamentos
+
+@mixin margin-1 {margin: 0.5rem }
+@mixin margin-2 {margin: 1rem }
+@mixin margin-3 {margin: 2rem }
+
+@mixin margin-top-1 { margin-top: 0.5rem }
+@mixin margin-top-2 { margin-top: 1rem }
+@mixin margin-top-3 { margin-top: 2rem }
+
+@mixin margin-bottom-1 { margin-bottom: 0.5rem }
+@mixin margin-bottom-2 { margin-bottom: 1rem }
+@mixin margin-bottom-3 { margin-bottom: 2rem }
+
+@mixin margin-left-1 { margin-left: 0.5rem }
+@mixin margin-left-2 { margin-left: 1rem }
+@mixin margin-left-3 { margin-left: 2rem }
+
+@mixin margin-right-1 { margin-right: 0.5rem }
+@mixin margin-right-2 { margin-right: 1rem }
+@mixin margin-right-3 { margin-right: 2rem }
+
+@mixin padding-1 { padding: 0.5rem }
+@mixin padding-2 { padding: 1rem }
+@mixin padding-3 { padding: 2rem }
+
+@mixin gap-1 { gap: 0.5rem; }
+@mixin gap-2 { gap: 1rem; }
+@mixin gap-3 { gap: 2rem; }

package/templates/next/base/scss/_typography.scss

@@ -0,0 +1,34 @@
+@use '@/scss/_mixins';
+
+// importa direto do Google Fonts
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+
+// Mixins
+@mixin set-inter-extra-bold { font-family: "Inter", sans-serif; font-weight: 800; }
+@mixin set-inter-bold       { font-family: "Inter", sans-serif; font-weight: 700; }
+@mixin set-inter-semibold   { font-family: "Inter", sans-serif; font-weight: 600; }
+@mixin set-inter-regular    { font-family: "Inter", sans-serif; font-weight: 400; }
+@mixin set-inter-medium     { font-family: "Inter", sans-serif; font-weight: 500; }
+
+// Classes utilitárias
+.inter-extra-bold { @include set-inter-extra-bold; }
+.inter-bold       { @include set-inter-bold; }
+.inter-semibold   { @include set-inter-semibold; }
+.inter-regular    { @include set-inter-regular; }
+.inter-medium     { @include set-inter-medium; }
+
+// Pesos genéricos
+.font-wt-0 { font-weight: 100; }
+.font-wt-1 { font-weight: 200; }
+.font-wt-2 { font-weight: 400; }
+.font-wt-3 { font-weight: 600; }
+.font-wt-4 { font-weight: 700; }
+
+// Tamanhos
+.font-size-0 { font-size: 0.65rem; }
+.font-size-1 { font-size: 0.875rem; }
+.font-size-2 { font-size: 1rem; }
+.font-size-3 { font-size: 1.25rem; }
+.font-size-4 { font-size: 1.5rem; }
+.font-size-5 { font-size: 2rem; }
+.font-size-6 { font-size: 3rem; }

package/templates/next/base/scss/_utilities.scss

@@ -0,0 +1,145 @@
+@use '@/scss/_colors' as *;
+
+// Alinhamentos
+
+// Flex: centraliza conteúdo com flexbox
+.flex-aligned {
+  display: flex;
+  align-items: center;
+}
+
+// Flex: centraliza e alinha conteúdo com flexbox
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// Flex: centraliza conteúdo com espaçamento
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+//Flex: Alinha conteudo na direita
+.flex-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
+//Grid: Dividi em duas colunas iguais
+.column-equal-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+
+// Alinhamento de texto
+.text-center {
+  text-align: center;
+}
+
+// Espaçamentos
+
+.m-0 { margin: 0; }
+.m-05 { margin: 0.3rem; }
+.m-1 { margin: 0.5rem; }
+.m-2 { margin: 1rem; }
+.m-3 { margin: 2rem; }
+.m-4 { margin: 3rem; }
+
+.mt-1 { margin-top: 0.5rem; }
+.mt-2 { margin-top: 1rem; }
+.mt-3 { margin-top: 2rem; }
+.mt-4 { margin-top: 3rem; }
+.mt-5 { margin-top: 4rem; }
+.mt-6 { margin-top: 5rem; }
+.mt-7 { margin-top: 6rem; }
+
+.mb-1 { margin-bottom: 0.5rem; }
+.mb-2 { margin-bottom: 1rem; }
+.mb-3 { margin-bottom: 2rem; }
+.mb-4 { margin-bottom: 3rem; }
+.mb-5 { margin-bottom: 4rem; }
+.mb-6 { margin-bottom: 5rem; }
+
+.ml-0 { margin-left: 0.2rem; }
+.ml-1 { margin-left: 0.5rem; }
+.ml-2 { margin-left: 1rem; }
+.ml-3 { margin-left: 2rem; }
+.ml-4 { margin-left: 3rem; }
+.ml-5 { margin-left: 4rem; }
+
+.mr-1 { margin-right: 0.5rem; }
+.mr-2 { margin-right: 1rem; }
+.mr-3 { margin-right: 2rem; }
+.mr-4 { margin-right: 3rem; }
+.mr-5 { margin-right: 4rem; }
+
+.p-1  { padding: 0.5rem; }
+.p-2  { padding: 1rem; }
+.p-3  { padding: 2rem; }
+.p-4  { padding: 3rem; }
+.p-5  { padding: 4rem; }
+
+.g-1  { gap: 0.5rem; }
+.g-2  { gap: 1rem; }
+.g-3  { gap: 2rem; }
+.g-4  { gap: 3rem; }
+.g-5  { gap: 4rem; }
+
+// transições
+
+.fade-in {
+  opacity: 0;
+  animation: fadeIn 0.5s ease-in-out forwards;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+// estilos
+
+.dark-overlay{
+  content: "";
+  background: #000000fc;
+  height: 100%;
+  left: 0;
+  opacity: .4;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+  transition: all .35s ease-in-out;
+}
+
+// Border Radius
+
+.br-1 { border-radius: 10px; }
+.br-2 { border-radius: 15px; }
+.br-3 { border-radius: 20px; }
+
+// apaercer
+
+.z-index-1 {z-index: 1;}
+.z-index-2 {z-index: 2;}
+
+// hover
+
+.icon-hover {
+  cursor: pointer;
+  transition: stroke 0.3s, fill 0.3s;
+}
+
+.icon-hover:hover path {
+  stroke: $light-green;
+  fill: none;
+}
+
+.icon-hover-interno:hover path {
+  stroke: $light-green;
+  fill: $light-green;
+}

package/templates/next/base_landpage/app/globals.scss

@@ -0,0 +1,126 @@
+@use '@/scss/colors' as *;
+@use '@/scss/typography' as *;
+@use '@/scss/mixins' as *;
+
+body {
+  scroll-behavior: smooth;
+  height: 100%;
+  width: 100%;
+  margin: 0px;
+  transition: all 0.5s ease;
+
+  ul, ol {
+    margin: 0 ;
+    list-style: none;
+    padding: 0;
+  }
+
+  li {
+    list-style-type: none;
+    margin: 0;
+  }
+
+  a {
+    font-size: 1.1rem;
+    font-weight: 400;
+    text-decoration: none;
+    position: relative;
+    display: inline-block;
+    @include set-inter-regular;
+    @include set-color-light-grey;
+  }
+
+  a:hover {
+    visibility: visible;
+    transform: scaleX(1);
+    @include set-color-light-green;
+    cursor: pointer;
+  }
+
+  a::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    visibility: hidden;
+    transform: scaleX(0);
+    transition: all 0.2s ease-in-out;
+  }
+
+  a:hover::after {
+    visibility: visible;
+    transform: scaleX(1);
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  hr {
+    border-color: #8080801a;
+  }
+
+  h1 {
+    margin: 0.2rem;
+    @include responsive-font(2vw, 2.4vw);
+    @include set-inter-bold;
+    @include set-color-white;
+    z-index: 1;
+  }
+
+  h4 {
+    line-height: 1.5;
+    font-weight: 400;
+    margin: 0.2rem;
+    @include responsive-font(1.3vw, 1.4vw);
+    @include set-inter-regular;
+    @include set-color-light-green;
+  }
+
+  h2, h3, h5 {
+    @include set-inter-bold;
+    @include set-color-white;
+  }
+
+  p {
+    @include set-color-grey;
+    @include set-inter-medium;
+    font-size: 1.5vw;
+    line-height: 1.5;
+  }
+
+  #ButtonCards {
+    width: 12vw;
+    border-radius: 1rem;
+    border-style: none;
+  }
+}
+
+// Espaçamento bordas
+
+@mixin set-space-body($space-body) {
+  padding: 0 $space-body;
+}
+
+.box {
+  @include set-space-body(8rem);
+
+  @include respond-to(lg) {
+    @include set-space-body(4rem);
+  }
+
+  @include respond-to(md) {
+    @include set-space-body(3rem);
+  }
+
+  @include respond-to(sm) {
+    @include set-space-body(1rem);
+  }
+}

package/templates/next/base_landpage/app/layout.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+import "./globals.scss";
+
+export const metadata: Metadata = {
+  title: "projeto",
+  description: "new project",
+  icons: {
+    icon: "/icons/next._icon.svg",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+      </body>
+    </html>
+  );
+}

package/templates/next/base_landpage/app/page.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import Header from "next/base/components/UI/Header";
+
+export default function Home() {
+  return (
+    <div>
+      <Header></Header>
+    </div>
+  );
+}

package/templates/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />