diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index 54313e76d..e2c39a8cd 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -1,21 +1,22 @@ -import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; -import "./globals.css"; -import { Providers } from "./providers"; +import type { Metadata } from 'next'; +import { Geist, Geist_Mono } from 'next/font/google'; +import './globals.css'; +import { Providers } from './providers'; +import Navbar from '@/components/navbar'; const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], + variable: '--font-geist-sans', + subsets: ['latin'], }); const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], + variable: '--font-geist-mono', + subsets: ['latin'], }); export const metadata: Metadata = { - title: "Assets Up", - description: "Modern Assets and Inventory Management Platform", + title: 'Assets Up', + description: 'Modern Assets and Inventory Management Platform', }; export default function RootLayout({ @@ -28,8 +29,9 @@ export default function RootLayout({ + {children} ); -} \ No newline at end of file +} diff --git a/frontend/components/CountdownTimer.tsx b/frontend/components/CountdownTimer.tsx new file mode 100644 index 000000000..cab0572cb --- /dev/null +++ b/frontend/components/CountdownTimer.tsx @@ -0,0 +1,43 @@ +import { useEffect, useState } from 'react'; + +interface Countdown { + days: number; + hours: number; + minutes: number; + seconds: number; +} + +const CountdownTimer = ({ targetDate }: { targetDate: string }) => { + const calculateTimeLeft = (): Countdown => { + const difference = +new Date(targetDate) - +new Date(); + const timeLeft: Countdown = { + days: Math.floor(difference / (1000 * 60 * 60 * 24)), + hours: Math.floor((difference / (1000 * 60 * 60)) % 24), + minutes: Math.floor((difference / 1000 / 60) % 60), + seconds: Math.floor((difference / 1000) % 60), + }; + return timeLeft; + }; + + const [timeLeft, setTimeLeft] = useState(calculateTimeLeft()); + + useEffect(() => { + const timer = setInterval(() => { + setTimeLeft(calculateTimeLeft()); + }, 1000); + return () => clearInterval(timer); + }, [targetDate]); + + return ( +
+ {Object.entries(timeLeft).map(([unit, value]) => ( +
+ {value} + {unit} +
+ ))} +
+ ); +}; + +export default CountdownTimer; diff --git a/frontend/components/Hero.tsx b/frontend/components/Hero.tsx new file mode 100644 index 000000000..c3f08a0ea --- /dev/null +++ b/frontend/components/Hero.tsx @@ -0,0 +1,26 @@ +import CountdownTimer from './CountdownTimer'; + +const Hero = () => { + return ( +
+
+
+ +

+ Something Awesome is Coming +

+ +

+ We're working hard to bring you something amazing. Stay tuned! +

+ + + + +
+ ); +}; + +export default Hero; diff --git a/frontend/components/Navbar.tsx b/frontend/components/Navbar.tsx new file mode 100644 index 000000000..a0829a1e6 --- /dev/null +++ b/frontend/components/Navbar.tsx @@ -0,0 +1,14 @@ +import { Building2 } from 'lucide-react'; + +const Navbar = () => { + return ( + + ); +}; + +export default Navbar;