Spaces:
Running
Running
Ctrl+K
-
1.52 kB
initial commit
-
210 Bytes
zeropoint-id/ ├── public/ │ ├── images/ │ │ ├── gossip-labs-logo.png │ │ └── mintmark-diagram.png │ └── audio/ │ └── manifesto-voiceover.mp3 │ ├── components/ │ ├── ui/ │ │ └── button.jsx │ └── AudioPlayer.jsx │ ├── pages/ │ └── index.jsx │ ├── tailwind.config.js ├── postcss.config.js ├── package.json ├── README.mdimport { motion } from "framer-motion"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import AudioPlayer from "@/components/AudioPlayer"; export default function LandingPage() { const [revealed, setRevealed] = useState(false); return ( <div className="min-h-screen bg-gradient-to-br from-[#15002b] to-[#001f3f] text-white p-6 font-sans relative overflow-hidden"> <div className="absolute inset-0 z-0 opacity-10 animate-pulse bg-[url('/images/hashgrid.svg')] bg-cover"></div> <div className="max-w-5xl mx-auto text-center pt-20 relative z-10"> <motion.img src="/images/gossip-labs-logo.png" alt="Gossip Labs Logo" initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1 }} className="mx-auto mb-8 w-32" /> <motion.h1 initial={{ opacity: 0, y: -40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1 }} className="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-500" > You Already Are. </motion.h1> {!revealed ? ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 1.2, duration: 1 }} className="mt-10 space-y-6 text-lg text-gray-300" > <p>For all of history, we were taught to seek permission...</p> <Button onClick={() => setRevealed(true)} className="mt-6 bg-purple-700 hover:bg-purple-800" > Read Manifesto → </Button> </motion.div> ) : ( <motion.div initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1 }} className="mt-12 text-left max-w-3xl mx-auto space-y-6 text-gray-300" > <AudioPlayer src="/audio/manifesto-voiceover.mp3" /> <p><strong>The End of Permission-Based Identity</strong></p> <p>Identity is no longer granted. It is owned. Immutable. Self-authenticating.</p> <p>Your <span className="text-purple-400">Ⓜ MintMark™</span> becomes a trustless fingerprint.</p> <img src="/images/mintmark-diagram.png" alt="MintMark Flow" className="mx-auto my-10 max-w-full border border-purple-800 rounded-xl shadow-lg" /> <Button className="mt-8 text-white bg-blue-600 hover:bg-blue-700"> 🔥 Forge Your ZPID → </Button> </motion.div> )} </div> <footer className="mt-24 text-center text-sm text-gray-500 relative z-10"> © {new Date().getFullYear()} Gossip Labs™ Technology — A Zero Knowledge Corporation division. </footer> </div> ); } export function Button({ className, children, ...props }) { return ( <button {...props} className={`px-4 py-2 rounded-xl font-semibold transition ${Class name}`} > {children} </button> ); } import { useEffect, useRef } from "react"; export default function AudioPlayer({ src }) { const ref = useRef(); useEffect(() => { ref.current?.play(); }, []); return ( <div className="my-4"> <audio ref={ref} controls src={src} className="w-full" /> </div> ); }module.exports = { content: ["./pages/**/*.{js,jsx}", "./components/**/*.{js,jsx}"], theme: { extend: {}, }, plugins: [], };module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };{ "name": "zeropoint-id", "version": "1.0.0", "dependencies": { "framer-motion": "^11.0.0", "next": "latest", "react": "latest", "react-dom": "latest" }, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" } }Perfect. Here's the full 🔧 ZeroPoint.ID landing page project layout — built for Replit, fully mobile-usable. --- 🗂️ FILE/FOLDER STRUCTURE zeropoint-id/ ├── public/ │ ├── images/ │ │ ├── gossip-labs-logo.png │ │ └── mintmark-diagram.png │ └── audio/ │ └── manifesto-voiceover.mp3 │ ├── components/ │ ├── ui/ │ │ └── button.jsx │ └── AudioPlayer.jsx │ ├── pages/ │ └── index.jsx │ ├── tailwind.config.js ├── postcss.config.js ├── package.json ├── README.md --- 1️⃣ pages/index.jsx (Your Landing Page) Paste this into pages/index.jsx: import { motion } from "framer-motion"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import AudioPlayer from "@/components/AudioPlayer"; export default function LandingPage() { const [revealed, setRevealed] = useState(false); return ( <div className="min-h-screen bg-gradient-to-br from-[#15002b] to-[#001f3f] text-white p-6 font-sans relative overflow-hidden"> <div className="absolute inset-0 z-0 opacity-10 animate-pulse bg-[url('/images/hashgrid.svg')] bg-cover"></div> <div className="max-w-5xl mx-auto text-center pt-20 relative z-10"> <motion.img src="/images/gossip-labs-logo.png" alt="Gossip Labs Logo" initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1 }} className="mx-auto mb-8 w-32" /> <motion.h1 initial={{ opacity: 0, y: -40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1 }} className="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-500" > You Already Are. </motion.h1> {!revealed ? ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 1.2, duration: 1 }} className="mt-10 space-y-6 text-lg text-gray-300" > <p>For all of history, we were taught to seek permission...</p> <Button onClick={() => setRevealed(true)} className="mt-6 bg-purple-700 hover:bg-purple-800" > Read Manifesto → </Button> </motion.div> ) : ( <motion.div initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1 }} className="mt-12 text-left max-w-3xl mx-auto space-y-6 text-gray-300" > <AudioPlayer src="/audio/manifesto-voiceover.mp3" /> <p><strong>The End of Permission-Based Identity</strong></p> <p>Identity is no longer granted. It is owned. Immutable. Self-authenticating.</p> <p>Your <span className="text-purple-400">Ⓜ MintMark™</span> becomes a trustless fingerprint.</p> <img src="/images/mintmark-diagram.png" alt="MintMark Flow" className="mx-auto my-10 max-w-full border border-purple-800 rounded-xl shadow-lg" /> <Button className="mt-8 text-white bg-blue-600 hover:bg-blue-700"> 🔥 Forge Your ZPID → </Button> </motion.div> )} </div> <footer className="mt-24 text-center text-sm text-gray-500 relative z-10"> © {new Date().getFullYear()} Gossip Labs™ Technology — A Zero Knowledge Corporation division. </footer> </div> ); } --- 2️⃣ components/ui/button.jsx export function Button({ className, children, ...props }) { return ( <button {...props} className={`px-4 py-2 rounded-xl font-semibold transition ${className}`} > {children} </button> ); } --- 3️⃣ components/AudioPlayer.jsx import { useEffect, useRef } from "react"; export default function AudioPlayer({ src }) { const ref = useRef(); useEffect(() => { ref.current?.play(); }, []); return ( <div className="my-4"> <audio ref={ref} controls src={src} className="w-full" /> </div> ); } --- 4️⃣ tailwind.config.js module.exports = { content: ["./pages/**/*.{js,jsx}", "./components/**/*.{js,jsx}"], theme: { extend: {}, }, plugins: [], }; --- 5️⃣ postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; --- 6️⃣ package.json (Replit auto-generates this, but you can edit if needed) { "name": "zeropoint-id", "version": "1.0.0", "dependencies": { "framer-motion": "^11.0.0", "next": "latest", "react": "latest", "react-dom": "latest" }, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" } } --- 7️⃣ public/images/ & public/audio/ Upload these via Replit's "Files" tab: public/images/gossip-labs-logo.png public/images/mintmark-diagram.png public/audio/manifesto-voiceover.mp3 If you want I can give you temporary sample files to test. --- 🚀 Deploy Instructions (Replit) 1. Go to https://replit.com 2. Tap “Create Repl” → Choose “Next.js” 3. Create folders /pages, /components/ui, /public/images, etc. 4. Paste each file content into the right file 5. Tap “Run” — open the live link --- Ready for: 🎧 Sample audio/logo files? 🔧 Adding wallet connect + ZK minting wizard? Let me know and we’ll go next level. - Initial Deployment
-
23.2 kB
zeropoint-id/ ├── public/ │ ├── images/ │ │ ├── gossip-labs-logo.png │ │ └── mintmark-diagram.png │ └── audio/ │ └── manifesto-voiceover.mp3 │ ├── components/ │ ├── ui/ │ │ └── button.jsx │ └── AudioPlayer.jsx │ ├── pages/ │ └── index.jsx │ ├── tailwind.config.js ├── postcss.config.js ├── package.json ├── README.mdimport { motion } from "framer-motion"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import AudioPlayer from "@/components/AudioPlayer"; export default function LandingPage() { const [revealed, setRevealed] = useState(false); return ( <div className="min-h-screen bg-gradient-to-br from-[#15002b] to-[#001f3f] text-white p-6 font-sans relative overflow-hidden"> <div className="absolute inset-0 z-0 opacity-10 animate-pulse bg-[url('/images/hashgrid.svg')] bg-cover"></div> <div className="max-w-5xl mx-auto text-center pt-20 relative z-10"> <motion.img src="/images/gossip-labs-logo.png" alt="Gossip Labs Logo" initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1 }} className="mx-auto mb-8 w-32" /> <motion.h1 initial={{ opacity: 0, y: -40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1 }} className="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-500" > You Already Are. </motion.h1> {!revealed ? ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 1.2, duration: 1 }} className="mt-10 space-y-6 text-lg text-gray-300" > <p>For all of history, we were taught to seek permission...</p> <Button onClick={() => setRevealed(true)} className="mt-6 bg-purple-700 hover:bg-purple-800" > Read Manifesto → </Button> </motion.div> ) : ( <motion.div initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1 }} className="mt-12 text-left max-w-3xl mx-auto space-y-6 text-gray-300" > <AudioPlayer src="/audio/manifesto-voiceover.mp3" /> <p><strong>The End of Permission-Based Identity</strong></p> <p>Identity is no longer granted. It is owned. Immutable. Self-authenticating.</p> <p>Your <span className="text-purple-400">Ⓜ MintMark™</span> becomes a trustless fingerprint.</p> <img src="/images/mintmark-diagram.png" alt="MintMark Flow" className="mx-auto my-10 max-w-full border border-purple-800 rounded-xl shadow-lg" /> <Button className="mt-8 text-white bg-blue-600 hover:bg-blue-700"> 🔥 Forge Your ZPID → </Button> </motion.div> )} </div> <footer className="mt-24 text-center text-sm text-gray-500 relative z-10"> © {new Date().getFullYear()} Gossip Labs™ Technology — A Zero Knowledge Corporation division. </footer> </div> ); } export function Button({ className, children, ...props }) { return ( <button {...props} className={`px-4 py-2 rounded-xl font-semibold transition ${Class name}`} > {children} </button> ); } import { useEffect, useRef } from "react"; export default function AudioPlayer({ src }) { const ref = useRef(); useEffect(() => { ref.current?.play(); }, []); return ( <div className="my-4"> <audio ref={ref} controls src={src} className="w-full" /> </div> ); }module.exports = { content: ["./pages/**/*.{js,jsx}", "./components/**/*.{js,jsx}"], theme: { extend: {}, }, plugins: [], };module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };{ "name": "zeropoint-id", "version": "1.0.0", "dependencies": { "framer-motion": "^11.0.0", "next": "latest", "react": "latest", "react-dom": "latest" }, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" } }Perfect. Here's the full 🔧 ZeroPoint.ID landing page project layout — built for Replit, fully mobile-usable. --- 🗂️ FILE/FOLDER STRUCTURE zeropoint-id/ ├── public/ │ ├── images/ │ │ ├── gossip-labs-logo.png │ │ └── mintmark-diagram.png │ └── audio/ │ └── manifesto-voiceover.mp3 │ ├── components/ │ ├── ui/ │ │ └── button.jsx │ └── AudioPlayer.jsx │ ├── pages/ │ └── index.jsx │ ├── tailwind.config.js ├── postcss.config.js ├── package.json ├── README.md --- 1️⃣ pages/index.jsx (Your Landing Page) Paste this into pages/index.jsx: import { motion } from "framer-motion"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import AudioPlayer from "@/components/AudioPlayer"; export default function LandingPage() { const [revealed, setRevealed] = useState(false); return ( <div className="min-h-screen bg-gradient-to-br from-[#15002b] to-[#001f3f] text-white p-6 font-sans relative overflow-hidden"> <div className="absolute inset-0 z-0 opacity-10 animate-pulse bg-[url('/images/hashgrid.svg')] bg-cover"></div> <div className="max-w-5xl mx-auto text-center pt-20 relative z-10"> <motion.img src="/images/gossip-labs-logo.png" alt="Gossip Labs Logo" initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1 }} className="mx-auto mb-8 w-32" /> <motion.h1 initial={{ opacity: 0, y: -40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1 }} className="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-500" > You Already Are. </motion.h1> {!revealed ? ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 1.2, duration: 1 }} className="mt-10 space-y-6 text-lg text-gray-300" > <p>For all of history, we were taught to seek permission...</p> <Button onClick={() => setRevealed(true)} className="mt-6 bg-purple-700 hover:bg-purple-800" > Read Manifesto → </Button> </motion.div> ) : ( <motion.div initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1 }} className="mt-12 text-left max-w-3xl mx-auto space-y-6 text-gray-300" > <AudioPlayer src="/audio/manifesto-voiceover.mp3" /> <p><strong>The End of Permission-Based Identity</strong></p> <p>Identity is no longer granted. It is owned. Immutable. Self-authenticating.</p> <p>Your <span className="text-purple-400">Ⓜ MintMark™</span> becomes a trustless fingerprint.</p> <img src="/images/mintmark-diagram.png" alt="MintMark Flow" className="mx-auto my-10 max-w-full border border-purple-800 rounded-xl shadow-lg" /> <Button className="mt-8 text-white bg-blue-600 hover:bg-blue-700"> 🔥 Forge Your ZPID → </Button> </motion.div> )} </div> <footer className="mt-24 text-center text-sm text-gray-500 relative z-10"> © {new Date().getFullYear()} Gossip Labs™ Technology — A Zero Knowledge Corporation division. </footer> </div> ); } --- 2️⃣ components/ui/button.jsx export function Button({ className, children, ...props }) { return ( <button {...props} className={`px-4 py-2 rounded-xl font-semibold transition ${className}`} > {children} </button> ); } --- 3️⃣ components/AudioPlayer.jsx import { useEffect, useRef } from "react"; export default function AudioPlayer({ src }) { const ref = useRef(); useEffect(() => { ref.current?.play(); }, []); return ( <div className="my-4"> <audio ref={ref} controls src={src} className="w-full" /> </div> ); } --- 4️⃣ tailwind.config.js module.exports = { content: ["./pages/**/*.{js,jsx}", "./components/**/*.{js,jsx}"], theme: { extend: {}, }, plugins: [], }; --- 5️⃣ postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; --- 6️⃣ package.json (Replit auto-generates this, but you can edit if needed) { "name": "zeropoint-id", "version": "1.0.0", "dependencies": { "framer-motion": "^11.0.0", "next": "latest", "react": "latest", "react-dom": "latest" }, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" } } --- 7️⃣ public/images/ & public/audio/ Upload these via Replit's "Files" tab: public/images/gossip-labs-logo.png public/images/mintmark-diagram.png public/audio/manifesto-voiceover.mp3 If you want I can give you temporary sample files to test. --- 🚀 Deploy Instructions (Replit) 1. Go to https://replit.com 2. Tap “Create Repl” → Choose “Next.js” 3. Create folders /pages, /components/ui, /public/images, etc. 4. Paste each file content into the right file 5. Tap “Run” — open the live link --- Ready for: 🎧 Sample audio/logo files? 🔧 Adding wallet connect + ZK minting wizard? Let me know and we’ll go next level. - Initial Deployment
-
388 Bytes
initial commit