Merge version_1 into main #2
228
src/app/page.tsx
228
src/app/page.tsx
@@ -9,7 +9,7 @@ import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonia
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import { Box, Code, Layout, Smartphone } from "lucide-react";
|
||||
import { Box, Code, Layout, LayoutGrid, Smartphone } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -30,126 +30,70 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Practice",
|
||||
id: "#practice",
|
||||
},
|
||||
name: "Practice", id: "#practice"},
|
||||
{
|
||||
name: "Leaderboard",
|
||||
id: "#leaderboard",
|
||||
},
|
||||
name: "Leaderboard", id: "#leaderboard"},
|
||||
{
|
||||
name: "Profile",
|
||||
id: "#profile",
|
||||
},
|
||||
name: "Profile", id: "#profile"},
|
||||
]}
|
||||
brandName="CodeQuest"
|
||||
button={{
|
||||
text: "Sign In",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Sign In", href: "#"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Level Up Your Coding Game"
|
||||
description="Master HTML & CSS through interactive challenges, compete on global leaderboards, and build your developer portfolio daily."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex R.",
|
||||
handle: "@alexcode",
|
||||
testimonial: "This platform turned my messy CSS into clean, professional code.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/programming-background-concept_23-2150170158.jpg?_wi=1",
|
||||
imageAlt: "neon coding dashboard dark theme",
|
||||
},
|
||||
name: "Alex R.", handle: "@alexcode", testimonial: "This platform turned my messy CSS into clean, professional code.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/programming-background-concept_23-2150170158.jpg", imageAlt: "neon coding dashboard dark theme"},
|
||||
{
|
||||
name: "Sarah K.",
|
||||
handle: "@sarahdev",
|
||||
testimonial: "The gamification keeps me coming back every single day.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ai-site-helping-with-software-production_1268-21621.jpg?_wi=1",
|
||||
imageAlt: "code editor ui neon design",
|
||||
},
|
||||
name: "Sarah K.", handle: "@sarahdev", testimonial: "The gamification keeps me coming back every single day.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ai-site-helping-with-software-production_1268-21621.jpg", imageAlt: "code editor ui neon design"},
|
||||
{
|
||||
name: "Mike J.",
|
||||
handle: "@mikejs",
|
||||
testimonial: "Best way to prep for frontend interviews.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-video-game-set-elements_23-2150318168.jpg?_wi=1",
|
||||
imageAlt: "progress bar interface neon",
|
||||
},
|
||||
name: "Mike J.", handle: "@mikejs", testimonial: "Best way to prep for frontend interviews.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-video-game-set-elements_23-2150318168.jpg", imageAlt: "progress bar interface neon"},
|
||||
{
|
||||
name: "Chen W.",
|
||||
handle: "@chencodes",
|
||||
testimonial: "The AI feedback is remarkably accurate.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/leaderboard-with-abstract-background_23-2148762941.jpg",
|
||||
imageAlt: "gamified leaderboard ui design",
|
||||
},
|
||||
name: "Chen W.", handle: "@chencodes", testimonial: "The AI feedback is remarkably accurate.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/leaderboard-with-abstract-background_23-2148762941.jpg", imageAlt: "gamified leaderboard ui design"},
|
||||
{
|
||||
name: "Elena P.",
|
||||
handle: "@elenap",
|
||||
testimonial: "I earned my CSS Master badge in record time!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-business-man_1303-19609.jpg?_wi=1",
|
||||
imageAlt: "young developer portrait professional",
|
||||
},
|
||||
name: "Elena P.", handle: "@elenap", testimonial: "I earned my CSS Master badge in record time!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-business-man_1303-19609.jpg", imageAlt: "young developer portrait professional"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Practice",
|
||||
href: "#practice",
|
||||
},
|
||||
text: "Start Practice", href: "#practice"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/programming-background-concept_23-2150170158.jpg?_wi=2"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/programming-background-concept_23-2150170158.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-handsome-business-man_1303-19609.jpg",
|
||||
alt: "User 1",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-handsome-business-man_1303-19609.jpg", alt: "User 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-smiley-man-library_23-2149204750.jpg",
|
||||
alt: "User 2",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-smiley-man-library_23-2149204750.jpg", alt: "User 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-tablet_23-2149442286.jpg",
|
||||
alt: "User 3",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-tablet_23-2149442286.jpg", alt: "User 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-64533.jpg",
|
||||
alt: "User 4",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-64533.jpg", alt: "User 4"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-with-glasses-holding-tablet_23-2148422238.jpg",
|
||||
alt: "User 5",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/man-with-glasses-holding-tablet_23-2148422238.jpg", alt: "User 5"},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "HTML5",
|
||||
},
|
||||
type: "text", text: "HTML5"},
|
||||
{
|
||||
type: "text",
|
||||
text: "CSS3",
|
||||
},
|
||||
type: "text", text: "CSS3"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Flexbox",
|
||||
},
|
||||
type: "text", text: "Flexbox"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Grid",
|
||||
},
|
||||
type: "text", text: "Grid"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Responsive",
|
||||
},
|
||||
type: "text", text: "Responsive"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -161,52 +105,36 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "HTML Fundamentals",
|
||||
description: "Master semantic structures and document object models.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ai-site-helping-with-software-production_1268-21621.jpg?_wi=2",
|
||||
},
|
||||
title: "HTML Fundamentals", description: "Master semantic structures and document object models.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ai-site-helping-with-software-production_1268-21621.jpg"},
|
||||
items: [
|
||||
{
|
||||
icon: Code,
|
||||
text: "Semantic Tags",
|
||||
},
|
||||
text: "Semantic Tags"},
|
||||
{
|
||||
icon: Layout,
|
||||
text: "Structure",
|
||||
},
|
||||
text: "Structure"},
|
||||
{
|
||||
icon: Box,
|
||||
text: "Forms",
|
||||
},
|
||||
text: "Forms"},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-library_23-2149204750.jpg?_wi=1",
|
||||
imageAlt: "tech student portrait studio",
|
||||
},
|
||||
{
|
||||
title: "CSS Layout Mastery",
|
||||
description: "Flexbox, Grid, and responsive design techniques.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-video-game-set-elements_23-2150318168.jpg?_wi=2",
|
||||
},
|
||||
title: "CSS Layout Mastery", description: "Flexbox, Grid, and responsive design techniques.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-video-game-set-elements_23-2150318168.jpg"},
|
||||
items: [
|
||||
{
|
||||
icon: LayoutGrid,
|
||||
text: "CSS Grid",
|
||||
},
|
||||
text: "CSS Grid"},
|
||||
{
|
||||
icon: Box,
|
||||
text: "Flexbox",
|
||||
},
|
||||
text: "Flexbox"},
|
||||
{
|
||||
icon: Smartphone,
|
||||
text: "Responsive",
|
||||
},
|
||||
text: "Responsive"},
|
||||
],
|
||||
reverse: true,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-tablet_23-2149442286.jpg?_wi=1",
|
||||
imageAlt: "female developer professional portrait",
|
||||
},
|
||||
]}
|
||||
title="Practice Your Way"
|
||||
@@ -221,34 +149,16 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "12,450",
|
||||
title: "Total Points Earned",
|
||||
items: [
|
||||
"Easy (10pts)",
|
||||
"Medium (20pts)",
|
||||
"Hard (50pts)",
|
||||
],
|
||||
id: "m1", value: "12,450", title: "Total Points Earned", items: [
|
||||
"Easy (10pts)", "Medium (20pts)", "Hard (50pts)"],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "48",
|
||||
title: "Challenges Solved",
|
||||
items: [
|
||||
"HTML",
|
||||
"CSS",
|
||||
"Responsive",
|
||||
],
|
||||
id: "m2", value: "48", title: "Challenges Solved", items: [
|
||||
"HTML", "CSS", "Responsive"],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "98%",
|
||||
title: "Accuracy Rate",
|
||||
items: [
|
||||
"Real-time",
|
||||
"AI Verified",
|
||||
"High",
|
||||
],
|
||||
id: "m3", value: "98%", title: "Accuracy Rate", items: [
|
||||
"Real-time", "AI Verified", "High"],
|
||||
},
|
||||
]}
|
||||
title="Compete and Rise"
|
||||
@@ -261,30 +171,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex R.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-business-man_1303-19609.jpg?_wi=2",
|
||||
},
|
||||
id: "t1", name: "Alex R.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-business-man_1303-19609.jpg"},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Sarah K.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-library_23-2149204750.jpg?_wi=2",
|
||||
},
|
||||
id: "t2", name: "Sarah K.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-library_23-2149204750.jpg"},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Mike J.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-tablet_23-2149442286.jpg?_wi=2",
|
||||
},
|
||||
id: "t3", name: "Mike J.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-tablet_23-2149442286.jpg"},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Chen W.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-64533.jpg",
|
||||
},
|
||||
id: "t4", name: "Chen W.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-64533.jpg"},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Elena P.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-with-glasses-holding-tablet_23-2148422238.jpg",
|
||||
},
|
||||
id: "t5", name: "Elena P.", imageSrc: "http://img.b2bpic.net/free-photo/man-with-glasses-holding-tablet_23-2148422238.jpg"},
|
||||
]}
|
||||
cardTitle="Success Stories"
|
||||
cardTag="Verified Learners"
|
||||
@@ -296,8 +191,7 @@ export default function LandingPage() {
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
tag="Join Us"
|
||||
title="Start Your Journey Today"
|
||||
description="Join our community of developers and start practicing now."
|
||||
@@ -309,29 +203,19 @@ export default function LandingPage() {
|
||||
logoText="CodeQuest"
|
||||
columns={[
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
title: "Platform", items: [
|
||||
{
|
||||
label: "Practice",
|
||||
href: "#practice",
|
||||
},
|
||||
label: "Practice", href: "#practice"},
|
||||
{
|
||||
label: "Leaderboard",
|
||||
href: "#leaderboard",
|
||||
},
|
||||
label: "Leaderboard", href: "#leaderboard"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
title: "Support", items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#",
|
||||
},
|
||||
label: "FAQ", href: "#"},
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user