Update src/app/quizzes/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -28,14 +28,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Quizzes",
-          id: "/quizzes",
-        },
+        { name: "Home", id: "#hero" },
+        { name: "Sobre", id: "#about" },
+        { name: "Personagens", id: "#characters" },
+        { name: "Quizzes", id: "/quizzes" },
       ]}
       brandName="Beacon Hills Hub"
     />
@@ -46,40 +42,16 @@ export default function LandingPage() {
       logoText="Teen Wolf"
       description="Bem-vindo ao centro oficial de fãs de Beacon Hills. Explore a história, os segredos e teste seus conhecimentos."
       buttons={[
-        {
-          text: "Explorar Agora",
-          href: "#about",
-        },
-        {
-          text: "Ver Quizzes",
-          href: "/quizzes",
-        },
+        { text: "Explorar Agora", href: "#about" },
+        { text: "Ver Quizzes", href: "/quizzes" },
       ]}
       slides={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/school-scene-with-queer-teens_23-2150379384.jpg",
-          imageAlt: "Scott McCall",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/emo-girl-home-side-view_23-2149645109.jpg",
-          imageAlt: "Stiles Stilinski",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-brown-hijab_155996-40.jpg",
-          imageAlt: "Lydia Martin",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/cute-dog-with-nature-background_23-2150687279.jpg",
-          imageAlt: "Derek Hale",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-view-white-building-middle-trees-forest-cloudy-sky_181624-27439.jpg",
-          imageAlt: "Beacon Hills",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-with-plastic-foil_23-2148864922.jpg",
-          imageAlt: "Werewolf transformation",
-        },
+        { imageSrc: "http://img.b2bpic.net/free-photo/school-scene-with-queer-teens_23-2150379384.jpg", imageAlt: "Scott McCall" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/emo-girl-home-side-view_23-2149645109.jpg", imageAlt: "Stiles Stilinski" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-brown-hijab_155996-40.jpg", imageAlt: "Lydia Martin" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/cute-dog-with-nature-background_23-2150687279.jpg", imageAlt: "Derek Hale" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-view-white-building-middle-trees-forest-cloudy-sky_181624-27439.jpg", imageAlt: "Beacon Hills" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-with-plastic-foil_23-2148864922.jpg", imageAlt: "Werewolf transformation" },
       ]}
     />
   </div>
