diff --git a/public/icons/facebook.svg b/public/icons/facebook.svg new file mode 100644 index 0000000..5fc7cec --- /dev/null +++ b/public/icons/facebook.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/icons/instagram.svg b/public/icons/instagram.svg new file mode 100644 index 0000000..855e653 --- /dev/null +++ b/public/icons/instagram.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/icons/linkedin.svg b/public/icons/linkedin.svg new file mode 100644 index 0000000..30fc0e3 --- /dev/null +++ b/public/icons/linkedin.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/icons/youtube.svg b/public/icons/youtube.svg new file mode 100644 index 0000000..3c9c0be --- /dev/null +++ b/public/icons/youtube.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/images/homepage/brand-story.jpg b/public/images/homepage/brand-story.jpg new file mode 100644 index 0000000..573e669 Binary files /dev/null and b/public/images/homepage/brand-story.jpg differ diff --git a/public/images/logo.png b/public/images/logo.png new file mode 100644 index 0000000..ee3a5f9 Binary files /dev/null and b/public/images/logo.png differ diff --git a/public/images/slider/slider-01.jpg b/public/images/slider/slider-01.jpg new file mode 100644 index 0000000..e3912d9 Binary files /dev/null and b/public/images/slider/slider-01.jpg differ diff --git a/public/images/slider/slider-02.jpg b/public/images/slider/slider-02.jpg new file mode 100644 index 0000000..b37d099 Binary files /dev/null and b/public/images/slider/slider-02.jpg differ diff --git a/public/images/slider/slider-03.jpg b/public/images/slider/slider-03.jpg new file mode 100644 index 0000000..54d054f Binary files /dev/null and b/public/images/slider/slider-03.jpg differ diff --git a/public/images/slider/slider-04.jpg b/public/images/slider/slider-04.jpg new file mode 100644 index 0000000..c3216ff Binary files /dev/null and b/public/images/slider/slider-04.jpg differ diff --git a/src/app/about-us/page.tsx b/src/app/about-us/page.tsx new file mode 100644 index 0000000..178ea06 --- /dev/null +++ b/src/app/about-us/page.tsx @@ -0,0 +1,10 @@ +export default function AboutUsPage() { + return ( +
+

About Us

+

+ Kakawa is a fictional company that delivers high-quality content through modern web technologies. +

+
+ ); + } \ No newline at end of file diff --git a/src/app/fonts/Inter-Bold.ttf b/src/app/fonts/Inter-Bold.ttf new file mode 100644 index 0000000..8e82c70 Binary files /dev/null and b/src/app/fonts/Inter-Bold.ttf differ diff --git a/src/app/globalicons.css b/src/app/globalicons.css new file mode 100644 index 0000000..02b120b --- /dev/null +++ b/src/app/globalicons.css @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'); \ No newline at end of file diff --git a/src/app/globals.css b/src/app/globals.css index 13d40b8..c8054c2 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -25,3 +25,95 @@ body { text-wrap: balance; } } + + +body { + margin: 0; + margin-top: 8em; + padding: 0; + background-color: #f0f0f0; /* Optional background color */ + font-family: Arial, sans-serif; + color: black; +} + +.navbar { + position: fixed; + top: 1.5em; + left: 2em; + right: 2em; + background-color: white; + border-radius: 0px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 1em 2em; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + z-index: 1000; +} + +.navbar a { + color: black; + text-decoration: none; + margin: 0 0.5em; + font-size: 1em; +} + +.navbar a:hover { + color: #555; +} + +.left, .right { + display: flex; + align-items: center; +} + +.navbar .center a { + color: black; + text-decoration: none; + margin: 0 0; + font-size: 1em; +} +.center .logo { + height: 50px; /* Adjust the logo size as needed */ +} + +.navbar-center .logo { + height: 50px; /* Adjust the logo size as needed */ +} + +.fa-search, .fa-user { + font-size: 1.2em; +} + +@media screen and (max-width: 768px) { + .navbar { + top: 1em; + left: 1em; + right: 1em; + flex-direction: column; + align-items: flex-start; + } + + .navbar-center { + margin: 1em 0; + align-self: center; + } +} + +.navbar a.active { + font-weight: bold; + border-bottom: 2px solid black; +} + +.navbar { + border-radius: 25px; /* Makes the corners more rounded */ +} + + +.navbar a { + font-size: 1.1em; +} + +.fa-search, .fa-user { + font-size: 1.4em; +} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a36cde0..b2bfa04 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,35 +1,18 @@ -import type { Metadata } from "next"; -import localFont from "next/font/local"; -import "./globals.css"; +import './globals.css'; +import './globalicons.css' -const geistSans = localFont({ - src: "./fonts/GeistVF.woff", - variable: "--font-geist-sans", - weight: "100 900", -}); -const geistMono = localFont({ - src: "./fonts/GeistMonoVF.woff", - variable: "--font-geist-mono", - weight: "100 900", -}); +import { ReactNode } from 'react'; +import Navbar from '../components/navbar'; +import Footer from '../components/footer' -export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; - -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { +export default function RootLayout({ children }: { children: ReactNode }) { return ( - - {children} + + +
{children}
+