Update src/app/page.tsx
This commit is contained in:
452
src/app/page.tsx
452
src/app/page.tsx
@@ -2,16 +2,16 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import { Box, Compass, Palette } from "lucide-react";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -28,319 +28,143 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Hero",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Introdução",
|
||||
id: "intro",
|
||||
},
|
||||
{
|
||||
name: "Deslocamentos",
|
||||
id: "movements",
|
||||
},
|
||||
{
|
||||
name: "Galeria",
|
||||
id: "gallery",
|
||||
},
|
||||
{
|
||||
name: "Área Interativa",
|
||||
id: "interactive",
|
||||
},
|
||||
{
|
||||
name: "Educativo",
|
||||
id: "educational",
|
||||
},
|
||||
]}
|
||||
brandName="Geometria na Arte"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Hero", id: "hero" },
|
||||
{ name: "Introdução", id: "intro" },
|
||||
{ name: "Deslocamentos", id: "movements" },
|
||||
{ name: "Galeria", id: "gallery" },
|
||||
{ name: "Educativo", id: "educational" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Área Interativa", id: "interactive" }
|
||||
]}
|
||||
brandName="Geometria na Arte"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Geometria na Arte"
|
||||
description="Descobre como as figuras geométricas criam arte através de movimentos e padrões."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explorar Padrões",
|
||||
href: "#intro",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/digital-training-innovation-concept-with-futuristic-interface-screens_1134-352.jpg",
|
||||
imageAlt: "Formas Geométricas",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-aesthetic-background-with-3d-effect_23-2150644143.jpg",
|
||||
imageAlt: "Movimentos Matemáticos",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/supplies-white-red-black-table_171337-13098.jpg",
|
||||
imageAlt: "Arte e Geometria",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/moving-hex-backgrounds-networking_23-2149755781.jpg",
|
||||
imageAlt: "Padrões Visuais",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rustic-vault-ancient-texture-architectural-background_169016-68656.jpg",
|
||||
imageAlt: "Arquitetura Geométrica",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/creative-bauhaus-lines-organic-shape-template-earth-tone-color_1017-61387.jpg",
|
||||
imageAlt: "Mosaicos Escher",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Geometria na Arte"
|
||||
description="Descobre como as figuras geométricas criam arte através de movimentos e padrões."
|
||||
buttons={[{ text: "Explorar Padrões", href: "#intro" }]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/digital-training-innovation-concept-with-futuristic-interface-screens_1134-352.jpg", imageAlt: "Formas Geométricas" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/vertical-aesthetic-background-with-3d-effect_23-2150644143.jpg", imageAlt: "Movimentos Matemáticos" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/supplies-white-red-black-table_171337-13098.jpg", imageAlt: "Arte e Geometria" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/moving-hex-backgrounds-networking_23-2149755781.jpg", imageAlt: "Padrões Visuais" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/rustic-vault-ancient-texture-architectural-background_169016-68656.jpg", imageAlt: "Arquitetura Geométrica" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-vector/creative-bauhaus-lines-organic-shape-template-earth-tone-color_1017-61387.jpg", imageAlt: "Mosaicos Escher" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="intro" data-section="intro">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="O Universo dos Padrões"
|
||||
metrics={[
|
||||
{
|
||||
icon: Box,
|
||||
label: "Figuras Geométricas",
|
||||
value: "Base da Arte",
|
||||
},
|
||||
{
|
||||
icon: Compass,
|
||||
label: "Desenho Técnico",
|
||||
value: "Arquitetura",
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
label: "Estilos",
|
||||
value: "Exploração",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="intro" data-section="intro">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="O Universo dos Padrões"
|
||||
metrics={[
|
||||
{ icon: Box, label: "Figuras Geométricas", value: "Base da Arte" },
|
||||
{ icon: Compass, label: "Desenho Técnico", value: "Arquitetura" },
|
||||
{ icon: Palette, label: "Estilos", value: "Exploração" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="movements" data-section="movements">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "m1",
|
||||
title: "Translação",
|
||||
tags: [
|
||||
"Deslocamento",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/artistic-background-wallpaper-with-color-halftone-effect_58702-8768.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
title: "Rotação",
|
||||
tags: [
|
||||
"Giro",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dryer-drum-macro-stainless-texture-warm-reflections_169016-68898.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
title: "Reflexão",
|
||||
tags: [
|
||||
"Espelho",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-prism-light-deflection_23-2148599289.jpg",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
title: "Simetria",
|
||||
tags: [
|
||||
"Equilíbrio",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-shapes-pattern_1017-2490.jpg",
|
||||
},
|
||||
]}
|
||||
title="Deslocamentos Geométricos"
|
||||
description="Explora os quatro movimentos fundamentais que dão vida a padrões matemáticos fascinantes."
|
||||
/>
|
||||
</div>
|
||||
<div id="movements" data-section="movements">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "m1", title: "Translação", tags: ["Deslocamento"], imageSrc: "http://img.b2bpic.net/free-photo/artistic-background-wallpaper-with-color-halftone-effect_58702-8768.jpg" },
|
||||
{ id: "m2", title: "Rotação", tags: ["Giro"], imageSrc: "http://img.b2bpic.net/free-photo/dryer-drum-macro-stainless-texture-warm-reflections_169016-68898.jpg" },
|
||||
{ id: "m3", title: "Reflexão", tags: ["Espelho"], imageSrc: "http://img.b2bpic.net/free-photo/beautiful-prism-light-deflection_23-2148599289.jpg" },
|
||||
{ id: "m4", title: "Simetria", tags: ["Equilíbrio"], imageSrc: "http://img.b2bpic.net/free-photo/abstract-shapes-pattern_1017-2490.jpg" }
|
||||
]}
|
||||
title="Deslocamentos Geométricos"
|
||||
description="Explora os quatro movimentos fundamentais que dão vida a padrões matemáticos fascinantes."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Teselação Escher",
|
||||
price: "Arte",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/watercolor-geometric-mosaic-pattern-design_23-2149279975.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Padrão Islâmico",
|
||||
price: "Geometria",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-arabesque-seamless-pattern_23-2149192426.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Hexágonos Modernos",
|
||||
price: "Design",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-web-background-with-bevelled-extruding-hexagons_1048-14430.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Fractais Matemáticos",
|
||||
price: "Complexidade",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-background-with-abstract-purple-blue-laser-lights-great-digital-background_181624-23725.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Mosaicos Romanos",
|
||||
price: "História",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/textured-background_53876-33610.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Arte Digital",
|
||||
price: "Moderna",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/paint-brush-empty-frame-blue-background_23-2148182133.jpg",
|
||||
},
|
||||
]}
|
||||
title="Galeria de Padrões"
|
||||
description="Exemplos artísticos de teselações e padrões geométricos."
|
||||
/>
|
||||
</div>
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Teselação Escher", price: "Arte", imageSrc: "http://img.b2bpic.net/free-vector/watercolor-geometric-mosaic-pattern-design_23-2149279975.jpg" },
|
||||
{ id: "p2", name: "Padrão Islâmico", price: "Geometria", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-arabesque-seamless-pattern_23-2149192426.jpg" },
|
||||
{ id: "p3", name: "Hexágonos Modernos", price: "Design", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-web-background-with-bevelled-extruding-hexagons_1048-14430.jpg" },
|
||||
{ id: "p4", name: "Fractais Matemáticos", price: "Complexidade", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-background-with-abstract-purple-blue-laser-lights-great-digital-background_181624-23725.jpg" },
|
||||
{ id: "p5", name: "Mosaicos Romanos", price: "História", imageSrc: "http://img.b2bpic.net/free-photo/textured-background_53876-33610.jpg" },
|
||||
{ id: "p6", name: "Arte Digital", price: "Moderna", imageSrc: "http://img.b2bpic.net/free-photo/paint-brush-empty-frame-blue-background_23-2148182133.jpg" }
|
||||
]}
|
||||
title="Galeria de Padrões"
|
||||
description="Exemplos artísticos de teselações e padrões geométricos."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="educational" data-section="educational">
|
||||
<BlogCardOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
title="Secção Educativa"
|
||||
description="Curiosidades sobre a geometria no mundo real."
|
||||
blogs={[
|
||||
{
|
||||
id: "b1",
|
||||
category: "Arquitetura",
|
||||
title: "Geometria nos Edifícios",
|
||||
excerpt: "Como os arquitetos usam simetria.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-construction-office-building_1127-2194.jpg",
|
||||
authorName: "Admin",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419444.jpg",
|
||||
date: "2023",
|
||||
},
|
||||
{
|
||||
id: "b2",
|
||||
category: "Jogos",
|
||||
title: "Polígonos em Videogames",
|
||||
excerpt: "A matemática por trás dos gráficos.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pixelated-image_1160-677.jpg",
|
||||
authorName: "Admin",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-studio_23-2149411430.jpg",
|
||||
date: "2023",
|
||||
},
|
||||
{
|
||||
id: "b3",
|
||||
category: "Natureza",
|
||||
title: "Simetria na Natureza",
|
||||
excerpt: "Padrões naturais e perfeição.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/turquoise-purple-orange-paint-textured-design-white-foam_23-2148079258.jpg",
|
||||
authorName: "Admin",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/african-man-glasses-posing-city-with-gently-smile-gorgeous-brunette-black-guy-chilling-outdoor-big-headphones_197531-21898.jpg",
|
||||
date: "2023",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="educational" data-section="educational">
|
||||
<BlogCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
title="Secção Educativa"
|
||||
description="Curiosidades sobre a geometria no mundo real."
|
||||
blogs={[
|
||||
{ id: "b1", category: "Arquitetura", title: "Geometria nos Edifícios", excerpt: "Como os arquitetos usam simetria.", imageSrc: "http://img.b2bpic.net/free-photo/modern-construction-office-building_1127-2194.jpg", authorName: "Admin", authorAvatar: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419444.jpg", date: "2023" },
|
||||
{ id: "b2", category: "Jogos", title: "Polígonos em Videogames", excerpt: "A matemática por trás dos gráficos.", imageSrc: "http://img.b2bpic.net/free-photo/pixelated-image_1160-677.jpg", authorName: "Admin", authorAvatar: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-studio_23-2149411430.jpg", date: "2023" },
|
||||
{ id: "b3", category: "Natureza", title: "Simetria na Natureza", excerpt: "Padrões naturais e perfeição.", imageSrc: "http://img.b2bpic.net/free-photo/turquoise-purple-orange-paint-textured-design-white-foam_23-2148079258.jpg", authorName: "Admin", authorAvatar: "http://img.b2bpic.net/free-photo/african-man-glasses-posing-city-with-gently-smile-gorgeous-brunette-black-guy-chilling-outdoor-big-headphones_197531-21898.jpg", date: "2023" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "O que é teselação?",
|
||||
content: "É a cobertura de um plano com formas geométricas.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Como funciona a reflexão?",
|
||||
content: "É um efeito espelho em relação a um eixo.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Onde posso aplicar?",
|
||||
content: "Design, arquitetura, videojogos e arte.",
|
||||
},
|
||||
]}
|
||||
title="Perguntas Frequentes"
|
||||
description="Tira as tuas dúvidas sobre geometria e arte."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "O que é teselação?", content: "É a cobertura de um plano com formas geométricas." },
|
||||
{ id: "q2", title: "Como funciona a reflexão?", content: "É um efeito espelho em relação a um eixo." },
|
||||
{ id: "q3", title: "Onde posso aplicar?", content: "Design, arquitetura, videojogos e arte." }
|
||||
]}
|
||||
title="Perguntas Frequentes"
|
||||
description="Tira as tuas dúvidas sobre geometria e arte."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="interactive" data-section="interactive">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Cria o teu Padrão"
|
||||
description="Experimenta os controlos e gera o teu design geométrico em tempo real."
|
||||
inputs={[
|
||||
{
|
||||
name: "nome",
|
||||
type: "text",
|
||||
placeholder: "Nome do autor",
|
||||
},
|
||||
{
|
||||
name: "forma",
|
||||
type: "text",
|
||||
placeholder: "Triângulo, Quadrado...",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-art-studio-with-nobody-it-is-ready-drawing-lesson-art-studio-modern-atelier-with-vase-chair-using-imagination-professional-sketch-tools-table-concept-creativity_482257-30103.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="interactive" data-section="interactive">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Cria o teu Padrão"
|
||||
description="Experimenta os controlos e gera o teu design geométrico em tempo real."
|
||||
inputs={[
|
||||
{ name: "nome", type: "text", placeholder: "Nome do autor" },
|
||||
{ name: "forma", type: "text", placeholder: "Triângulo, Quadrado..." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-art-studio-with-nobody-it-is-ready-drawing-lesson-art-studio-modern-atelier-with-vase-chair-using-imagination-professional-sketch-tools-table-concept-creativity_482257-30103.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Links Rápidos",
|
||||
items: [
|
||||
{
|
||||
label: "Início",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "Galeria",
|
||||
href: "#gallery",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Recursos",
|
||||
items: [
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#educational",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Geometria na Arte"
|
||||
bottomRightText="A geometria transforma a matemática em arte."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Links Rápidos", items: [{ label: "Início", href: "#hero" }, { label: "Galeria", href: "#gallery" }]
|
||||
},
|
||||
{
|
||||
title: "Recursos", items: [{ label: "Blog", href: "#educational" }, { label: "FAQ", href: "#faq" }]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2024 Geometria na Arte"
|
||||
bottomRightText="A geometria transforma a matemática em arte."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user