initial commit

2026-05-22 07:24:00 +01:00
parent 0947645601
commit ca60b38c85
16 changed files with 420 additions and 58 deletions
--- a/components/Menubar.css
+++ 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;
+  }
+}
--- a/components/hero-section.css
+++ 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;
+    }
+}
--- a/components/hero-section.tsx
+++ 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(
+        <>
+            <div className="hero-main flex flex-wrap">
+                <div className="grid grid-cols-1 grid-rows-1 p-4 w-1/2">
+                    <img className="not-last-of-type:col-start-1 row-start-1 w-full h-auto object-cover hero-picture" src={heroPictureOne.src}/>
+                    <img className="col-start-1 row-start-1 self-end justify-end hero-picture rotate-20" src={heroPictureTwo.src}/>
+                    <img className="col-start-1 row-start-1 self-end justify-end hero-picture rotate-40" src={heroPictureThree.src}/>
+                </div>
+                <div className="hero-right">
+                    <h1 className="mb-4 text-5xl font-bold text-heading md:text-6xl lg:text-7xl"><span className="text-transparent bg-clip-text bg-gradient-to-r bg-violet-800 from-sky-400">Sculpted Arc</span><br/> Web Solutions</h1>
+                    <p className="text-lg font-normal text-body lg:text-xl">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</p>
+                </div>
+            </div>
+        </>
+    )
+}
--- a/components/menubar.tsx
+++ 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<HTMLInputElement>(null);
+
+  const closeMobileMenu = () => {
+    if (menuToggleRef.current) {
+      menuToggleRef.current.checked = false;
+    }
+  };
+
+  const handleLinkClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    closeMobileMenu();
+    event.currentTarget.blur();
+  };
+
+  return (
+    <nav className="menubar">
+      <div className="menubar-content">
+        <div className="desktop-menu">
+          {menuLinks.map((link) => (
+            <a key={link.label} href={link.href} className="menu-item">
+              {link.label}
+            </a>
+          ))}
+        </div>
+        <div className="mobile-menu">
+          <input
+            ref={menuToggleRef}
+            type="checkbox"
+            id="mobile-nav-toggle"
+            className="mobile-menu-checkbox"
+          />
+          <label
+            htmlFor="mobile-nav-toggle"
+            className="burger-icon"
+            aria-controls="mobile-nav-menu"
+          >
+            <span className="burger-icon-menu" aria-hidden="true">
+              &#9776;
+            </span>
+            <span className="burger-icon-close" aria-hidden="true">
+              &times;
+            </span>
+          </label>
+          <div id="mobile-nav-menu" className="mobile-dropdown">
+            <div className="mobile-dropdown-inner">
+              {menuLinks.map((link) => (
+                <a
+                  key={link.label}
+                  href={link.href}
+                  className="menu-item mobile-dropdown-item"
+                  onClick={handleLinkClick}
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -0,0 +1 @@
+
--- a/components/ui/content-cards.tsx
+++ 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 (
+        <>
+            <img src={buttonProps.src}></img>
+            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
+                {buttonProps.button_text}
+            </button>
+        </>
+    )
+}