Release version 1.1.0

CHANGELOG.md

@@ -1,5 +1,34 @@
 # vision-pro-ui
 
+## 1.1.0
+
+### Minor Changes
+
+- - Added new constants for window properties.
+  - Introduced MemoriesView and AppStorePage components.
+  - Enhanced landing page with new navigation and layout features.
+  - Improved animations and transitions in various components.
+
+## 1.0.2
+
+### Patch Changes
+
+- add apps and navigation, refined components & animations
+
+## 1.0.1
+
+### Patch Changes
+
+- f159553: Converted honeycomb layout to use context value instead of prop drilling. Optimized components
+
+## 1.0.0
+
+### Major Changes
+
+- 0a0b87f: - Brand new landing page
+  - Brand new VisionOS honeycomb home layout (mobile compatible)
+  - Optimized few components
+
 ## 0.1.7
 
 ### Patch Changes

app/(landing)/constants.ts

@@ -0,0 +1,18 @@
+import { WindowProps } from "@/components/core/window";
+
+export const defaultWindowClassName =
+  "h-[600px] min-h-[400px] w-[calc(min(85vw,1024px))]";
+export const defaultWindowProps: Partial<WindowProps> = {
+  scroll: true,
+  initial: {
+    opacity: 0,
+  },
+  animate: {
+    opacity: 1,
+  },
+  transition: {
+    duration: 0.35,
+  },
+  className: defaultWindowClassName,
+  controls: true,
+};

app/(landing)/layout.tsx

@@ -0,0 +1,13 @@
+import { HeroBackground } from "@/components/landing/hero-background";
+import { Cursor } from "@/components/core/cursor";
+
+function LandingLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Cursor />
+      <HeroBackground>{children}</HeroBackground>
+    </>
+  );
+}
+
+export default LandingLayout;

app/(landing)/page.tsx

@@ -0,0 +1,57 @@
+import {
+  Ornament,
+  OrnamentContentBase,
+  OrnamentContents,
+  OrnamentTab,
+  OrnamentTabs,
+} from "@/components/core/ornament";
+import { AppStoreIcon, EnvironmentsIcon, PeopleIcon } from "@/components/icons";
+import HomeView from "@/components/landing/home-view";
+import { Text } from "@/components/ui/typography";
+
+export const dynamic = "force-dynamic";
+
+function LandingPage() {
+  return (
+    <Ornament defaultTab="apps">
+      <OrnamentContents>
+        <OrnamentContentBase value="apps" key="apps">
+          <HomeView />
+        </OrnamentContentBase>
+        <OrnamentContentBase value="people" key="people">
+          <div className="text-center">
+            <Text variant="secondary" size="XLTitle2">
+              Coming Soon...
+            </Text>
+          </div>
+        </OrnamentContentBase>
+        <OrnamentContentBase value="environments" key="environments">
+          <div className="text-center">
+            <Text variant="secondary" size="XLTitle2">
+              Stay tuned...
+            </Text>
+          </div>
+        </OrnamentContentBase>
+      </OrnamentContents>
+      <OrnamentTabs>
+        <OrnamentTab
+          icon={<AppStoreIcon className="size-6" data-slot="icon" />}
+          label="Apps"
+          value="apps"
+        />
+        <OrnamentTab
+          icon={<PeopleIcon className="size-6" data-slot="icon" />}
+          label="People"
+          value="people"
+        />
+        <OrnamentTab
+          icon={<EnvironmentsIcon className="size-6" data-slot="icon" />}
+          label="Environments"
+          value="environments"
+        />
+      </OrnamentTabs>
+    </Ornament>
+  );
+}
+
+export default LandingPage;

components/landing/memories-view.tsx → app/(landing)/photos/memories-view.tsx

@@ -1,15 +1,18 @@
 "use client";
 
-import { NavigationBar, NavigationBarTitle } from "../core/navigation-bar";
-import { Button, ButtonGroup } from "../core/button";
-import { HeroDropdownMenu } from "./hero-dropdown-menu";
+import {
+  NavigationBar,
+  NavigationBarTitle,
+} from "../../../components/core/navigation-bar";
+import { Button, ButtonGroup } from "../../../components/core/button";
+import { HeroDropdownMenu } from "../../../components/landing/hero-dropdown-menu";
 import Image from "next/image";
 
-import { Text } from "../ui/typography";
+import { Text } from "../../../components/ui/typography";
 
 import forest from "@/public/assets/demo/forest.avif";
-import { AspectRatio } from "../ui/aspect-ratio";
-import { Toolbar } from "../core/toolbar";
+import { AspectRatio } from "../../../components/ui/aspect-ratio";
+import { Toolbar } from "../../../components/core/toolbar";
 import { useState } from "react";
 
 // const memories = [

app/(landing)/photos/page.tsx

