Skip to content

Enhance layout, branding and add social icons components #728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arghyaxcodes merged 9 commits into from
Jul 28, 2025
Merged

Enhance layout, branding and add social icons components #728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f47770e
feat(layout): enhance layout component with metadata and font variables
arghyaxcodes Jul 28, 2025
645b728
feat(logo): update SVG logo component with customizable props
arghyaxcodes Jul 28, 2025
a45923b
feat(layout): replace inline SVG logo with Logo component
arghyaxcodes Jul 28, 2025
95cd11a
feat(page): enhance homepage layout with new sections and buttons
arghyaxcodes Jul 28, 2025
2f7f393
feat(icons): add GitHub, Twitter, Discord, and Open Collective icons …
arghyaxcodes Jul 28, 2025
81bdd82
feat(footer): implement footer component with navigation links and so…
arghyaxcodes Jul 28, 2025
b3d55b4
feat(layout): add Footer component to layout for improved navigation
arghyaxcodes Jul 28, 2025
d107919
fix(metadata): update openGraph image URL to absolute path
arghyaxcodes Jul 28, 2025
417419e
refactor(layout): remove unused code
arghyaxcodes Jul 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 16 additions & 17 deletions src/app/(site)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
import type { ReactNode } from "react";
import { HomeLayout } from "fumadocs-ui/layouts/home";
import { baseOptions } from "@/app/layout.config";
import { Footer } from "@/components/footer";
import { HomeLayout } from "fumadocs-ui/layouts/home";
import type { ReactNode } from "react";

export default function Layout({ children }: { children: ReactNode }) {
return (
<HomeLayout
{...baseOptions}
links={[
{
text: "Documentation",
url: "/docs",
},
{
text: "Programs",
url: "/programs",
},
]}
>
{children}
</HomeLayout>
<>
<HomeLayout
{...baseOptions}
style={
{
"--spacing-fd-container": "1280px",
} as object
}
>
{children}
</HomeLayout>
<Footer />
</>
);
}
201 changes: 180 additions & 21 deletions src/app/(site)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,187 @@
import { GitHubIcon } from "@/components/icons";
import { Button } from "@/components/ui/button";
import { ArrowRightIcon, CodeIcon, ExternalLinkIcon } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

