diff --git a/dongle/app/globals.css b/dongle/app/globals.css index a2dc41e..e6fb99e 100644 --- a/dongle/app/globals.css +++ b/dongle/app/globals.css @@ -10,17 +10,35 @@ --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); + + --animate-fade-in: fade-in 0.5s ease-out; + --animate-fade-up: fade-up 0.5s ease-out; + + @keyframes fade-in { + from { opacity: 0; } + to { opacity: 1; } + } + @keyframes fade-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } + } } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; +@layer base { + .container { + @apply mx-auto px-4 sm:px-6 lg:px-8; } } body { background: var(--background); color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; + font-family: var(--font-sans); + overflow-x: hidden; } diff --git a/dongle/app/page.tsx b/dongle/app/page.tsx index dcce020..32629e7 100644 --- a/dongle/app/page.tsx +++ b/dongle/app/page.tsx @@ -1,107 +1,16 @@ -"use client"; - -import Image from "next/image"; -import { useWallet } from "@/context/wallet.context"; +import Hero from "@/components/landing/Hero"; +import Features from "@/components/landing/Features"; +import FeaturedProjects from "@/components/landing/FeaturedProjects"; +import CTA from "@/components/landing/CTA"; +import LayoutWrapper from "@/components/layout/LayoutWrapper"; export default function Home() { - const { isConnected, isConnecting, publicKey, connectWallet, disconnectWallet } = - useWallet(); - return ( -
- {/* Wallet Header */} -
- {isConnected ? ( -
-
- - {publicKey ? `${publicKey.substring(0, 6)}...${publicKey.substring(publicKey.length - 4)}` : "Connected"} - - -
- ) : ( - - )} -
- -
- Next.js logo -
-

- To get started, edit the page.tsx file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
-
- - Vercel logomark - Deploy Now - - - Documentation - -
-
-
+ + + + + + ); } diff --git a/dongle/components/landing/CTA.tsx b/dongle/components/landing/CTA.tsx new file mode 100644 index 0000000..7ae85b7 --- /dev/null +++ b/dongle/components/landing/CTA.tsx @@ -0,0 +1,39 @@ +import Link from "next/link"; + +export default function CTA() { + return ( +
+
+
+
+

+ Ready to list your application? +

+

+ Join the growing ecosystem of transparent dApps on Stellar. Get verified and build trust with your users today. +

+
+ + Submit Project + + + Learn More + +
+
+ + {/* Background pattern */} +
+
+
+
+
+
+ ); +} diff --git a/dongle/components/landing/FeaturedProjects.tsx b/dongle/components/landing/FeaturedProjects.tsx new file mode 100644 index 0000000..66202a6 --- /dev/null +++ b/dongle/components/landing/FeaturedProjects.tsx @@ -0,0 +1,86 @@ +import Link from "next/link"; + +const projects = [ + { + name: "Soroban Swap", + category: "DeFi / DEX", + description: "Next-generation automated market maker on Soroban.", + rating: 4.8, + reviews: 124, + }, + { + name: "Stellar Guardians", + category: "Gaming / NFT", + description: "A decentralized strategy game with on-chain assets.", + rating: 4.5, + reviews: 89, + }, + { + name: "Anchor Connect", + category: "Infrastructure", + description: "Seamless on/off ramp protocol for Stellar anchors.", + rating: 4.9, + reviews: 210, + }, +]; + +export default function FeaturedProjects() { + return ( +
+
+
+
+

Featured Projects

+

+ Discover the most trusted and highly-rated dApps on Stellar. +

+
+ + View all projects + + + + +
+ +
+ {projects.map((project, idx) => ( +
+
+
+ {project.name[0]} +
+
+
+ + {project.category} + +
+ + + + {project.rating} +
+
+

+ {project.name} +

+

+ {project.description} +

+
+ {project.reviews} reviews +
+
+ ))} +
+
+
+ ); +} diff --git a/dongle/components/landing/Features.tsx b/dongle/components/landing/Features.tsx new file mode 100644 index 0000000..f5d33f1 --- /dev/null +++ b/dongle/components/landing/Features.tsx @@ -0,0 +1,61 @@ +const features = [ + { + title: "On-Chain Verification", + description: "Every app listing and review is stored directly on the Stellar blockchain, ensuring data integrity and censorship resistance.", + icon: ( + + + + ), + }, + { + title: "Community Reviews", + description: "Real users provide verified feedback. Reviewers earn reputation based on the accuracy and depth of their contributions.", + icon: ( + + + + ), + }, + { + title: "Developer Focused", + description: "Simple integration for developers to list their Stellar dApps and reach a community that values trust and transparency.", + icon: ( + + + + ), + }, +]; + +export default function Features() { + return ( +
+
+
+

Why Dongle?

+

+ We're building the infrastructure for a more trustworthy decentralized ecosystem. +

+
+ +
+ {features.map((feature, idx) => ( +
+
+ {feature.icon} +
+

{feature.title}

+

+ {feature.description} +

+
+ ))} +
+
+
+ ); +} diff --git a/dongle/components/landing/Hero.tsx b/dongle/components/landing/Hero.tsx new file mode 100644 index 0000000..de7a214 --- /dev/null +++ b/dongle/components/landing/Hero.tsx @@ -0,0 +1,100 @@ +import Link from "next/link"; +import Image from "next/image"; + +export default function Hero() { + return ( +
+ {/* Background Mesh/Grid */} +
+
+ +
+
+
+
+ + Now live on Stellar Testnet +
+

+ The Trust Layer
+ + for Web3 Apps + +

+

+ Dongle is the decentralized app store that brings transparency to dApps on Stellar. Discover, review, and verify protocols with on-chain trust. +

+
+ + Explore Apps + + + Documentation + +
+ +
+
POWERED BY
+
STELLAR
+
SOROBAN
+
+
+ +
+
+
+ App Mockup +
+ + {/* Floating element 1 */} +
+
+
+ +
+
+
Status
+
Verified On-Chain
+
+
+
+ + {/* Floating element 2 */} +
+
+
+ {[1,2,3].map(i =>
)} +
+
4.9/5 (2k+ Reviews)
+
+
+
+ + {/* Glowing background behind image */} +
+
+
+
+
+
+ + {/* Large blobs */} +
+
+
+ ); +} diff --git a/dongle/components/layout/Footer.tsx b/dongle/components/layout/Footer.tsx new file mode 100644 index 0000000..3c06414 --- /dev/null +++ b/dongle/components/layout/Footer.tsx @@ -0,0 +1,45 @@ +import Link from "next/link"; + +export default function Footer() { + return ( + + ); +} diff --git a/dongle/components/layout/LayoutWrapper.tsx b/dongle/components/layout/LayoutWrapper.tsx new file mode 100644 index 0000000..8aa1bfd --- /dev/null +++ b/dongle/components/layout/LayoutWrapper.tsx @@ -0,0 +1,18 @@ +import Navbar from "./Navbar"; +import Footer from "./Footer"; + +interface LayoutWrapperProps { + children: React.ReactNode; +} + +export default function LayoutWrapper({ children }: LayoutWrapperProps) { + return ( +
+ +
+ {children} +
+
+
+ ); +} diff --git a/dongle/components/layout/Navbar.tsx b/dongle/components/layout/Navbar.tsx new file mode 100644 index 0000000..1b53cc7 --- /dev/null +++ b/dongle/components/layout/Navbar.tsx @@ -0,0 +1,56 @@ +"use client"; + +import Link from "next/link"; +import { useWallet } from "@/context/wallet.context"; + +export default function Navbar() { + const { isConnected, isConnecting, publicKey, connectWallet, disconnectWallet } = useWallet(); + + return ( + + ); +} diff --git a/dongle/package-lock.json b/dongle/package-lock.json index 208aacc..dbebac1 100644 --- a/dongle/package-lock.json +++ b/dongle/package-lock.json @@ -69,7 +69,6 @@ "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/generator": "^7.28.6", @@ -1612,7 +1611,6 @@ "integrity": "sha512-3MbSL37jEchWZz2p2mjntRZtPt837ij10ApxKfgmXCTuHWagYg7iA5bqPw6C8BMPfwidlvfPI/fxOc42HLhcyg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -1672,7 +1670,6 @@ "integrity": "sha512-npiaib8XzbjtzS2N4HlqPvlpxpmZ14FjSJrteZpPxGUaYPlvhzlzUZ4mZyABo0EFrOWnvyd0Xxroq//hKhtAWg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.53.0", "@typescript-eslint/types": "8.53.0", @@ -2172,7 +2169,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2611,7 +2607,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -3215,7 +3210,6 @@ "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -3401,7 +3395,6 @@ "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -5688,7 +5681,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz", "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -5698,7 +5690,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz", "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -6469,7 +6460,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -6657,7 +6647,6 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -6938,7 +6927,6 @@ "integrity": "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/dongle/public/images/hero-app.png b/dongle/public/images/hero-app.png new file mode 100644 index 0000000..1d1e39a Binary files /dev/null and b/dongle/public/images/hero-app.png differ