working chakura-ui

This commit is contained in:
2024-11-21 13:03:00 -05:00
parent ada465af64
commit 7b38c8a082
12 changed files with 85 additions and 70 deletions

View File

@@ -1,15 +1,18 @@
import { Provider } from "../components/ui/provider"
import "../styles/globals.css";
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({ children,}: {
children: React.ReactNode
}) {
export default function RootLayout(props: { children: React.ReactNode }) {
const { children } = props;
return (
<html lang="en">
<body>{children}</body>
<html suppressHydrationWarning>
<body>
<Provider>{children}</Provider>
</body>
</html>
)
}

View File

@@ -9,12 +9,13 @@ import { ChakraProvider } from "@chakra-ui/react";
export default function Home() {
return (
<div className="bg-gray-100 min-h-screen flex flex-col">
<Header />
<Header />
<Hero />
<FeaturesSection />
<About />
<Contact />
<Footer />
</div>
);
}

View File

@@ -10,13 +10,15 @@ export default function Contact() {
<p className="text-gray-700 mb-6">
Have questions or feedback? Wed love to hear from you!
</p>
<span>
<Link
href="mailto:support@firearmbuilder.com"
href="mailto:support@ballisticbuilder.com"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Email Us
</Link>
</span>
</div>
</section>
)

View File

@@ -6,7 +6,8 @@ export default function Footer() {
(
<footer className="bg-gray-800 text-white py-4">
<div className="container mx-auto px-6 text-center">
<p>&copy; {new Date().getFullYear()} Firearm Builder. All rights reserved.</p>
{/* <p>&copy; {new Date().getFullYear()} Ballistic Builder. All rights reserved.</p> */}
<p>&copy; 2024 Ballistic Builder. All rights reserved.</p>
</div>
</footer>
)

View File

@@ -1,39 +0,0 @@
import { Box, Flex, Link, Heading } from "@chakra-ui/react";
import NextLink from "next/link";
const Header: React.FC = () => {
return (
<>
<Box as="header" bg="primary" color="white" px="6" py="4" shadow="md">
<Flex justify="space-between" align="center" maxW="5xl" mx="auto">
<Heading as="h1" size="lg">
<NextLink href="/" passHref>
<Link color="white" _hover={{ textDecoration: "none" }}>
Ballistic Builder
</Link>
</NextLink>
</Heading>
<Flex as="nav" gap="6">
<NextLink href="/builder" passHref>
<Link color="white" _hover={{ textDecoration: "underline" }}>
Builder
</Link>
</NextLink>
<NextLink href="/products" passHref>
<Link color="white" _hover={{ textDecoration: "underline" }}>
Products
</Link>
</NextLink>
<NextLink href="/auth/signin" passHref>
<Link color="white" _hover={{ textDecoration: "underline" }}>
Sign In
</Link>
</NextLink>
</Flex>
</Flex>
</Box>
</>
);
};
export default Header;

View File

@@ -0,0 +1,23 @@
import Link from "next/link";
export default function Header() {
{/* Header Section */ }
return (
(
<header className="bg-gray-800 text-white py-4 shadow-md">
<div className="container mx-auto px-6 flex justify-between items-center">
<h1 className="text-2xl font-bold">Ballistic Builder</h1>
<nav>
<ul className="flex space-x-4">
<li><Link href="#features" className="hover:underline">Features</Link></li>
<li><Link href="/builder" className="hover:underline">Builder</Link></li>
<li><Link href="/products" className="hover:underline">Products</Link></li>
<li><Link href="#contact" className="hover:underline">Contact</Link></li>
</ul>
</nav>
</div>
</header>
)
)}

View File

@@ -1,23 +1,41 @@
import Link from "next/link";
import { Box, Flex, Link, Heading } from "@chakra-ui/react";
import NextLink from "next/link";
export default function Header() {
{/* Header Section */ }
const Header: React.FC = () => {
return (
(
<header className="bg-gray-800 text-white py-4 shadow-md">
<div className="container mx-auto px-6 flex justify-between items-center">
<h1 className="text-2xl font-bold">Ballistic Builder</h1>
<nav>
<ul className="flex space-x-4">
<li><Link href="#features" className="hover:underline">Features</Link></li>
<li><Link href="/builder" className="hover:underline">Builder</Link></li>
<li><Link href="/products" className="hover:underline">Products</Link></li>
<li><Link href="#contact" className="hover:underline">Contact</Link></li>
</ul>
</nav>
</div>
<>
<Box as="header" bg="primary" color="white" px="6" py="4" shadow="md">
<Flex justify="space-between" align="center" maxW="5xl" mx="auto">
<Heading as="h1" size="lg">
</header>
{/* <NextLink href="/" passHref> */}
<Link color="#374151" _hover={{ textDecoration: "none" }}>
Ballistic Builder
</Link>
{/* </NextLink> */}
)
)}
</Heading>
<Flex as="nav" gap="6">
{/* <NextLink href="/builder" passHref> */}
<Link color="#374151" _hover={{ textDecoration: "underline" }}>
Builder
</Link>
{/* </NextLink> */}
{/* <NextLink href="/products" passHref> */}
<Link color="#374151" _hover={{ textDecoration: "underline" }}>
Products
</Link>
{/* </NextLink> */}
{/* <NextLink href="/auth/signin" passHref> */}
<Link color="#374151" _hover={{ textDecoration: "underline" }}>
Sign In
</Link>
{/* </NextLink> */}
</Flex>
</Flex>
</Box>
</>
);
};
export default Header;

View File

@@ -10,6 +10,7 @@ export default function Hero() {
<p className="text-lg mb-6">
Customize every component of your firearm with ease and precision.
</p>
<span>
<Link
href="/builder"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
@@ -17,6 +18,7 @@ export default function Hero() {
Get Started
</Link>
</span>
</div>
</section>

View File

@@ -78,7 +78,7 @@ export default function Home() {
Have questions or feedback? Wed love to hear from you!
</p>
<Link
href="mailto:support@firearmbuilder.com"
href="mailto:support@ballisticbuilder.com"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Email Us
@@ -89,7 +89,7 @@ export default function Home() {
{/* Footer Section */}
<footer className="bg-gray-800 text-white py-4">
<div className="container mx-auto px-6 text-center">
<p>&copy; {new Date().getFullYear()} Firearm Builder. All rights reserved.</p>
<p>&copy; {new Date().getFullYear()} Ballistic Builder. All rights reserved.</p>
</div>
</footer>
</div>)