0xmetaschool/
TriviaQuizGPT
TriviaGPT makes creating and playing quizzes easier than ever. Instead of spending hours writing questions, this app creates fun, custom quizzes in seconds. It's like having a smart friend who knows how to make learning feel like a game - quick, fun, and perfect for everyone. Built with Next.js and powered by XAI, this template lets you build a trivia app that everyone will enjoy playing as more people want fun ways to learn.
Readme
Source Codeapp
api
dashboard
globals.css
layout.js
page.js
components
lib
.gitignore
components.json
jsconfig.json
LICENSE
middleware.js
next.config.mjs
package.json
postcss.config.mjs
README.md
tailwind.config.js
app
page.js
page.jspage.js
1import Header from "./dashboard/_components/Header";
2
3// Component to display a feature with a title and text
4const Feature = ({ title, text }) => (
5 <div className="flex flex-col items-center space-y-3">
6 <p className="font-bold text-lg text-black">{title}</p>
7 <p className="text-center text-gray-600">{text}</p>
8 </div>
9);
10
11// Component to wrap pricing plans, with optional "Recommended" badge
12const PriceWrapper = ({ children, isRecommended = false }) => (
13 <div className={`relative p-8 shadow-${isRecommended ? "2xl" : "lg"} border border-${isRecommended ? "black" : "gray-200"} rounded-xl bg-white flex flex-col justify-between h-[450px] transform-${isRecommended ? "scale-105" : "none"} z-${isRecommended ? 1 : 0}`}>
14 {isRecommended && (
15 <div className="absolute top-[-16px] left-1/2 transform-translate-x-[-50%] px-3 py-1 bg-black text-white font-bold text-sm rounded-full">
16 Recommended
17 </div>
18 )}
19 {children}
20 </div>
21);
22
23// Main Home component
24export default function Home() {
25 return (
26 <div className="relative flex flex-col justify-between min-h-screen overflow-hidden">
27 <Header />
28
29 {/* Add spacing above the Hero Section */}
30 <div className="mt-32"></div>
31
32 {/* Hero Section */}
33 <section className="flex flex-1 items-center justify-center z-50 py-16">
34 <div className="text-center max-w-screen-lg px-4">
35 <h1 className="mb-4 text-3xl md:text-5xl lg:text-6xl font-extrabold tracking-tight leading-tight text-gray-900 dark:text-white">
36 Create Fun and Engaging Trivia Quizzes Instantly
37 </h1>
38
39 <p className="mb-8 text-lg md:text-xl text-gray-500 dark:text-gray-400">
40 Dive into the excitement of trivia with AI-powered, customizable quiz questions.
41 </p>
42 <div className="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
43 <a href="/dashboard" className="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-white rounded-lg bg-black hover:bg-gray-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900">
44 Start Your Quiz Journey
45 </a>
46 </div>
47 <div className="mt-8"></div>
48 </div>
49 </section>
50
51 {/* Features Section */}
52 <section className="bg-gray-50 py-20">
53 <div className="container mx-auto text-center">
54 <div className="space-y-10">
55 <h2 className="text-3xl font-bold text-black">Our Features</h2>
56 <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
57 <Feature title="Customizable Quiz Topics" text="Choose or create quiz topics tailored to your interests." />
58 <Feature title="AI-Powered Question Generation" text="Generate unique and challenging questions for every quiz." />
59 <Feature title="Interactive Gameplay" text="Engage users with fun and competitive quiz experiences." />
60 </div>
61 </div>
62 </div>
63 </section>
64
65 {/* Pricing Section */}
66 <section className="py-20">
67 <div className="container mx-auto text-center">
68 <div className="space-y-12">
69 <h2 className="text-3xl font-bold text-black">Pricing Plans</h2>
70 <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
71 <PriceWrapper>
72 <div className="space-y-2">
73 <p className="text-2xl font-semibold text-black">Basic</p>
74 <h3 className="text-3xl font-bold text-black">$0</h3>
75 <p className="text-lg text-gray-500">per month</p>
76 <div className="space-y-4 mt-4 text-left">
77 <p className="text-gray-600">Limited quiz topics</p>
78 <p className="text-gray-600">Basic question generation</p>
79 <p className="text-gray-600">Single-player mode only</p>
80 </div>
81 </div>
82 </PriceWrapper>
83 <PriceWrapper isRecommended={true}>
84 <div className="space-y-2">
85 <p className="text-2xl font-semibold text-black">Pro</p>
86 <h3 className="text-3xl font-bold text-black">$9.99</h3>
87 <p className="text-lg text-gray-500">per month</p>
88 <div className="space-y-4 mt-4 text-left">
89 <p className="text-gray-600">Multiple quiz topics</p>
90 <p className="text-gray-600">Advanced question generation</p>
91 <p className="text-gray-600">Single and multiplayer modes</p>
92 </div>
93 </div>
94 </PriceWrapper>
95 <PriceWrapper>
96 <div className="space-y-2">
97 <p className="text-2xl font-semibold text-black">Enterprise</p>
98 <h3 className="text-3xl font-bold text-black">Custom</h3>
99 <p className="text-lg text-gray-500">per month</p>
100 <div className="space-y-4 mt-4 text-left">
101 <p className="text-gray-600">Unlimited quiz topics</p>
102 <p className="text-gray-600">Full custom question generation</p>
103 <p className="text-gray-600">Advanced multiplayer and team play</p>
104 </div>
105 </div>
106 </PriceWrapper>
107 </div>
108 </div>
109 </div>
110 </section>
111
112 {/* Call to Action */}
113 <section className="bg-gray-50 py-20 text-black">
114 <div className="container mx-auto text-center">
115 <h2 className="text-3xl mb-6 font-bold">Challenge Your Knowledge Today!</h2>
116 <p className="text-xl mb-8 text-gray-600">Start creating interactive quizzes and test your knowledge with Trivia Quiz GPT.</p>
117 <div className="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
118 <a href="/dashboard" className="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-white rounded-lg bg-black hover:bg-gray-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900">
119 Start Quiz Now
120 </a>
121 </div>
122 </div>
123 </section>
124 </div>
125 );
126}
127Downloads
0
Version
1.0.0
License
MIT
Platform
Grok-beta API
Contributors 3
Open in
Last updated 4 months ago
We are a open source platform and encourage community to contribute to these templates!