@@ -88,15 +60,8 @@ export default function LandingPage() {
       <InlineImageSplitTextAbout
       useInvertedBackground={false}
       heading={[
-        {
-          type: "text",
-          content: "A Lenda de Beacon Hills",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/black-skulls-laid-near-blank-sheet_23-2147908667.jpg",
-          alt: "Logo Teen Wolf",
-        },
+        { type: "text", content: "A Lenda de Beacon Hills" },
+        { type: "image", src: "http://img.b2bpic.net/free-photo/black-skulls-laid-near-blank-sheet_23-2147908667.jpg", alt: "Logo Teen Wolf" },
       ]}
     />
   </div>
@@ -107,30 +72,10 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       team={[
-        {
-          id: "1",
-          name: "Scott McCall",
-          role: "True Alpha",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f7lnyu",
-        },
-        {
-          id: "2",
-          name: "Stiles Stilinski",
-          role: "Investigator",
-          imageSrc: "http://img.b2bpic.net/free-photo/teen-blond-male-with-hand-near-head-casual-shirt-looking-thoughtful-front-view_176474-109671.jpg",
-        },
-        {
-          id: "3",
-          name: "Lydia Martin",
-          role: "Banshee",
-          imageSrc: "http://img.b2bpic.net/free-photo/sensual-blond-female-with-blue-eyes-white-clothes_613910-14966.jpg",
-        },
-        {
-          id: "4",
-          name: "Derek Hale",
-          role: "Hale Legacy",
-          imageSrc: "http://img.b2bpic.net/free-photo/hawaii-illustration-retro-comic-style_23-2151771099.jpg",
-        },
+        { id: "1", name: "Scott McCall", role: "True Alpha", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f7lnyu" },
+        { id: "2", name: "Stiles Stilinski", role: "Investigator", imageSrc: "http://img.b2bpic.net/free-photo/teen-blond-male-with-hand-near-head-casual-shirt-looking-thoughtful-front-view_176474-109671.jpg" },
+        { id: "3", name: "Lydia Martin", role: "Banshee", imageSrc: "http://img.b2bpic.net/free-photo/sensual-blond-female-with-blue-eyes-white-clothes_613910-14966.jpg" },
+        { id: "4", name: "Derek Hale", role: "Hale Legacy", imageSrc: "http://img.b2bpic.net/free-photo/hawaii-illustration-retro-comic-style_23-2151771099.jpg" },
       ]}
       title="Personagens Principais"
       description="Conheça os lobisomens, banshees e caçadores que moldaram a série."
@@ -142,21 +87,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "1",
-          title: "Onde foi filmado?",
-          content: "A série foi filmada majoritariamente na Geórgia.",
-        },
-        {
-          id: "2",
-          title: "Quantas temporadas?",
-          content: "Teen Wolf teve um total de 6 temporadas.",
-        },
-        {
-          id: "3",
-          title: "Quem é o criador?",
-          content: "Jeff Davis criou a série baseada no filme de 1985.",
-        },
+        { id: "1", title: "Onde foi filmado?", content: "A série foi filmada majoritariamente na Geórgia." },
+        { id: "2", title: "Quantas temporadas?", content: "Teen Wolf teve um total de 6 temporadas." },
+        { id: "3", title: "Quem é o criador?", content: "Jeff Davis criou a série baseada no filme de 1985." },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/haunted-house-gothic-style_23-2151626675.jpg"
       mediaAnimation="opacity"
@@ -175,31 +108,11 @@ export default function LandingPage() {
       title="Impacto em Beacon Hills"
       description="Alguns números sobre a nossa jornada sobrenatural."
       metrics={[
-        {
-          id: "1",
-          value: "6",
-          description: "Temporadas de puro suspense",
-        },
-        {
-          id: "2",
-          value: "100+",
-          description: "Episódios inesquecíveis",
-        },
-        {
-          id: "3",
-          value: "15k+",
-          description: "Fãs ativos na comunidade",
-        },
-        {
-          id: "4",
-          value: "10+",
-          description: "Quizzes disponíveis",
-        },
-        {
-          id: "5",
-          value: "4",
-          description: "Principais clãs sobrenaturais",
-        },
+        { id: "1", value: "6", description: "Temporadas de puro suspense" },
+        { id: "2", value: "100+", description: "Episódios inesquecíveis" },
+        { id: "3", value: "15k+", description: "Fãs ativos na comunidade" },
+        { id: "4", value: "10+", description: "Quizzes disponíveis" },
+        { id: "5", value: "4", description: "Principais clãs sobrenaturais" },
       ]}
     />
   </div>
@@ -213,4 +126,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/quizzes/page.tsx

@@ -2,12 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
-import FooterCard from '@/components/sections/footer/FooterCard';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterCard from '@/components/sections/footer/FooterCard';
 
-export default function LandingPage() {
+export default function QuizzesPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="expand-hover"
@@ -22,116 +20,43 @@ export default function LandingPage() {
         headingFontWeight="medium"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Quizzes",
-          id: "/quizzes",
-        },
-      ]}
-      brandName="Beacon Hills Hub"
-    />
-  </div>
+        <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Quizzes", id: "/quizzes" },
+            ]}
+            brandName="Beacon Hills Hub"
+        />
+        
+        <main className="container mx-auto px-4 py-20 flex gap-12">
+          <aside className="w-64 hidden md:block">
+            <nav className="sticky top-24 space-y-4">
+              <h2 className="text-xl font-bold mb-4">Categorias</h2>
+              <ul className="space-y-2">
+                <li><a href="#" className="hover:text-primary">Personagens</a></li>
+                <li><a href="#" className="hover:text-primary">História</a></li>
+                <li><a href="#" className="hover:text-primary">Criaturas</a></li>
+              </ul>
+            </nav>
+          </aside>
 
