264 lines
15 KiB
TypeScript
264 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
|
|
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
|
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Code, Github, HelpCircle, MessageCircle, Mail, Gamepad2 } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="large"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Nesquik"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Projects", id: "projects" },
|
|
{ name: "Communities", id: "communities" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
button={{
|
|
text: "Get In Touch", href: "#contact"}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboardSplit
|
|
logoText="NESQUIK"
|
|
description="Full Stack Developer specializing in Minecraft ecosystems, Discord automation, and community building. Crafting innovative plugins, powerful bots, stunning designs, and engaging video content for gaming communities."
|
|
background={{ variant: "radial-gradient" }}
|
|
buttons={[
|
|
{ text: "View My Projects", href: "#projects" },
|
|
{ text: "Contact Me", href: "#contact" },
|
|
]}
|
|
layoutOrder="default"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-professional-portrait-of-a-young-devel-1772487012204-55303d38.png"
|
|
imageAlt="Nesquik Developer at workspace"
|
|
frameStyle="browser"
|
|
buttonAnimation="slide-up"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "Developing the future of" },
|
|
{
|
|
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-minecraft-server-interface-showcasing--1772487013341-8bae369b.png", alt: "Minecraft Plugin System"},
|
|
{ type: "text", content: "gaming communities" },
|
|
]}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{
|
|
text: "Learn More", href: "https://github.com/NesquikDeveloper"},
|
|
{ text: "Discord Server", href: "#contact" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<FeatureCardTwentyOne
|
|
title="My Expertise & Services"
|
|
description="A comprehensive range of technical solutions tailored for Minecraft servers, Discord communities, and digital presence building."
|
|
tag="Skills"
|
|
tagIcon={Code}
|
|
tagAnimation="slide-up"
|
|
accordionItems={[
|
|
{
|
|
id: "1", title: "Minecraft Plugin Development", content:
|
|
"Custom Spigot/Paper plugins with advanced mechanics, config systems, and performance optimization. Specializing in survival server enhancements, economy systems, and gameplay features."},
|
|
{
|
|
id: "2", title: "Discord Bot Development", content:
|
|
"Full-featured Discord bots with command handling, event systems, database integration, and community management tools. Built with discord.py and node.js."},
|
|
{
|
|
id: "3", title: "Web Development", content:
|
|
"Modern responsive websites and landing pages using HTML, CSS, JavaScript. Server dashboards, community websites, and custom web applications."},
|
|
{
|
|
id: "4", title: "Branding & Design", content:
|
|
"Complete visual identity design including logos, banners, server artwork, and brand guidelines. Professional design for gaming communities and creators."},
|
|
{
|
|
id: "5", title: "Video Production & Editing", content:
|
|
"High-quality YouTube Shorts, TikTok content, and server trailers. Professional editing, motion graphics, and community-focused video content creation."},
|
|
{
|
|
id: "6", title: "Community Management", content:
|
|
"Full community administration, server setup and configuration, staff training, and player engagement strategies for gaming communities."},
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-modern-discord-bot-interface-showing-i-1772487012856-52cf0499.png?_wi=1"
|
|
imageAlt="Discord Bot Dashboard"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
mediaPosition="right"
|
|
buttons={[{ text: "View Projects", href: "#projects" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="projectShowcase" data-section="projectShowcase">
|
|
<ProductCardFour
|
|
title="Featured Projects"
|
|
description="A selection of my most impactful work across different technologies and platforms"
|
|
tag="Portfolio"
|
|
tagIcon={Github}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", name: "ServerManager Pro", price: "Java", variant: "Spigot Plugin | 2023-2024", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-minecraft-server-interface-showcasing--1772487013341-8bae369b.png", imageAlt: "ServerManager Pro Plugin"},
|
|
{
|
|
id: "2", name: "CommunityBot", price: "Python", variant: "Discord Bot | 2023-2024", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-modern-discord-bot-interface-showing-i-1772487012856-52cf0499.png?_wi=2", imageAlt: "CommunityBot Dashboard"},
|
|
{
|
|
id: "3", name: "Portfolio Website", price: "JavaScript", variant: "React/Next.js | 2024", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-responsive-web-design-showcase-featuri-1772487012232-50d55bd0.png", imageAlt: "Portfolio Website"},
|
|
{
|
|
id: "4", name: "Content Creator Suite", price: "Multimedia", variant: "Video & Design | 2023-2024", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-professional-video-production-and-edit-1772487012973-d7f19ef6.png", imageAlt: "Video Production Setup"},
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="communities" data-section="communities">
|
|
<TestimonialCardThirteen
|
|
title="Communities I Lead"
|
|
description="Building and managing thriving gaming communities with thousands of active members"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
showRating={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Slice Network", handle: "@slicenetwork", testimonial:
|
|
"A premier Minecraft server network bringing together competitive gameplay with community-driven content creation. Home to hundreds of active players.", rating: 5,
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/professional-banner-for-slice-network-ga-1772487012136-b8ce422d.png", imageAlt: "Slice Network Community"},
|
|
{
|
|
id: "2", name: "Wins MC", handle: "@winsmc", testimonial:
|
|
"Championship-focused Minecraft server emphasizing player skill development and competitive integrity. Building the next generation of gaming talent.", rating: 5,
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/professional-banner-for-wins-mc-minecraf-1772487012305-0fe7596d.png", imageAlt: "Wins MC Community"},
|
|
{
|
|
id: "3", name: "Creator Collective", handle: "@nesquik_dev", testimonial:
|
|
"A collaborative space where developers, designers, and content creators unite to build innovative gaming experiences and content.", rating: 5,
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-vibrant-minecraft-server-landscape-sho-1772487013677-1660e214.png", imageAlt: "Creator Collective"},
|
|
{
|
|
id: "4", name: "Developer Network", handle: "@dev_network", testimonial:
|
|
"An open community for aspiring and experienced developers learning Minecraft modding, bot development, and game architecture.", rating: 5,
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-github-repository-interface-showing-mu-1772487012090-ee4968a3.png", imageAlt: "Developer Network"},
|
|
]}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialProof" data-section="socialProof">
|
|
<SocialProofOne
|
|
title="Client Testimonials"
|
|
description="Trusted by server owners, creators, and community leaders worldwide"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tagAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
names={[
|
|
"Enterprise Servers", "Creator Studios", "Gaming Guilds", "Esports Teams", "Dev Studios", "Content Networks", "Community Hubs"]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Common questions about my services, expertise, and collaboration opportunities"
|
|
tag="Help"
|
|
tagIcon={HelpCircle}
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What technologies do you specialize in?", content:
|
|
"I work extensively with Java (Minecraft plugins), Python (Discord bots), JavaScript/Node.js, HTML/CSS, and multimedia tools. I'm constantly learning new frameworks and technologies to provide cutting-edge solutions."},
|
|
{
|
|
id: "2", title: "How long does a typical project take?", content:
|
|
"Timeline depends on project scope. Simple plugins: 1-2 weeks. Bot development: 2-4 weeks. Web projects: 3-6 weeks. Community setup: 1-2 weeks. Custom projects receive detailed estimation after consultation."},
|
|
{
|
|
id: "3", title: "Do you offer ongoing support and maintenance?", content:
|
|
"Yes! I provide comprehensive support packages including bug fixes, feature updates, performance optimization, and security patches. Custom maintenance plans available for long-term projects."},
|
|
{
|
|
id: "4", title: "Can you help build a gaming community from scratch?", content:
|
|
"Absolutely. I provide full-stack community building including server setup, bot configuration, branding, website development, and community management strategies. Let's discuss your vision."},
|
|
{
|
|
id: "5", title: "What's your pricing model?", content:
|
|
"Flexible pricing based on project scope. I offer hourly rates ($50-150/hr), fixed-price packages, and equity arrangements for ambitious projects. Get in touch for a custom quote."},
|
|
{
|
|
id: "6", title: "How do I get started with a project?", content:
|
|
"Simple! Contact me via Discord or email with your project details. We'll have a consultation call to discuss requirements, timeline, and pricing. Then we'll get building!"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to build something amazing? Let's collaborate and create the next big thing in gaming."
|
|
animationType="entrance-slide"
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Join Discord", href: "#" },
|
|
{ text: "Email Me", href: "mailto:nesquik@example.com" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Nesquik Developer"
|
|
copyrightText="© 2025 Nesquik Developer | Full Stack Gaming Developer"
|
|
socialLinks={[
|
|
{
|
|
icon: Github,
|
|
href: "https://github.com/NesquikDeveloper", ariaLabel: "GitHub Profile"},
|
|
{
|
|
icon: MessageCircle,
|
|
href: "#", ariaLabel: "Discord Server"},
|
|
{
|
|
icon: Mail,
|
|
href: "mailto:nesquik@example.com", ariaLabel: "Email Contact"},
|
|
{
|
|
icon: Gamepad2,
|
|
href: "#", ariaLabel: "Gaming Portfolio"},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|