Another window?

src/app/globals.css

@@ -13,11 +13,35 @@
     animation-timing-function: linear(0.2, 0.8, 1);
   }
   50% {
-    transform: translate(0px, -280px) scale(1.18, 0.9);
+    transform: translate(0px, -180px) scale(1.18, 0.9);
     animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
   }
 }
 
+@keyframes window-popup {
+  0% {
+    transform: scale(0, 0.03);
+  }
+  40% {
+    transform: scale(1, 0.03);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes window-popdown {
+  0% {
+    transform: scale(1, 1);
+  }
+  60% {
+    transform: scale(1, 0.03);
+  }
+  100% {
+    transform: scale(0, 0.03);
+  }
+}
+
 h2 {
   @apply text-2xl font-bold
 }

src/app/page.tsx

@@ -4,12 +4,14 @@ import { Sosmed } from "@/components/sosmed";
 import HomeText from "@/components/home-text.mdx"
 
 import Link from "next/link";
-import { FakeWindow } from "@/components/windows";
+import { FakeWindow, HomeWindows } from "@/components/windows";
+import Taskbar from "@/components/taskbar";
 
 export default function Home() {
-  return (
+  return (<>
     <main className="flex items-center pt-16 md:pt-24 pb-12 px-8 md:px-0">
       <FakeWindow windowText="Homepage">
+        <HomeWindows />
         <header className="text-center mb-8">
           <h1 className="font-bold text-3xl leading-normal">
             Nonszy Work<span className="text-primary">space</span>
@@ -28,8 +30,11 @@ export default function Home() {
         </section>
         <footer className="mt-20 text-center">
           <p>&copy; <span className="text-sm">2024-2025 Nomi Nonsense</span></p>
+          <p className="text-sm">
+            <Link href={"/terms"} className="text-primary underline">Terms and conditions</Link> and <Link href={"/privacy"} className="text-primary underline">Privacy Policy</Link>
+          </p>
         </footer>
       </FakeWindow>
     </main>
-  );
+  </>);
 }

src/app/privacy/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+
+import PrivacyPolicy from "@/components/texts/privacy-policy.mdx"
+import { SimpleArticle } from "@/components/page-template";
+
+export const metadata: Metadata = {
+  title: "Privacy Policy",
+};
+
+export default function Terms () {
+  return (
+    <SimpleArticle>
+      <PrivacyPolicy />
+    </SimpleArticle>
+  )
+}

src/app/terms/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+
+import TermsAndConditions from "@/components/texts/terms-and-condition.mdx"
+import { SimpleArticle } from "@/components/page-template";
+
+export const metadata: Metadata = {
+  title: "Terms and conditions",
+};
+
+export default function Terms () {
+  return (
+    <SimpleArticle>
+      <TermsAndConditions />
+    </SimpleArticle>
+  )
+}

src/components/button.tsx

@@ -0,0 +1,13 @@
+import clsx from "clsx"
+
+export function ButtonPrimary({
+  className,
+  ...props
+}: React.ComponentProps<"button">) {
+  return (
+    <button
+      className={clsx("bg-primary text-background px-3 py-2 items-center inline-flex gap-2 justify-center flex-row", className)}
+      {...props}
+    />
+  )
+}

src/components/client-windows.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { Icon } from "@iconify/react";
+import clsx from "clsx";
+import { useState, useRef, useEffect } from "react";
+
+export const FakeRelativeWindow = ({
+  windowText,
+  className,
+  draggable,
+  withAnim,
+  children
+}: {
+  windowText: string,
+  className?: string,
+  draggable?: boolean,
+  withAnim?: boolean,
+  children: React.ReactNode
+}) => {
+  const [isMinimized, setMinimize] = useState(false);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [animation, setAnimation] = useState({
+    window: "animate-window-popup",
+    content: "animate-[fade-in-half_1s]"
+  });
+  const popupRef = useRef<HTMLDivElement>(null);
+  const pos = useRef({
+    dragging: false,
+    mouseX: 0,
+    mouseY: 0,
+    x: 0,
+    y: 0
+  });
+
+  useEffect(() => {
+    if (!withAnim) return;
+    const node = popupRef.current;
+    if (!node) return;
+    const observer = new window.IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setAnimation({
+            window: "animate-window-popup",
+            content: "animate-[fade-in-half_1s]"
+          });
+        } else {
+          setAnimation({
+            window: "scale-x-0 scale-y-[0.03] animate-window-popdown",
+            content: "animate-[fade-out-half_1s]"
+          });
+        }
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  const toggleMinimize = () => setMinimize(!isMinimized);
+
+  const onMouseDown = (e: React.MouseEvent) => {
+    if (!draggable) return;
+    if (popupRef.current) {
+      pos.current.dragging = true;
+      pos.current.mouseX = e.clientX;
+      pos.current.mouseY = e.clientY;
+      pos.current.x = offset.x;
+      pos.current.y = offset.y;
+      document.body.style.userSelect = "none";
+    }
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+  };
+
+  const onMouseUp = () => {
+    pos.current.dragging = false;
+    document.body.style.userSelect = "";
+    window.removeEventListener("mousemove", onMouseMove);
+    window.removeEventListener("mouseup", onMouseUp);
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (pos.current.dragging && popupRef.current) {
+      const dx = e.clientX - pos.current.mouseX;
+      const dy = e.clientY - pos.current.mouseY;
+      const newX = pos.current.x + dx;
+      const newY = pos.current.y + dy;
+      popupRef.current.style.transform = `translate(${newX}px, ${newY}px)`;
+      setOffset({ x: newX, y: newY });
+    }
+  };
+
+  return (
+    <div className={clsx("absolute hidden lg:block", className)}>
+      <div className={clsx("mx-auto md:border bg-background border-primary", withAnim && animation.window)} ref={popupRef}>
+        <div
+          className="hidden md:flex bg-primary p-2 justify-between text-background windowbar"
+          onMouseDown={onMouseDown}
+        >
+          <div className="ms-1 pointer-events-none">
+            {windowText}
+          </div>
+          <div className="flex gap-2">
+            <button className="bg-primary border border-[#FFA826] border-outset p-1" onClick={toggleMinimize}><Icon icon="lucide:minus"/></button>
+            <button className="bg-primary border border-[#FFA826] border-outset p-1"><Icon icon="lucide:x"/></button>
+          </div>
+        </div>
+        <div className={clsx("m-1 border border-primary", isMinimized ? "h-0 overflow-y-clip" : "h-fit")}>
+          <div className={clsx("md:p-4", withAnim && animation.content)}>
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/home-text.mdx

@@ -1,6 +1,6 @@
 import Image from "next/image"
 import Link from "next/link";
-import { FloatingLabel } from "./floating-label";
+import { FloatingLabel } from "@/components/floating-label";
 
 Welcome!
 
@@ -8,20 +8,6 @@ This is our cozy little corner of the internet where we run a bunch of services
 
 We've got tools and resources for us but some we provide it for you, stuff that just works and doesn't burn our wallet.
 
-<div className="relative">
-    <Link href="https://x.com/JoelGuerraC/status/1287088236171603969/photo/1" target="_blank">
-        <Image
-            className="hidden lg:inline-block absolute -left-72 -bottom-32 animate-silly-bouncing"
-            alt="Nola"
-            src="/images/coral-a1.png"
-            width={200}
-            height={200}
-            quality={10}
-            unoptimized
-        />
-    </Link>
-</div>
-
 ## About Me
 
 Nonszy (Nomi Nonsz or Nonszy whatever, some ppl know my real name).
@@ -59,19 +45,6 @@ We aspire to blend creativity and technical mastery to shape products that empow
 - Build the ability to design and develop web applications that are responsive, intuitive, fast, and visually compelling, with a strong focus on user experience and modern interface principles.
 - Integrate artificial intelligence into digital products, creating smart, helpful, and engaging features that elevate the overall value and interactivity of applications.
 
-<div className="relative">
-    <FloatingLabel placeholder="This is Nola, my OC :3">
-        <Image
-            className="hidden lg:inline-block absolute -right-80"
-            alt="Nola"
-            src="/images/nola.png"
-            width={250}
-            height={250}
-            unoptimized
-        />
-    </FloatingLabel>
-</div>
-
 ## Why Nonsense
 
 Nomi or Nonsense, it's not that we don't understand the each other or its uses, it's just a word you've chosen to dismiss our existence.

src/components/landing-image.tsx

@@ -2,7 +2,7 @@ import Image from "next/image"
 import { FloatingLabel } from "./floating-label"
 
 export const LandingImage = () => (
-  <FloatingLabel placeholder="Coral Glasses ❤️. Warning: not my work, character by JoelG">
+  <FloatingLabel placeholder="Coral Glasses ❤️. Warning: not my work, character by JoelG, See terms and conditions">
     <Image
       className="mb-8 mx-auto"
       alt="Coral <3"

src/components/page-template.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link"
+import { ButtonPrimary } from "./button"
+import { Icon } from "@iconify/react"
+
+export const SimpleArticle = ({
+  children
+}: {
+  children: React.ReactNode
+}) => (
+  <main className="flex items-center pt-16 md:pt-24 pb-12 px-8 md:px-0">
+    <div className="mx-auto w-[480px] md:w-[520px]">
+      <Link href={"../"}>
+        <ButtonPrimary className="mb-8">
+          <Icon icon={"lucide:chevron-left"} />
+          Back
+        </ButtonPrimary>
+      </Link>
+      <article className="space-y-6 [&_p]:leading-relaxed relative [&_h1]:text-2xl [&_h2]:text-xl">
+        {children}
+      </article>
+    </div>
+  </main>
+)

src/components/sosmed.tsx

@@ -37,12 +37,11 @@ export const Sosmed = () => {
   return (
     <div className="flex justify-center gap-4 mb-10">
       {sosmeds.map((sosmed) => (
-        <FloatingLabel placeholder={sosmed.name}>
+        <FloatingLabel key={sosmed.name} placeholder={sosmed.name}>
           <Link
             className="grid items-center justify-center border border-primary w-[48px] xs:w-[54px] h-auto aspect-square transition-[transform] duration-75 hover:-translate-y-1 hover:scale-105"
             href={sosmed.url}
             target="_blank"
-            key={sosmed.name}
           >
             <Icon icon={sosmed.icon} className={`text-primary text-4xl ${sosmed.size}`} />
           </Link>

src/components/taskbar.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+const Taskbar = () => {
+  return (
+    <div className="fixed bg-background p-2 border-t border-primary bottom-0 left-0 w-screen inline-flex gap-3 items-center">
+      <div className="px-4 font-bold">
+        NolaOS
+      </div>
+      <div className="flex gap-2">
+        <button className="border border-primary px-3 py-2">
+          Vision & Mission
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default Taskbar;

src/components/texts/privacy-policy.mdx

@@ -0,0 +1,3 @@
+# Privacy Policy
+
+This website ("nonszy.space") fully respects the privacy of its visitors. This document explains how we handle visitor information. The short answer is: **we do not collect, track, or store your personal information**.

src/components/texts/terms-and-condition.mdx

@@ -0,0 +1,46 @@
+# Terms and Conditions
+
+## 1. Acceptance of Terms
+
+By accessing and using this website (“nonszy.space”), you agree to be bound by these Terms and Conditions. If you do not agree with any part of these Terms and Conditions, you are advised not to use this Site.
+
+## 2. Third Party Intellectual Property Rights
+
+Some materials on this Site, **such as the Coral Glasses character, or the ENA Dream BBQ game and ENA Series, are the property of <a href='https://joelgc.com' className='text-primary underline'>JoelG</a>** and are used under fair use. The Site owner does not claim any rights to these materials. All copyrights and trademarks remain the property of their respective owners.
+
+## 3. Content Ownership and Copyright
+
+Some materials on this Site, including but not limited to **applications, code, digital works, 2D illustrations, 3D works, designs, and OC (Original Characters) such as Nola, that owned by the site owner**, are protected by copyright and intellectual property rights in accordance with applicable laws and regulations.
+
+- Content may only be used for personal and non-commercial purposes unless written permission is obtained.
+- It is prohibited to reproduce, modify, distribute, sell, or utilize the content on this Site for commercial purposes without written permission.
+
+## 4. Prohibited Uses for AI Training
+
+All content on this Site is **strictly prohibited from being used for training, developing, or improving artificial intelligence (AI) models**, including but not limited to:
+
+- Machine learning, deep learning, or AI datasets in any form.
+- Third-party services that collect data for the purpose of training AI models.
+- Platforms or automated systems that copy, archive, or process content for AI analysis.
+
+Any violation of these terms may be subject to legal action in accordance with applicable copyright and intellectual property laws.
+
+## 5. User Responsibility
+
+Users are prohibited from:
+
+- Hacking, data mining, or other actions that may harm the Site.
+- Uploading or distributing harmful material, including malware or illegal content.
+- Using the Site to violate applicable laws or regulations.
+
+## 6. External Links
+
+This Site may contain links to third-party sites. The Site owner is not responsible for the content, policies, or practices of such external sites.
+
+## 7. Disclaimer
+
+The Site is provided “as is” without warranty of any kind. The Site owner is not responsible for any direct or indirect losses resulting from the use of the Site.
+
+## 8. Changes to Terms and Conditions
+
+These Terms and Conditions are subject to change at any time without prior notice. The latest version will be published on this page and will be effective from the date of publication.

src/components/windows.tsx

@@ -1,5 +1,8 @@
 import { Icon } from "@iconify/react";
 import { FloatingLabel } from "@/components/floating-label";
+import { FakeRelativeWindow } from "./client-windows";
+import Image from "next/image"
+import Link from "next/link";
 
 export const FakeWindow = ({
   windowText, children
@@ -8,6 +11,7 @@ export const FakeWindow = ({
   children: React.ReactNode
 }) => (
   <div className="mx-auto w-[480px] md:w-[520px] md:border border-primary">
+    <div className="p-1 pb-0 border-primary">
       <div className="hidden md:flex bg-primary p-2 justify-between text-background">
         <div className="ms-1 pointer-events-none">
           {windowText}
@@ -19,8 +23,61 @@ export const FakeWindow = ({
           </div>
         </FloatingLabel>
       </div>
+    </div>
+    <div className="m-1 border border-primary">
       <div className="md:p-8">
         {children}
       </div>
     </div>
+  </div>
+)
+
+export const HomeWindows = () => (
+  <div className="relative">
+    <FakeRelativeWindow windowText="nola.png" className='-right-[90%] top-[1300px] z-20'>
+      <FloatingLabel placeholder="This is Nola, my OC :3">
+        <Image
+          className=""
+          alt="Nola"
+          src="/images/nola.png"
+          width={250}
+          height={250}
+          unoptimized
+        />
+      </FloatingLabel>
+    </FakeRelativeWindow>
+    <FakeRelativeWindow windowText="bouncing-coral.exe" className='-left-[100%] top-[360px] z-20'>
+      <Link href="https://x.com/JoelGuerraC/status/1287088236171603969/photo/1" target="_blank">
+        <Image
+          className="animate-silly-bouncing"
+          alt="Bounce Coral"
+          src="/images/coral-a1.png"
+          width={240}
+          height={240}
+          quality={10}
+          unoptimized
+        />
+      </Link>
+    </FakeRelativeWindow>
+    <FakeRelativeWindow windowText="coral-1.exe" className='-left-[70%] top-[680px] z-10'>
+      <Image
+        alt="Coral 1"
+        src="https://media.tenor.com/J-gqkU0R8VgAAAAi/coral-glasses-ena-dream-bbq.gif"
+        width={200}
+        height={200}
+        quality={10}
+        unoptimized
+      />
+    </FakeRelativeWindow>
+    <FakeRelativeWindow windowText="coral-cupcake.mkv" className='-right-[110%] top-[680px] z-10'>
+      <Image
+        alt="Coral Cupcake"
+        src="https://media1.tenor.com/m/N5K-4AWj8QcAAAAC/coral-glasses-cupcake.gif"
+        width={320}
+        height={200}
+        quality={10}
+        unoptimized
+      />
+    </FakeRelativeWindow>
+  </div>
 )

tailwind.config.ts

@@ -24,6 +24,18 @@ const config: Config = {
     },
     animation: {
       "silly-bouncing": 'silly-bounce 0.8s infinite',
+      'window-popup': 'window-popup 1s',
+      'window-popdown': 'window-popdown 1s'
+    },
+    keyframes: {
+      "fade-in-half": {
+        '0%, 50%': { opacity: "0" },
+        '100%': { opacity: '1' },
+      },
+      "fade-out-half": {
+        '0%, 50%': { opacity: "1" },
+        '100%': { opacity: '0' },
+      }
     }
   },
   plugins: [],