export default function HomePage() {
return (
<main className="flex flex-1 flex-col justify-center text-center">
<h1 className="text-5xl font-extrabold leading-none tracking-tight text-gray-900 dark:text-white sm:text-6xl lg:text-7xl max-w-6xl mx-auto">
Learn{" "}
<span className="bg-gradient-to-br from-green-400 to-cyan-500 bg-clip-text font-extrabold text-transparent">
Java
</span>{" "}
programming very fast and easily with{" "}
<span className="bg-gradient-to-br from-sky-400 to-indigo-500 bg-clip-text font-extrabold text-transparent">
Javaistic.
</span>
</h1>
<p className="text-fd-muted-foreground">
You can open{" "}
<Link
href="/docs/installation"
className="text-fd-foreground font-semibold underline"
>
/docs/installation
</Link>{" "}
and see the documentation.
</p>
<main className="flex flex-col text-center px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
{/* Hero Section */}
<section className="flex flex-col justify-center items-center sm:min-h-screen py-24">
<h1 className="text-5xl tracking-tight font-funnel-display sm:text-6xl lg:text-[80px] font-extrabold text-neutral-900 dark:text-white max-w-5xl">
Master{" "}
<span className="bg-gradient-to-br from-green-400 to-cyan-500 bg-clip-text text-transparent">
Java{" "}
</span>
Programming efficiently with{" "}
<span className="bg-gradient-to-br from-sky-400 to-indigo-500 bg-clip-text text-transparent">
Javaistic{" "}
</span>
</h1>
<p className="mt-6 text-lg sm:text-xl text-muted-foreground max-w-4xl">
Interactive, fast-paced learning for absolute beginners to advanced
learners. A free and open-source platform to learn Java programming.
</p>
<div className="mt-8 flex flex-col sm:flex-row gap-4">
<Link href="/docs">
<Button
size="lg"
className="text-lg py-6 font-semibold dark:text-foreground rounded-lg bg-blue-600 hover:bg-blue-700"
>
Start Learning Now
</Button>
</Link>
<Link href="https://github.com/javaistic/javaistic" target="_blank">
<Button
size="lg"
variant="outline"
className="text-lg py-6 font-semibold dark:text-foreground rounded-lg border-blue"
>
<GitHubIcon className="!size-5" />
Star on GitHub
</Button>
</Link>
</div>
</section>
{/* Features Section */}
<section className="max-w-6xl mx-auto px-4 sm:px-10 md:px-12">
<div className="text-center mt-5 mb-4">
<h1 className="text-4xl sm:text-5xl font-bold font-funnel-display">
Why learn Java with Javaistic?
</h1>
<p className="mt-4 text-lg font-medium dark:text-neutral-400 mx-auto">
Designed to make learning Java fun, practical, and truly
beginner-friendly.
</p>
</div>

{/* Section: Docs */}
<article className="mx-auto mb-10 sm:space-x-10 flex flex-col items-center py-10 sm:flex-row">
<div className="w-full sm:w-1/2">
<Image
src="/img/home/docs.svg"
alt="Javaistic Docs"
width={1213}
height={1023}
className="object-cover object-center"
placeholder="blur"
blurDataURL="/img/home/docs.svg"
loading="lazy"
/>
</div>
<div className="w-full sm:w-1/2 text-left">
<h2 className="mb-6 font-funnel-display text-3xl sm:text-4xl font-extrabold text-neutral-900 dark:text-white">
Quality over Quantity
</h2>
<p className="mb-8 text-xl font-medium leading-relaxed text-muted-foreground">
We focus on quality — not noise. Every piece of content is crafted
to be clear, engaging, and easy to understand. Learn Java with
beautifully designed, beginner-friendly docs — all completely
free.
</p>
<Link href="/docs">
<Button size="lg" className="text-lg font-semibold">
<span className="flex items-center">
Explore the Docs
<ArrowRightIcon className="ml-2 !size-5" />
</span>
</Button>
</Link>
</div>
</article>

{/* Section: Coding */}
<article className="flex flex-col-reverse sm:flex-row items-center py-14 space-y-10 sm:space-y-0 sm:space-x-10">
<div className="w-full sm:w-1/2 text-left">
<h2 className="mb-6 text-3xl sm:text-4xl font-funnel-display font-extrabold text-foreground">
Coding Made Fun
</h2>
<p className="mb-8 text-xl font-medium leading-relaxed text-muted-foreground">
Jump into hands-on coding right away or explore our step-by-step
breakdowns of real Java programs. Whether you’re a beginner or
brushing up, it’s coding made enjoyable.
</p>
<Link href="/programs">
<Button size="lg" className="text-lg font-semibold">
<span className="flex items-center">
<CodeIcon className="mr-2 !size-5" />
Try a Program Now
</span>
</Button>
</Link>
</div>
<div className="w-full sm:w-1/2">
<Image
src="/img/home/programs.svg"
alt="Javaistic Programs"
width={1213}
height={1023}
className="object-cover object-center"
placeholder="blur"
blurDataURL="/img/home/programs.svg"
loading="lazy"
/>
</div>
</article>

{/* Section: GitHub */}
<article className="flex flex-col sm:flex-row items-center py-14 space-y-10 sm:space-y-0 sm:space-x-10">
<div className="w-full sm:w-1/2">
<Image
src="/img/home/open-source.svg"
alt="Javaistic GitHub"
width={613}
height={521}
className="object-cover object-center"
placeholder="blur"
blurDataURL="/img/home/open-source.svg"
loading="lazy"
/>
</div>
<div className="w-full sm:w-1/2 text-left">
<h2 className="mb-6 text-3xl sm:text-4xl font-funnel-display font-extrabold text-foreground">
Built Together.
<br className="hidden lg:inline-block" />
Fork it. Improve it.
</h2>
<p className="mb-8 text-xl font-medium leading-relaxed text-muted-foreground">
Javaistic is fully open source — built by and for learners like
you. Fork it, contribute, and shape the future of Java education
with us.
</p>
<Link href="https://github.com/javaistic/javaistic" target="_blank">
<Button size="lg" className="text-lg font-semibold">
<span className="flex items-center">
Contribute on GitHub
<ExternalLinkIcon className="ml-2 !size-5" />
</span>
</Button>
</Link>
</div>
</article>
</section>

{/* CTA */}
<section className="py-20 max-w-6xl">
<div className="mx-auto rounded-3xl bg-gradient-to-br from-indigo-900 to-sky-700 px-6 py-16 text-center text-white shadow-xl">
<h2 className="mb-4 text-4xl font-bold font-funnel-display">
Ready to become a Java Pro?
</h2>
<p className="mb-8 text-lg font-medium dark:text-secondary-foreground">
Begin your Java journey now — no credit card, no sign-up, just pure
learning.
</p>
<Link href="/docs">
<Button
size="lg"
className="inline-flex bg-white text-black hover:bg-white items-center text-lg font-semibold"
>
Start Learning
</Button>
</Link>
</div>
</section>
</main>
);
}
16 changes: 2 additions & 14 deletions src/app/layout.config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import Logo from "@/components/logo";
import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";

