new homepage

This commit is contained in:
2024-12-13 11:40:26 -05:00
parent 1a868180ca
commit b4d91ea36a
7 changed files with 62 additions and 35 deletions

View File

@@ -2,7 +2,7 @@
import "../styles/globals.css"; import "../styles/globals.css";
import Navbar from "../components/Navbar"; import Navbar from "../components/Navbar";
import PopNav from "@src/components/PopNav/page"; import PopNav from "@src/components/PopNav/page";
import { Inter } from 'next/font/google' import { Roboto } from 'next/font/google'
export const metadata = { export const metadata = {
@@ -10,7 +10,8 @@ export const metadata = {
description: 'Freedom On', description: 'Freedom On',
} }
const inter = Inter({ const roboto = Roboto({
weight: '400',
subsets: ['latin'], subsets: ['latin'],
display: 'swap', display: 'swap',
}) })
@@ -20,7 +21,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
const { children } = props; const { children } = props;
return ( return (
<html suppressHydrationWarning className={inter.className}> <html suppressHydrationWarning className={roboto.className}>
<body className="bg-slate-200 "> <body className="bg-slate-200 ">
<Navbar /> <Navbar />

View File

@@ -4,35 +4,59 @@ import FeaturesSection from "@components/FeaturesSection";
import Footer from "@components/site/Footer"; import Footer from "@components/site/Footer";
import Header from "@components/Header"; import Header from "@components/Header";
import Hero from "@components/Hero"; import Hero from "@components/Hero";
import { ChevronRightIcon } from "@heroicons/react/24/outline";
export default async function Home() { export default async function Home() {
return ( return (
<div className="p-4 pt-16 mx-auto max-w-screen-md"> <div className="bg-white">
<h1 className="text-4xl font-bold mb-6 text-black">Welcome to Ballistic Builder</h1> <div className="relative isolate pt-1">
<svg
<div className="bg-white rounded-lg shadow-md p-6 mb-6"> aria-hidden="true"
<h2 className="text-2xl font-semibold mb-4 text-black">Build Your Next Project</h2> className="absolute inset-0 -z-10 size-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
<p className="text-gray-600 mb-4"> >
Create, customize, and manage your projects with our intuitive builder interface. <defs>
</p> <pattern
<a x="50%"
href="/builder" y={-1}
className="inline-block bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition-colors" id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527"
> width={200}
Get Started height={200}
</a> patternUnits="userSpaceOnUse"
>
<path d="M100 200V.5M.5 .5H200" fill="none" />
</pattern>
</defs>
<svg x="50%" y={-1} className="overflow-visible fill-gray-50">
<path
d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z"
strokeWidth={0}
/>
</svg>
<rect fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" width="100%" height="100%" strokeWidth={0} />
</svg>
<div className="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-top lg:gap-x-10 lg:px-8 lg:py-40">
<div className="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
<h1 className="mt-10 text-pretty text-5xl font-semibold tracking-tight text-gray-900 sm:text-7xl">
A better way to plan your next build
</h1>
<p className="mt-8 text-pretty text-lg font-medium text-gray-500 sm:text-xl/8">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt.
</p>
<div className="mt-10 flex items-top gap-x-6">
<a
href="#"
className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Get started
</a>
</div>
</div>
<div className="mt-16 sm:mt-24 alignlg:mt-0 lg:shrink-0 lg:grow items-top">
<img alt="" src="https://i.imgur.com/IK8FbaI.png" />
</div>
</div>
</div>
</div> </div>
<div className="bg-white rounded-lg shadow-md p-6">
<h2 className="text-2xl font-semibold mb-4 text-black">Features</h2>
<ul className="list-disc list-inside text-gray-600 space-y-2">
<li>Easy-to-use interface</li>
<li>Customizable components</li>
<li>Real-time preview</li>
<li>Export functionality</li>
</ul>
</div>
</div>
); );
} }

View File

@@ -24,7 +24,7 @@ function classNames(...classes: unknown[]) {
export default function Navbar() { export default function Navbar() {
return ( return (
<Disclosure as="nav" className="bg-gray-800"> <Disclosure as="nav" className="bg-lime-800">
<div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8"> <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div className="relative flex h-16 items-center justify-between"> <div className="relative flex h-16 items-center justify-between">
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden"> <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
@@ -72,7 +72,7 @@ export default function Navbar() {
{/* Profile dropdown */} {/* Profile dropdown */}
<Menu as="div" className="relative ml-3"> <Menu as="div" className="relative ml-3">
<div> <div>
<MenuButton className="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"> <MenuButton className="relative flex rounded-full bg-lime-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
<span className="absolute -inset-1.5" /> <span className="absolute -inset-1.5" />
<span className="sr-only">Open user menu</span> <span className="sr-only">Open user menu</span>
{/* <Image {/* <Image
@@ -84,7 +84,7 @@ export default function Navbar() {
/> */} /> */}
<img <img
alt="" alt=""
src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600" src="https://tailwindui.com/plus/img/logos/mark.svg?color=lime&shade=100"
className="h-8 w-auto" className="h-8 w-auto"
/> />
</MenuButton> </MenuButton>

View File

@@ -205,7 +205,7 @@ export default function PopNav() {
<div className="space-y-6 border-t border-gray-200 px-4 py-6"> <div className="space-y-6 border-t border-gray-200 px-4 py-6">
<div className="flow-root"> <div className="flow-root">
<a <a
href="#" href="/signin"
className="-m-2 block p-2 font-medium text-gray-900" className="-m-2 block p-2 font-medium text-gray-900"
> >
Sign in Sign in
@@ -360,7 +360,7 @@ export default function PopNav() {
<div className="ml-auto flex items-center"> <div className="ml-auto flex items-center">
<div className="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6"> <div className="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
<a <a
href="#" href="/signin"
className="text-sm font-medium text-gray-700 hover:text-gray-800" className="text-sm font-medium text-gray-700 hover:text-gray-800"
> >
Sign In Sign In

View File

@@ -1,3 +1,5 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@@ -17,5 +19,5 @@
body { body {
color: var(--foreground); color: var(--foreground);
background: var(--background); background: var(--background);
font-family: Arial, Helvetica, sans-serif; /* font-family: Arial, Helvetica, sans-serif; */
} }