import type { Metadata } from "next";
import { Roboto } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/providers/theme-provider";
const roboto = Roboto({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "NextGen SaaS Platform",
description: "A cutting-edge SaaS platform that brings your business to the next level.",
keywords: ["SaaS", "business", "technology", "cloud"],
author: "NextGen Team",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body className={roboto.className}>
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={true}>
{/* Background Effect */}
<div className="[--color:#0070f3] pointer-events-none absolute inset-0 -z-10 w-full h-[50rem] opacity-60 dark:opacity-40 [background-image:radial-gradient(circle_at_top,var(--color),transparent_90%)]" />
{/* Main Content */}
<main className="mx-auto w-full max-w-screen-xl px-6 md:px-12 relative">
<section className="py-12 text-center">
<h1 className="text-5xl font-bold">NextGen SaaS</h1>
<p className="text-xl mt-4">Grow your business with our platform</p>
</section>
<section className="py-12 grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="p-6 bg-white shadow rounded-lg">
<h2 className="text-2xl font-semibold">Feature 1</h2>
<p className="mt-2">Detailed explanation of this awesome feature.</p>
</div>
<div className="p-6 bg-white shadow rounded-lg">
<h2 className="text-2xl font-semibold">Feature 2</h2>
<p className="mt-2">Detailed explanation of another great feature.</p>
</div>
<div className="p-6 bg-white shadow rounded-lg">
<h2 className="text-2xl font-semibold">Feature 3</h2>
<p className="mt-2">Another feature to help grow your business.</p>
</div>
</section>
{children}
</main>
<footer className="py-8 text-center text-gray-600">
<p>© 2024 NextGen SaaS. All rights reserved.</p>
</footer>
</ThemeProvider>
</body>
</html>
);
}
Showcasing My Journey
A Portfolio of Innovative Web Solutions
myPortfolio
August - 2024
A dynamic portfolio website builder that allows users to create personalized portfolios by selecting templates, customizing content, and showcasing their projects and blogs. Built with Next.js, Tailwind CSS, and Shadcn, this project offers seamless user registration, real-time preview, and publishing options, providing a comprehensive platform for building and managing online portfolios.
BooXtation Project
October - 2024
The BooXtation Project is a robust and comprehensive online bookstore management system that addresses the needs of digital bookstores. It offers functionalities such as book, author, customer, and order management to streamline operations and improve user experience.
Postpeak | Blogging Platform
July - 2023
Postpeak is a dynamic blogging platform built with Next.js and Prisma. Users can sign up, log in, create posts, view other posts, comment on them, and filter posts by category. This application provides a user-friendly interface for managing and exploring blog content.
Online Shoping
December - 2023
An e-commerce platform designed to offer a seamless online shopping experience. The project features a responsive design with intuitive navigation, enabling users to browse products, add items to their cart, and proceed to checkout. Built using HTML, CSS, JavaScript, and Bootstrap, it ensures compatibility across various devices and browsers.
E-commerce Application
December - 2022
This React application is designed as the frontend interface for an e-commerce platform. It allows users to interact with product listings, perform searches, apply filters, and complete purchases. The design emphasizes a seamless and engaging user experience.
University system
June - 2022
A comprehensive university management system developed to streamline academic and administrative processes. This system includes features for student enrollment, course management, and faculty coordination. Built using Node.js, React.js, TailwindCSS, and React Router, it provides a user-friendly interface and efficient navigation to enhance the user experience.
My Toolbox
The Skills and Technologies I Command
Contact me
I'm eager to collaborate on new projects and help bring your ideas to life. Whether you have a project in mind, need web development advice, or just want to connect, feel free to reach out
Copyright © 2024 Muhammad Ibrahim. All Rights Reserved.