/**
Expand All @@ -11,20 +12,7 @@ export const baseOptions: BaseLayoutProps = {
nav: {
title: (
<>
<svg viewBox="0 0 248 68" className="h-7 w-auto" fill="currentColor">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M33.711.934L56.955 14.34a6.975 6.975 0 013.486 6.03v26.81a6.96 6.96 0 01-3.486 6.038L33.711 66.624a6.988 6.988 0 01-6.98 0L3.485 53.218A6.976 6.976 0 010 47.18V20.37a6.965 6.965 0 013.486-6.03L26.73.934a6.987 6.987 0 016.981 0zM44.573 21.15l-11.368-6.544a6.988 6.988 0 00-6.964 0L14.872 21.15a6.977 6.977 0 00-3.495 6.038V40.25a6.958 6.958 0 003.495 6.038l11.369 6.545a6.99 6.99 0 006.964 0l11.368-6.545a6.974 6.974 0 003.495-6.038V27.188a6.976 6.976 0 00-3.495-6.038z"
fill="#3884FF"
></path>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M74.972 20.192h5.908v-5.473h-5.907v5.473zM72.67 52.944c4.811 0 8.21-3.403 8.21-8.192V23.116h-5.907v21.191c0 2.104-1.13 3.199-3.228 3.199h-1.91v5.438h2.835zm31.643-29.828l-.608 2.07a10.77 10.77 0 00-7.192-2.677c-6.55 0-11.438 4.952-11.438 11.57 0 6.611 4.88 11.605 11.438 11.605 2.783 0 5.205-.975 7.072-2.642l.522 1.992h4.606V23.116h-4.4zm-7.32 16.967a5.83 5.83 0 01-4.263-1.726 5.81 5.81 0 01-1.68-4.277 5.791 5.791 0 011.67-4.29 5.808 5.808 0 014.273-1.722 5.81 5.81 0 015.551 3.695c.287.737.42 1.526.39 2.317a5.794 5.794 0 01-3.629 5.584 5.81 5.81 0 01-2.312.419zm31.746-16.966l-5.257 14.691-5.334-14.692h-6.31l8.896 21.918h5.453l8.647-21.918h-6.104.009zm26.283 0l-.608 2.069a10.766 10.766 0 00-7.191-2.677c-6.55 0-11.438 4.952-11.438 11.57 0 6.611 4.888 11.605 11.438 11.605 2.783 0 5.214-.975 7.071-2.642l.523 1.992h4.606V23.116h-4.401zm-7.32 16.966a5.827 5.827 0 01-5.543-3.692 5.815 5.815 0 01-.398-2.311 5.785 5.785 0 011.669-4.29 5.809 5.809 0 014.272-1.722 5.812 5.812 0 014.272 1.723 5.79 5.79 0 011.67 4.289 5.792 5.792 0 01-1.673 4.283 5.804 5.804 0 01-4.269 1.72zm17.44-19.891h5.856v-5.473h-5.856v5.473zm0 24.842h5.899V23.116h-5.908v21.927l.009-.009zm19.281.65c5.539 0 9.169-2.924 9.169-7.388 0-5.354-4.563-6.09-8.117-6.739-2.268-.402-4.126-.77-4.126-2.223 0-1.266 1.096-2.078 2.911-2.078 2.054 0 3.27.855 3.313 2.6h5.617c-.043-4.388-3.511-7.347-8.767-7.347-5.257 0-8.767 2.882-8.767 7.021 0 5.157 4.443 6.089 7.919 6.696 2.303.368 4.195.813 4.195 2.31 0 1.47-1.49 2.24-3.108 2.24-2.097 0-3.595-.975-3.638-2.925h-5.737c0 4.67 3.682 7.833 9.136 7.833zm23.98-5.926c-2.183 0-3.39-1.214-3.39-3.335v-8.518h5.942v-4.789h-6.028v-5.678h-1.13l-8.604 9.168v1.3h3.921v9.338c0 4.831 2.945 7.79 7.757 7.79h4.195v-5.276h-2.663zm6.695-19.566h5.865v-5.473h-5.865v5.473zm0 24.842h5.908V23.116h-5.908v21.927-.009zm21.712.65c5.693 0 10.18-3.737 11.19-9.253h-5.942c-1.01 2.352-2.868 3.652-5.248 3.652-3.159 0-5.616-2.634-5.616-6.003 0-3.421 2.423-6.012 5.616-6.012a5.604 5.604 0 015.248 3.455h5.865c-1.053-5.405-5.42-9.014-11.079-9.014-6.626 0-11.643 4.952-11.643 11.528 0 6.576 5.017 11.647 11.609 11.647zM30.452 42.6c4.924 0 8.917-3.98 8.917-8.889 0-4.909-3.992-8.888-8.917-8.888s-8.917 3.98-8.917 8.888c0 4.91 3.992 8.89 8.917 8.89z"
fill="currentColor"
></path>
</svg>
<Logo className="h-7 w-auto" />
</>
),
},
Expand Down
34 changes: 27 additions & 7 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,36 @@
import './global.css';
import { RootProvider } from 'fumadocs-ui/provider';
import { Inter } from 'next/font/google';
import type { ReactNode } from 'react';
import { RootProvider } from "fumadocs-ui/provider";
import type { Metadata } from "next";
import { Funnel_Display, Inter } from "next/font/google";
import type { ReactNode } from "react";
import "./global.css";

const inter = Inter({
subsets: ['latin'],
subsets: ["latin"],
variable: "--font-inter",
});

const funnelDisplay = Funnel_Display({
subsets: ["latin", "latin-ext"],
weight: "variable",
variable: "--font-funnel-display",
});

export const metadata: Metadata = {
metadataBase: new URL("https://javaistic.vercel.app"),
title: "Javaistic - Learn Java for Free",
description:
"Javaistic is a free platform to learn Java programming language with interactive tutorials and resources.",
openGraph: {
images: "https://javaistic.vercel.app/og.png",
},
};

export default function Layout({ children }: { children: ReactNode }) {
return (
<html lang="en" className={inter.className} suppressHydrationWarning>
<body className="flex flex-col min-h-screen">
<html lang="en" suppressHydrationWarning>
<body
className={`${inter.variable} ${funnelDisplay.variable} font-sans antialiased`}
>
<RootProvider>{children}</RootProvider>
</body>
</html>
Expand Down
Loading
Loading