diff --git a/app/about-us/page.tsx b/app/about-us/page.tsx new file mode 100644 index 0000000..a7303db --- /dev/null +++ b/app/about-us/page.tsx @@ -0,0 +1,5 @@ +export default function Page() { + return ( +

about us page

+ ) +} \ No newline at end of file diff --git a/app/contact/page.tsx b/app/contact/page.tsx new file mode 100644 index 0000000..53d875f --- /dev/null +++ b/app/contact/page.tsx @@ -0,0 +1,5 @@ +export default function Page() { + return ( +

contact page

+ ) +} \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index a2dc41e..7d8efcb 100644 --- a/app/globals.css +++ b/app/globals.css @@ -14,7 +14,7 @@ @media (prefers-color-scheme: dark) { :root { - --background: #0a0a0a; + --background: #000; --foreground: #ededed; } } diff --git a/app/layout.tsx b/app/layout.tsx index 976eb90..7e6c23a 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; +import Menubar from '../components/menubar'; const geistSans = Geist({ variable: "--font-geist-sans", @@ -27,7 +28,10 @@ export default function RootLayout({ lang="en" className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`} > - {children} + + + {children} + ); } diff --git a/app/page.tsx b/app/page.tsx index 3f36f7c..22251d6 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,64 +1,12 @@ import Image from "next/image"; +import HeroSection from "@/components/hero-section"; export default function Home() { return (
-
- Next.js logo -
-

- To get started, edit the page.tsx file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
-
- - Vercel logomark - Deploy Now - - - Documentation - -
+
+ +
); diff --git a/app/plans/page.tsx b/app/plans/page.tsx new file mode 100644 index 0000000..0e7ba69 --- /dev/null +++ b/app/plans/page.tsx @@ -0,0 +1,5 @@ +export default function Page() { + return ( +

plans page

+ ) +} \ No newline at end of file diff --git a/assets/hero-picture-1.png b/assets/hero-picture-1.png new file mode 100644 index 0000000..c67c520 Binary files /dev/null and b/assets/hero-picture-1.png differ diff --git a/assets/hero-picture-2.png b/assets/hero-picture-2.png new file mode 100644 index 0000000..0d0286d Binary files /dev/null and b/assets/hero-picture-2.png differ diff --git a/assets/hero-picture-3.png b/assets/hero-picture-3.png new file mode 100644 index 0000000..0ea961f Binary files /dev/null and b/assets/hero-picture-3.png differ diff --git a/assets/hero-picture.jpg b/assets/hero-picture.jpg new file mode 100644 index 0000000..1ab6588 Binary files /dev/null and b/assets/hero-picture.jpg differ diff --git a/components/Menubar.css b/components/Menubar.css new file mode 100644 index 0000000..8f976c6 --- /dev/null +++ b/components/Menubar.css @@ -0,0 +1,252 @@ +/* app/Menubar.css */ + +.menubar { + position: sticky; + top: 20px; + z-index: 1000; + display: flex; + justify-content: center; + align-self: center; + width: calc(100% - 40px); + min-width: 720px; + max-width: 1000px; + margin: 20px auto 0; + border-radius: 30px; + background-color: rgba(29, 29, 29, 0.9); + backdrop-filter: blur(10px); + padding: 10px 20px; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); + border: 1px solid rgba(60, 60, 60, 0.3); + isolation: isolate; + transition: padding 0.35s ease; +} + +.menubar::before { + content: ''; + position: absolute; + inset: -5px; + background: linear-gradient(45deg, #ff00ff, #00ffff); + filter: blur(25px); + border-radius: 20px; + z-index: 0; + opacity: 0.6; + pointer-events: none; +} + +.menubar-content { + position: relative; + z-index: 1; + display: flex; + align-items: center; + width: 100%; + max-width: 960px; + transition: flex-direction 0.35s ease; +} + +.desktop-menu { + display: flex; + gap: 30px; +} + +.menu-item { + color: #e0e0e0; + text-decoration: none; + font-size: 1.1em; + padding: 5px 10px; + transition: color 0.3s ease, transform 0.3s ease; +} + +.menu-item:hover { + color: #ffffff; + transform: translateY(-2px); +} + +.mobile-menu { + display: none; + width: 100%; + position: relative; +} + +.mobile-menu-checkbox { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.burger-icon { + display: inline-flex; + align-items: center; + justify-content: center; + background: none; + border: none; + color: #e0e0e0; + font-size: 2em; + line-height: 1; + padding: 5px 10px; + position: relative; + z-index: 3; + touch-action: manipulation; + width: 1.4em; + height: 1.4em; + cursor: pointer; +} + +.burger-icon-menu, +.burger-icon-close { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; + transition: opacity 0.25s ease, transform 0.25s ease; +} + +.burger-icon-menu { + opacity: 1; + transform: scale(1) rotate(0deg); +} + +.burger-icon-close { + opacity: 0; + transform: scale(0.8) rotate(-90deg); +} + +.mobile-menu-checkbox:checked + .burger-icon .burger-icon-menu { + opacity: 0; + transform: scale(0.8) rotate(90deg); +} + +.mobile-menu-checkbox:checked + .burger-icon .burger-icon-close { + opacity: 1; + transform: scale(1) rotate(0deg); +} + +.mobile-dropdown { + display: grid; + grid-template-rows: 0fr; + width: 100%; + opacity: 0; + margin-top: 0; + padding-top: 0; + border-top: 1px solid transparent; + pointer-events: none; + transition: + grid-template-rows 0.35s ease, + opacity 0.35s ease, + margin-top 0.35s ease, + padding-top 0.35s ease, + border-color 0.35s ease; +} + +.mobile-menu-checkbox:checked ~ .mobile-dropdown { + grid-template-rows: 1fr; + opacity: 1; + margin-top: 8px; + padding-top: 12px; + border-top-color: rgba(60, 60, 60, 0.3); + pointer-events: auto; +} + +.mobile-dropdown-inner { + display: flex; + flex-direction: column; + gap: 4px; + overflow: hidden; + min-height: 0; +} + +.mobile-dropdown-item { + display: block; + width: 100%; + padding: 12px 10px; + border-radius: 16px; + text-align: left; + opacity: 0; + transform: translateY(-6px); + transition: + opacity 0.3s ease, + transform 0.3s ease, + background-color 0.3s ease; +} + +.mobile-menu-checkbox:checked ~ .mobile-dropdown .mobile-dropdown-item { + opacity: 1; + transform: translateY(0); +} + +.mobile-dropdown-item:hover { + background-color: rgba(60, 60, 60, 0.4); + transform: translateY(0); +} + +/* Responsive design */ +@media (max-width: 750px) { + .menubar { + min-width: 0; + width: calc(100% - 24px); + margin-top: 16px; + justify-content: flex-start; + } + + .desktop-menu { + display: none; + } + + .mobile-menu { + display: block; + } + + .menubar-content { + justify-content: flex-start; + align-items: stretch; + } + + .menubar:has(.mobile-menu-checkbox:checked) .menubar-content { + flex-direction: column; + align-items: stretch; + } + + .mobile-menu-checkbox:checked ~ .mobile-dropdown .mobile-dropdown-item:nth-child(1) { + transition-delay: 0.05s; + } + + .mobile-menu-checkbox:checked ~ .mobile-dropdown .mobile-dropdown-item:nth-child(2) { + transition-delay: 0.1s; + } + + .mobile-menu-checkbox:checked ~ .mobile-dropdown .mobile-dropdown-item:nth-child(3) { + transition-delay: 0.15s; + } + + .mobile-menu-checkbox:checked ~ .mobile-dropdown .mobile-dropdown-item:nth-child(4) { + transition-delay: 0.2s; + } +} + +@media (prefers-reduced-motion: reduce) { + .menubar, + .menubar-content, + .burger-icon-menu, + .burger-icon-close, + .mobile-dropdown, + .mobile-dropdown-item { + transition: none; + } + + .mobile-menu-checkbox:checked + .burger-icon .burger-icon-menu, + .burger-icon-close { + transform: none; + } + + .mobile-dropdown-item { + opacity: 1; + transform: none; + } +} diff --git a/components/hero-section.css b/components/hero-section.css new file mode 100644 index 0000000..7b18094 --- /dev/null +++ b/components/hero-section.css @@ -0,0 +1,28 @@ + + +.hero-main { + width: 100%; + height: 400px; +} + +.hero-left { + width: 50%; +} + +.hero-right { + width: 50%; + padding-left: 20px; +} + +.hero-picture { + border-radius: 20px; + position: absolute; + width: 20%; +} + +@media (max-width: 750px) { + .hero-right { + width: 100%; + padding-top: 20px; + } +} diff --git a/components/hero-section.tsx b/components/hero-section.tsx new file mode 100644 index 0000000..c21a9d2 --- /dev/null +++ b/components/hero-section.tsx @@ -0,0 +1,23 @@ +import ContentCard from "./ui/content-cards"; +import './hero-section.css' +import heroPictureOne from "../assets/hero-picture-1.png" +import heroPictureTwo from "../assets/hero-picture-2.png" +import heroPictureThree from "../assets/hero-picture-3.png" + +export default function HeroSection() { + return( + <> +
+
+ + + +
+
+

Sculpted Arc
Web Solutions

+

Here at Sculpted Arc we are invested in creating great website and solving complex web problems Here at Sculpted Arc we are invested in creating great website and solving complex web problems

+
+
+ + ) +} \ No newline at end of file diff --git a/components/menubar.tsx b/components/menubar.tsx new file mode 100644 index 0000000..f3d93a8 --- /dev/null +++ b/components/menubar.tsx @@ -0,0 +1,74 @@ +'use client'; + +import { useRef, type MouseEvent } from 'react'; +import './Menubar.css'; + +const menuLinks = [ + { label: 'Home', href: '/' }, + { label: 'About', href: '/about-us' }, + { label: 'Plans', href: '/plans' }, + { label: 'Contact', href: '#' }, +]; + +export default function Menubar() { + const menuToggleRef = useRef(null); + + const closeMobileMenu = () => { + if (menuToggleRef.current) { + menuToggleRef.current.checked = false; + } + }; + + const handleLinkClick = (event: MouseEvent) => { + closeMobileMenu(); + event.currentTarget.blur(); + }; + + return ( + + ); +} diff --git a/components/ui/button.tsx b/components/ui/button.tsx new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/components/ui/button.tsx @@ -0,0 +1 @@ + diff --git a/components/ui/content-cards.tsx b/components/ui/content-cards.tsx new file mode 100644 index 0000000..443f258 --- /dev/null +++ b/components/ui/content-cards.tsx @@ -0,0 +1,17 @@ + +interface cardProps { + src?: string + button_link?: string + button_text?: string +} + +export default function ContentCard(buttonProps: cardProps) { + return ( + <> + + + + ) +} \ No newline at end of file