-  <div id="quiz-main" data-section="quiz-main">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "animated-grid",
-      }}
-      tag="Modo Interativo"
-      title="Quiz: Quanto você sabe?"
-      description="Selecione um quiz abaixo para começar sua jornada."
-    />
-  </div>
+          <div className="flex-1">
+            <h1 className="text-4xl font-bold mb-8">Quizzes de Beacon Hills</h1>
+            <div className="grid gap-6">
+               {/* Quiz Placeholder */}
+               <div className="p-8 border border-white/10 rounded-2xl bg-white/5">
+                 <h3 className="text-2xl font-bold mb-2">Quanto você sabe sobre o Scott?</h3>
+                 <p className="text-muted-foreground mb-4">Teste seus conhecimentos sobre o True Alpha.</p>
+                 <button className="px-6 py-2 rounded-full bg-primary text-white font-medium">Iniciar Quiz</button>
+               </div>
+            </div>
+          </div>
+        </main>
 
-  <div id="quiz-list" data-section="quiz-list">
-      <FeatureCardNineteen
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          tag: "Fácil",
-          title: "Scott McCall",
-          subtitle: "Iniciantes",
-          description: "Teste seu conhecimento básico sobre o protagonista.",
-          imageSrc: "http://img.b2bpic.net/free-photo/leather-craft-tools-wooden-background-leather-craftmans-work-desk_8353-6073.jpg?_wi=1",
-        },
-        {
-          tag: "Médio",
-          title: "Lendas de Beacon Hills",
-          subtitle: "Intermediário",
-          description: "História detalhada sobre os seres sobrenaturais.",
-          imageSrc: "http://img.b2bpic.net/free-vector/esoteric-elements-pack_23-2148564361.jpg?_wi=1",
-        },
-        {
-          tag: "Difícil",
-          title: "Mistérios de Stiles",
-          subtitle: "Avançado",
-          description: "Perguntas complexas sobre os casos do Stiles.",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-vintage-suitcase-with-map-magnifying-glass_23-2148610432.jpg?_wi=1",
-        },
-      ]}
-      title="Nossos Quizzes"
-      description="Escolha um tema e mostre que você é um especialista."
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      title="Quiz: Quanto você sabe?"
-      description="Selecione um quiz abaixo para começar sua jornada."
-      tag="Modo Interativo"
-    />
-  </div>
-
-  <div id="feature" data-section="feature">
-      <FeatureCardNineteen
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Nossos Quizzes"
-      description="Escolha um tema e mostre que você é um especialista."
-      features={[
-        {
-          tag: "Fácil",
-          title: "Scott McCall",
-          subtitle: "Iniciantes",
-          description: "Teste seu conhecimento básico sobre o protagonista.",
-          imageSrc: "http://img.b2bpic.net/free-photo/leather-craft-tools-wooden-background-leather-craftmans-work-desk_8353-6073.jpg?_wi=2",
-        },
-        {
-          tag: "Médio",
-          title: "Lendas de Beacon Hills",
-          subtitle: "Intermediário",
-          description: "História detalhada sobre os seres sobrenaturais.",
-          imageSrc: "http://img.b2bpic.net/free-vector/esoteric-elements-pack_23-2148564361.jpg?_wi=2",
-        },
-        {
-          tag: "Difícil",
-          title: "Mistérios de Stiles",
-          subtitle: "Avançado",
-          description: "Perguntas complexas sobre os casos do Stiles.",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-vintage-suitcase-with-map-magnifying-glass_23-2148610432.jpg?_wi=2",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="Beacon Hills Hub"
-      copyrightText="© 2025 | Fã-site não oficial"
-    />
-  </div>
+        <FooterCard
+            logoText="Beacon Hills Hub"
+            copyrightText="© 2025 | Fã-site não oficial"
+        />
       </ReactLenis>
     </ThemeProvider>
   );