new homepage

2025-12-06 02:36:44 -05:00 · 2024-12-13 11:40:26 -05:00
parent 1a868180ca
commit b4d91ea36a
7 changed files with 62 additions and 35 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,7 @@
 import "../styles/globals.css";
 import Navbar from "../components/Navbar";
 import PopNav from "@src/components/PopNav/page";
-import { Inter } from 'next/font/google'
+import { Roboto } from 'next/font/google'


 export const metadata = {
@@ -10,7 +10,8 @@ export const metadata = {
  description: 'Freedom On',
 }

-const inter = Inter({
+const roboto = Roboto({
+  weight: '400',
  subsets: ['latin'],
  display: 'swap',
 })
@@ -20,7 +21,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
  const { children } = props;

  return (
-    <html suppressHydrationWarning className={inter.className}>
+    <html suppressHydrationWarning className={roboto.className}>
      <body className="bg-slate-200	">
       
          <Navbar />
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,34 +4,58 @@ import FeaturesSection from "@components/FeaturesSection";
 import Footer from "@components/site/Footer";
 import Header from "@components/Header";
 import Hero from "@components/Hero";
-
+import { ChevronRightIcon } from "@heroicons/react/24/outline";

 export default async function Home() {
  return (
-    <div className="p-4 pt-16 mx-auto max-w-screen-md">
-    <h1 className="text-4xl font-bold mb-6 text-black">Welcome to Ballistic Builder</h1>
-    
-    <div className="bg-white rounded-lg shadow-md p-6 mb-6">
-      <h2 className="text-2xl font-semibold mb-4 text-black">Build Your Next Project</h2>
-      <p className="text-gray-600 mb-4">
-        Create, customize, and manage your projects with our intuitive builder interface.
-      </p>
-      <a 
-        href="/builder" 
-        className="inline-block bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition-colors"
+    <div className="bg-white">
+      <div className="relative isolate pt-1">
+        <svg
+          aria-hidden="true"
+          className="absolute inset-0 -z-10 size-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
        >
-        Get Started
+          <defs>
+            <pattern
+              x="50%"
+              y={-1}
+              id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527"
+              width={200}
+              height={200}
+              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 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 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>
  );
--- a/src/app/register/layout.tsx
+++ b/src/app/register/layout.tsx
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -24,7 +24,7 @@ function classNames(...classes: unknown[]) {

 export default function Navbar() {
  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="relative flex h-16 items-center justify-between">
          <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
@@ -72,7 +72,7 @@ export default function Navbar() {
            {/* Profile dropdown */}
            <Menu as="div" className="relative ml-3">
              <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="sr-only">Open user menu</span>
                  {/* <Image
@@ -84,7 +84,7 @@ export default function Navbar() {
                  /> */}
                  <img
                    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"
                  />
                </MenuButton>
--- a/src/components/PopNav/page.tsx
+++ b/src/components/PopNav/page.tsx
@@ -205,7 +205,7 @@ export default function PopNav() {
            <div className="space-y-6 border-t border-gray-200 px-4 py-6">
              <div className="flow-root">
                <a
-                  href="#"
+                  href="/signin"
                  className="-m-2 block p-2 font-medium text-gray-900"
                >
                  Sign in
@@ -360,7 +360,7 @@ export default function PopNav() {
              <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">
                  <a
-                    href="#"
+                    href="/signin"
                    className="text-sm font-medium text-gray-700 hover:text-gray-800"
                  >
                    Sign In
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,3 +1,5 @@
+
+
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -17,5 +19,5 @@
 body {
  color: var(--foreground);
  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  /* font-family: Arial, Helvetica, sans-serif; */
 }