@@ -0,0 +1,79 @@
+import {
+  Ornament,
+  OrnamentContent,
+  OrnamentContents,
+  OrnamentTab,
+  OrnamentTabs,
+} from "@/components/core/ornament";
+import { MemoriesToolbar, MemoriesView } from "./memories-view";
+import { IconPhotoFilled } from "@tabler/icons-react";
+import { PencilRulerIcon, Settings } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { defaultWindowProps } from "../constants";
+import {
+  NavigationBar,
+  NavigationBarTitle,
+} from "@/components/core/navigation-bar";
+import { ButtonGroup } from "@/components/core/button";
+import { HeroDropdownMenu } from "@/components/landing/hero-dropdown-menu";
+
+function PhotosPage() {
+  return (
+    <Ornament defaultTab="memories">
+      <OrnamentContents contentClassName={cn("h-[32vw] max-h-[640px]")}>
+        <OrnamentContent
+          {...defaultWindowProps}
+          value="memories"
+          key="memories"
+          FooterComponent={MemoriesToolbar}
+          rootClassName="[--window-controls-bottom:-80px]"
+        >
+          <MemoriesView />
+        </OrnamentContent>
+        <OrnamentContent
+          value="collections"
+          key="collections"
+          {...defaultWindowProps}
+        >
+          <NavigationBar>
+            <div />
+            <NavigationBarTitle>Collections</NavigationBarTitle>
+            <ButtonGroup>
+              <HeroDropdownMenu />
+            </ButtonGroup>
+          </NavigationBar>
+          <div className="h-[600px]" />
+        </OrnamentContent>
+        <OrnamentContent value="spacial" key="spacial" {...defaultWindowProps}>
+          <NavigationBar>
+            <div />
+            <NavigationBarTitle>Spacial</NavigationBarTitle>
+            <ButtonGroup>
+              <HeroDropdownMenu />
+            </ButtonGroup>
+          </NavigationBar>
+          <div className="h-[600px]" />
+        </OrnamentContent>
+      </OrnamentContents>
+      <OrnamentTabs>
+        <OrnamentTab
+          icon={<IconPhotoFilled data-slot="icon" />}
+          label="Memories"
+          value="memories"
+        />
+        <OrnamentTab
+          icon={<PencilRulerIcon className="size-6" data-slot="icon" />}
+          label="Collections"
+          value="collections"
+        />
+        <OrnamentTab
+          icon={<Settings data-slot="icon" />}
+          label="Spacial"
+          value="spacial"
+        />
+      </OrnamentTabs>
+    </Ornament>
+  );
+}
+
+export default PhotosPage;

app/(landing)/settings/layout.tsx

@@ -0,0 +1,137 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarInput,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/components/core/sidebar";
+
+import {
+  AppStoreIcon,
+  CogIcon,
+  EnvironmentsIcon,
+  PeopleIcon,
+} from "@/components/icons";
+import { cn } from "@/lib/utils";
+import {
+  IconBellRingingFilled,
+  IconHourglassHigh,
+  IconMoonFilled,
+} from "@tabler/icons-react";
+import { Window } from "@/components/core/window";
+import { defaultWindowProps } from "../constants";
+
+const section_1 = [
+  {
+    title: "General",
+    icon: CogIcon,
+    gradient: "from-gray-400 to-gray-600",
+    isActive: true,
+  },
+  {
+    title: "Apps",
+    icon: AppStoreIcon,
+    gradient: "from-sky-500 to-blue-700",
+  },
+  {
+    title: "People",
+    icon: PeopleIcon,
+    gradient: "from-green-400 to-green-600",
+  },
+  {
+    title: "Environments",
+    icon: EnvironmentsIcon,
+    gradient: "from-indigo-400 to-indigo-800",
+  },
+];
+
+const section_2 = [
+  {
+    title: "Notifications",
+    icon: IconBellRingingFilled,
+    gradient: "from-rose-400 to-red-600",
+  },
+  {
+    title: "Focus",
+    href: "#",
+    icon: IconMoonFilled,
+    gradient: "from-indigo-400 to-indigo-800",
+  },
+  {
+    title: "Screen Time",
+    href: "#",
+    icon: IconHourglassHigh,
+    gradient: "from-indigo-400 to-indigo-800",
+  },
+];
+
+export default function SettingsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <Window {...defaultWindowProps}>
+      <SidebarProvider>
+        <Sidebar>
+          <SidebarHeader>
+            <SidebarInput placeholder="Search" />
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {section_1.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton
+                        className="gap-4 [&_[data-slot='icon']]:opacity-75"
+                        isActive={item.isActive}
+                      >
+                        <item.icon data-slot="icon" />
+                        <span
+                          className={cn(
+                            "absolute left-3.5 top-2 z-[-1] size-8 rounded-full",
+                            "bg-gradient-to-b",
+                            item.gradient,
+                          )}
+                        />
+                        <span>{item.title}</span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+            <SidebarGroup className="pt-0">
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {section_2.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton className="gap-4 [&_[data-slot='icon']]:opacity-75">
+                        <item.icon data-slot="icon" />
+                        <span
+                          className={cn(
+                            "absolute left-3.5 top-2 z-[-1] size-8 rounded-full",
+                            "bg-gradient-to-b",
+                            item.gradient,
+                          )}
+                        />
+                        <span>{item.title}</span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
+        <main className="relative w-full">{children}</main>
+      </SidebarProvider>
+    </Window>
+  );
+}

app/(landing)/settings/page.tsx

@@ -0,0 +1,24 @@
+import {
+  NavigationBar,
+  NavigationBarTitle,
+} from "@/components/core/navigation-bar";
+import { SidebarTrigger } from "@/components/core/sidebar";
+
+export const dynamic = "force-dynamic";
+
+export default function Settings() {
+  //* Artifical delay
+  // await new Promise((resolve) => setTimeout(resolve, 600));
+  return (
+    <>
+      <NavigationBar size="sm" className="sticky rounded-tl-none px-3.5">
+        <SidebarTrigger />
+        <NavigationBarTitle variant="center">Settings</NavigationBarTitle>
+      </NavigationBar>
+      <div className="relative my-4 h-[200px] bg-red-500/20">Main Content</div>
+      <div className="relative my-4 h-[200px] bg-red-500/20">Main Content</div>
+      <div className="relative my-4 h-[200px] bg-red-500/20">Main Content</div>
+      <div className="relative my-4 h-[200px] bg-red-500/20">Main Content</div>
+    </>
+  );
+}