Upload pages/index.js with huggingface_hub

pages/index.js

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import Head from 'next/head';
+import HomeView from '../components/views/HomeView';
+import MobileNav from '../components/layout/MobileNav';
+
+export default function HomePage() {
+  const [activeView, setActiveView] = useState('home');
+  const [isMobile, setIsMobile] = useState(true);
+
+  // Simple detection for demo purposes
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  return (
+    <>
+      <Head>
+        <title>Horoly | Luxury Watch Marketplace</title>
+        <meta name="description" content="Discover authenticated luxury timepieces" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <div className="min-h-screen bg-black relative">
+        {/* AnyCoder Attribution */}
+        <a 
+          href="https://huggingface.co/spaces/akhaliq/anycoder" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="fixed top-4 left-4 z-[60] text-xs text-white/30 hover:text-white/60 transition-colors font-mono"
+        >
+          Built with anycoder
+        </a>
+
+        {/* Main Content */}
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={activeView}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.2 }}
+            className="h-full"
+          >
+            {activeView === 'home' && <HomeView isMobile={isMobile} />}
+            {activeView !== 'home' && (
+              <div className="h-full flex items-center justify-center text-white/40">
+                <p>Coming Soon: {activeView.charAt(0).toUpperCase() + activeView.slice(1)}</p>
+              </div>
+            )}
+          </motion.div>
+        </AnimatePresence>
+
+        {/* Mobile Navigation (Only on mobile) */}
+        {isMobile && <MobileNav activeView={activeView} onViewChange={setActiveView} />}
+      </div>
+    </>
+  );
+}