- New: nx.kg domain extension is live!{" "} - Star our repo to unlock access.{" "} + {/* Minimalist Thin Banner */} +
+ NEW:{" "} + .nx.kg{" "} + domains are live!{" "} @@ -45,115 +49,79 @@ export function IncidentAnnouncement() {
New Domain Extensions
-Unlock more domains for your projects
++ .nx.kg is Live! π +
π New: nx.kg domain extension!
-- Now offering .indevs.in, .sryze.cc, .ryzedns.org, and .nx.kg. -
-
+ We've just launched{" "}
+ .nx.kg β our newest domain extension,
+ joining{" "}
+ .indevs.in,{" "}
+ .sryze.cc, and{" "}
+ .ryzedns.org.
+
+ All domains are free, instant, and come with full DNS management.
+
Star our repo to unlock more domains
-- Starring helps us get discovered and keeps domains free for everyone. -
-β Starring unlocks:
--
-
-
-
- 1 free .nx.kg domain -
- -
-
- 1 free .sryze.cc domain -
- -
-
- 1 free .ryzedns.org domain -
- -
-
- 1 extra .indevs.in slot -
- -
-
- Higher domain limits overall -
-
-
-
- 1. Star our GitHub repo (button below) -
- 2. Click "I've starred it β Verify" on the Register page -
- 3. Instantly unlocked β no admin wait! -
+ Star our GitHub repo to instantly unlock all premium extensions. +
- NEW:{" "} - .nx.kg{" "} - domains are live!{" "} - - Star our GitHub repo to claim yours for free. - - -
-- .nx.kg Domains Are Live! π -
-- Stackryze now offers 4 free domain extensions -
-- We've just launched{" "} - .nx.kg β our newest domain extension, - joining{" "} - .indevs.in,{" "} - .sryze.cc, and{" "} - .ryzedns.org. - All domains are free, instant, and come with full DNS management. -
- - {/* Domain table */} -
-
-
- {DOMAINS.map(({ ext, badge, color, note }) => (
-
-
- - {ext} -- - {badge} - -
{note}
-
- ))}
-
-
-
- {[
- { n: "1", text: "Star our GitHub repo (takes 2 seconds)" },
- { n: "2", text: "Go to Register β click \"I've starred it β Verify\"" },
- { n: "3", text: "Pick your domain and register instantly β no admin wait" },
- ].map(({ n, text }) => (
-
- - - {n} - - {text} - - ))} -
- "Let's not make money the barrier to having a better name on the internet." -- - {/* CTAs */} -
- Stackryze costs ~$20/month to run. I'm a student running this for free. - If it's helped you, a sponsorship means the world. β€οΈ -
- -β Stackryze Team
-+ Available Namespaces +
++ Four unique extensions. Infinite possibilities. Claim yours instantly. +
+
- Questions?
+
+
+ Frequently Asked Questions
-
- Here are the ones we get asked most.
+
+ Everything you need to know about the product and billing.
-
+
{faqs.map((faq, idx) => (
-
-
+
+
{faq.answer}
@@ -79,13 +77,13 @@ export function FAQSection() {
{/* CTA at bottom */}
-
-
+
+
Still have questions? We're on GitHub Discussions.
Get Your Subdomain
diff --git a/src/components/feature-cards.jsx b/src/components/feature-cards.jsx
index ea7e1e1..2d14b9f 100644
--- a/src/components/feature-cards.jsx
+++ b/src/components/feature-cards.jsx
@@ -5,52 +5,50 @@ export function FeatureCards() {
{
number: "01",
title: "Forever Free",
- description: "Zero cost. Zero strings. Just claim your subdomain and it's yours. No subscriptions, no upsells.",
+ description: "We believe a great idea shouldn't come with a price tag. There are no hidden fees or subscriptionsβyour domain is completely free, forever.",
icon: Globe,
bg: "#FFD23F"
},
{
number: "02",
title: "Full DNS Control",
- description: "Point to anywhere. A records, CNAME records, TXT records. Your subdomain, your rules.",
+ description: "Take the wheel with complete DNS management. Whether you need A, CNAME, or TXT records, you have the flexibility to point your domain exactly where you need it.",
icon: Code,
bg: "#FF6B35"
},
{
number: "03",
title: "Growing Community",
- description: "Join a community of builders, makers, and creators. The perfect home for your personal projects.",
+ description: "You're in good company. Join thousands of developers, makers, and students who have already found the perfect home for their personal projects.",
icon: Users,
bg: "#2D5016"
},
{
number: "04",
title: "Instant Setup",
- description: "Login with GitHub. Pick a name. Done in 30 seconds. No verification emails. No waiting.",
+ description: "Get up and running in seconds. Just log in with GitHub, pick your favorite name, and let our reliable, lightning-fast infrastructure handle the rest.",
icon: Zap,
bg: "#FFD23F"
}
];
return (
-
-
+
+
-
-
- The price of admission
- is zero.
+
+
+ The price of admission is zero.
-
+
For too long, gatekeepers have put a price tag on your identity. We believe your first
idea, your tenth side project, and your portfolio deserve a home, not a monthly bill.
- Indevs is our contribution to the chaotic, beautiful mess that is the open web.
- Claim your *.indevs.in domain. Point it at Vercel, Netlify, or that
- Raspberry Pi in your closet. No strings attached. Just pure DNS freedom.
+ Stackryze Domains is our contribution to the chaotic, beautiful mess that is the open web.
+ Claim your domain, point it anywhere, and deploy. No strings attached.
@@ -59,32 +57,25 @@ export function FeatureCards() {
{features.map((feature, idx) => (
-
+
{feature.number}
-
+
{feature.title}
-
+
{feature.description}
diff --git a/src/components/footer-section.jsx b/src/components/footer-section.jsx
index 3b051eb..810c07b 100644
--- a/src/components/footer-section.jsx
+++ b/src/components/footer-section.jsx
@@ -80,7 +80,7 @@ export function Footer() {
{/* Bottom */}
- Β© 2025 Indevs. Open source and proud of it.
+ Β© 2026 Stackryze domains. Open source and proud of it.
A project by Stackryze (Registered MSME, India)
diff --git a/src/components/header.jsx b/src/components/header.jsx
index f417750..a3c02ce 100644
--- a/src/components/header.jsx
+++ b/src/components/header.jsx
@@ -1,53 +1,65 @@
-import { useLocation } from "react-router-dom";
+import { useState, useEffect } from "react";
+
import { useAuth } from "../context/auth-context";
-import { LayoutDashboard } from "lucide-react";
+import { LayoutDashboard, Sun, Moon } from "lucide-react";
+import { useTheme } from "next-themes";
export function Header() {
- const location = useLocation();
+
const { user } = useAuth();
- const isDashboard = location.pathname.startsWith("/dashboard");
+ const { theme, setTheme } = useTheme();
+ const [isScrolled, setIsScrolled] = useState(false);
+
+ useEffect(() => {
+ const handleScroll = () => {
+ setIsScrolled(window.scrollY > 10);
+ };
+ window.addEventListener("scroll", handleScroll);
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, []);
return (
-
+
{/* Left Side: Logo */}
- 
- Stackryze Domains
+ 
+ 
+ Stackryze Domains
-
+
-
- IN
- DE
- VS
+
+ IN
+ DE
+ VS
- .in
+ .in
-
+
-
- SRYZE
+
+ SRYZE
- .cc
+ .cc
-
+
-
- RYZE
- DNS
+
+ RYZE
+ DNS
- .org
+ .org
-
+
-
- NX
+
+ NX
- .kg
+ .kg
@@ -56,39 +68,49 @@ export function Header() {
{/* Navigation - Desktop */}
+
+
{/* CTA Button */}
{user ? (
- {/* Darker overlay for white text readability */}
-
+
+ {/* Subtle overlay for white text readability */}
+
{/* Container with generous padding */}
@@ -97,145 +114,155 @@ export function HeroSection() {
{/* Left: Text */}
-
-
- Free Domains for Developers
-
+
-
-
-
- A FREE NAME
- FOR EVERYONE.
+
+ A NAME FOR EVERYONE ONLINE.
-
- Made for the world, by Indians.
-
- 100% Open Source and cost-free. No strings attached.
+
+ A public namespace for everyone to belong online. Made for the world. 100% free and open-source.
{/* Right: Search */}
-
-
-
-
-
-
- setDomain(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
- onKeyPress={handleKeyPress}
- className="flex-1 px-4 py-3 text-base md:text-lg font-mono min-w-0 outline-none"
- />
-
- .indevs.in
-
- {isChecking && (
-
-
-
- )}
- {errorMsg && domain.length >= 3 && (
-
-
- )}
- {isAvailable && !errorMsg && (
-
-
+ {dropdownOpen && (
+
+
+ {DOMAINS.map((d) => (
+
+ ))}
+
+
)}
-
-
-
- 0 && domain.length < 3)}
+ className="w-full rounded-xl py-4 px-6 font-extrabold uppercase tracking-widest text-sm text-slate-800 hover:text-slate-900 transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-[0_4px_14px_0_rgb(0,0,0,10%)]"
+ >
+ {isChecking ? (
+ <>
+
+ {/* Status Messages */}
+ {domain && domain.length > 0 && domain.length < 3 && (
+
+
+ )}
+ {errorMsg && domain.length >= 3 && (
+
+
+ )}
+ {isAvailable && !errorMsg && (
+
+
+ )}
+
+
+ We're a small team of students with a passion for making the internet more open and accessible. Your support helps us keep this project free and continue improving it for everyone.
+
+
+ Trusted by developers worldwide
+
+
+
+
+ {statItems.map((stat, idx) => (
+
+
+
+
+
+
+ {/* Left: Scrollable Stacked Content */}
+
+
+ {[
+ { isIntro: true },
+ ...Array.from({ length: Math.ceil(features.length / 2) }, (_, i) => ({
+ isIntro: false,
+ items: features.slice(i * 2, i * 2 + 2)
+ }))
+ ].map((block, idx, arr) => (
+
+
+
+ {block.isIntro ? (
+ <>
+
+ Who are we?
+
+
+
+ We are a small team of passionate developers building an open, accessible, and community-driven namespace for the modern internet.
+
+
+ Providing completely free domain names for open-source projects, communities, and individuals to launch ideas without financial barriers.
+
+
+ Enjoy fast and simple domain management, robust built-in security with automated abuse prevention, and absolutely zero hidden fees or upsells.
+
+
+
+ ) : (
+
+ {block.items.map((f, i) => (
+
+
+ {f.title}
+ {f.subtitle}
+
+
+ {f.description}
+
+
+
+ ))}
+
+ )}
+
+ {/* White Tail to hide previous content */}
+ {idx < arr.length - 1 && (
+
+ )}
+
+ {idx < arr.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+ {/* Right: Floating Globe Illustration (Sticky) */}
+
+ {/* Heading above the globe */}
+
+
+ Connecting the world
+
+
+
+
+ {/* Subtle background glow */}
+
+
+ {/* The Globe */}
+
+ {
+ if (import.meta.env.DEV) console.log("Clicked:", marker.label);
+ }}
+ />
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/network-map-section.jsx b/src/components/network-map-section.jsx
new file mode 100644
index 0000000..1ddb696
--- /dev/null
+++ b/src/components/network-map-section.jsx
@@ -0,0 +1,71 @@
+import { DottedMap } from "./ui/dotted-map";
+
+const mapMarkers = [
+ // Primary Nameservers
+ { lat: 40.7128, lng: -74.006, size: 1.5, pulse: true, label: "ns1.stackryze.com β’ New York" },
+ { lat: 50.1109, lng: 8.6821, size: 1.5, pulse: true, label: "ns2.stackryze.com β’ Germany" },
+ { lat: 17.3850, lng: 78.4867, size: 1.5, pulse: true, label: "ns3.stackryze.com β’ Hyderabad" }
+];
+
+export function NetworkMapSection() {
+ return (
+
+
+
+
+
+ Globally Distributed Name Servers
+
+
+ Lightning-fast resolution from edge nodes worldwide, ensuring your domain resolves instantly anywhere on the planet.
+
+
+
+
+
+ {
+ if (!marker.label) return null;
+ return (
+
+ {/* Pill Background */}
+
+ {marker.label}
+
+
+ );
+ }}
+ />
+
+
+
+
+ );
+}
diff --git a/src/components/sponsors-section.jsx b/src/components/sponsors-section.jsx
index 68aa82b..6166bb3 100644
--- a/src/components/sponsors-section.jsx
+++ b/src/components/sponsors-section.jsx
@@ -32,52 +32,30 @@ export function SponsorsSection() {
];
return (
-
+
-
-
- Sponsored By
+
+
+ Trusted By
-
- These industry leaders help us keep Indevs free, open-source, and accessible to everyone.
-
-
+
{sponsors.map((sponsor, idx) => (
-
-
- 
-
-
-
-
- {sponsor.name}
-
- {' '}{sponsor.description.replace(sponsor.name + ' ', '')}
-
-
+
+
))}
diff --git a/src/components/ui/3d-globe.jsx b/src/components/ui/3d-globe.jsx
new file mode 100644
index 0000000..9114243
--- /dev/null
+++ b/src/components/ui/3d-globe.jsx
@@ -0,0 +1,342 @@
+import React, { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { cn } from "@/lib/utils";
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+/**
+ * Convert latitude/longitude to 3D cartesian coordinates
+ */
+function latLngToVector3(lat, lng, radius) {
+ const phi = (90 - lat) * (Math.PI / 180);
+ const theta = (lng + 180) * (Math.PI / 180);
+
+ const x = -(radius * Math.sin(phi) * Math.cos(theta));
+ const z = radius * Math.sin(phi) * Math.sin(theta);
+ const y = radius * Math.cos(phi);
+
+ return new THREE.Vector3(x, y, z);
+}
+
+// ============================================================================
+// Atmosphere Shader Shaders
+// ============================================================================
+
+const atmosphereVertexShader = `
+ varying vec3 vNormal;
+ varying vec3 vPosition;
+ void main() {
+ vNormal = normalize(normalMatrix * normal);
+ vPosition = (modelViewMatrix * vec4(position, 1.0)).xyz;
+ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+ }
+`;
+
+const atmosphereFragmentShader = `
+ uniform vec3 atmosphereColor;
+ uniform float intensity;
+ uniform float fresnelPower;
+ varying vec3 vNormal;
+ varying vec3 vPosition;
+ void main() {
+ float fresnel = pow(1.0 - abs(dot(vNormal, normalize(-vPosition))), fresnelPower);
+ gl_FragColor = vec4(atmosphereColor, fresnel * intensity);
+ }
+`;
+
+// ============================================================================
+// Main Globe3D Component
+// ============================================================================
+
+const defaultConfig = {
+ radius: 2,
+ globeColor: "#05050a",
+ textureUrl: "https://unpkg.com/three-globe@2.31.0/example/img/earth-blue-marble.jpg",
+ bumpMapUrl: "https://unpkg.com/three-globe@2.31.0/example/img/earth-topology.png",
+ showAtmosphere: false,
+ atmosphereColor: "#3b82f6",
+ atmosphereIntensity: 0.6,
+ atmosphereBlur: 3.0,
+ bumpScale: 1,
+ autoRotateSpeed: 0.4,
+ enableZoom: false,
+ enablePan: false,
+ minDistance: 4,
+ maxDistance: 12,
+ ambientIntensity: 0.8,
+ pointLightIntensity: 2.0,
+ backgroundColor: null,
+};
+
+export function Globe3D({
+ markers = [],
+ config = {},
+ className,
+ onMarkerClick: _onMarkerClick,
+ onMarkerHover: _onMarkerHover,
+}) {
+ const containerRef = useRef(null);
+ const canvasRef = useRef(null);
+ const avatarRefs = useRef([]);
+ const markerTipObjects = useRef([]);
+ const [_hoveredIndex, _setHoveredIndex] = useState(null);
+
+ const mergedConfig = { ...defaultConfig, ...config };
+
+ useEffect(() => {
+ if (!containerRef.current || !canvasRef.current) return;
+
+ const width = containerRef.current.clientWidth || 1;
+ const height = containerRef.current.clientHeight || 1;
+
+ // 1. Create Scene
+ const scene = new THREE.Scene();
+
+ // 2. Camera
+ const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
+ camera.position.set(0, 0, mergedConfig.radius * 3.2);
+
+ // 3. Renderer
+ const renderer = new THREE.WebGLRenderer({
+ canvas: canvasRef.current,
+ antialias: true,
+ alpha: true,
+ powerPreference: "high-performance",
+ });
+ renderer.setSize(width, height);
+ renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+
+ // 4. Lighting
+ const ambientLight = new THREE.AmbientLight(0xffffff, mergedConfig.ambientIntensity);
+ scene.add(ambientLight);
+
+ const dirLight1 = new THREE.DirectionalLight(0xffffff, mergedConfig.pointLightIntensity);
+ dirLight1.position.set(mergedConfig.radius * 5, mergedConfig.radius * 3, mergedConfig.radius * 5);
+ scene.add(dirLight1);
+
+ const dirLight2 = new THREE.DirectionalLight(0x88ccff, mergedConfig.pointLightIntensity * 0.4);
+ dirLight2.position.set(-mergedConfig.radius * 4, mergedConfig.radius * 2, -mergedConfig.radius * 3);
+ scene.add(dirLight2);
+
+ // 5. Globe Group (contains globe mesh and markers for rotation)
+ const globeGroup = new THREE.Group();
+ scene.add(globeGroup);
+
+ // Load Textures
+ const textureLoader = new THREE.TextureLoader();
+ textureLoader.crossOrigin = "anonymous";
+
+ const earthTexture = textureLoader.load(mergedConfig.textureUrl);
+ earthTexture.colorSpace = THREE.SRGBColorSpace;
+ const bumpTexture = textureLoader.load(mergedConfig.bumpMapUrl);
+
+ // Globe Mesh
+ const globeGeometry = new THREE.SphereGeometry(mergedConfig.radius, 64, 64);
+ const globeMaterial = new THREE.MeshStandardMaterial({
+ map: earthTexture,
+ bumpMap: bumpTexture,
+ bumpScale: mergedConfig.bumpScale * 0.05,
+ roughness: 0.8,
+ metalness: 0.1,
+ });
+ const globeMesh = new THREE.Mesh(globeGeometry, globeMaterial);
+ globeGroup.add(globeMesh);
+
+ // Atmosphere Mesh
+ let atmosphereMesh;
+ if (mergedConfig.showAtmosphere) {
+ const fresnelPower = 6.0; // Higher power = thinner, softer glow
+ const atmosphereMaterial = new THREE.ShaderMaterial({
+ uniforms: {
+ atmosphereColor: { value: new THREE.Color(mergedConfig.atmosphereColor) },
+ intensity: { value: mergedConfig.atmosphereIntensity },
+ fresnelPower: { value: fresnelPower },
+ },
+ vertexShader: atmosphereVertexShader,
+ fragmentShader: atmosphereFragmentShader,
+ side: THREE.BackSide,
+ transparent: true,
+ depthWrite: false,
+ });
+
+ // Atmosphere is slightly larger than the globe
+ const atmosphereGeometry = new THREE.SphereGeometry(mergedConfig.radius * 1.04, 64, 32);
+ atmosphereMesh = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
+ scene.add(atmosphereMesh);
+ }
+
+ // 6. Build markers and pins inside globeGroup
+ const tips = [];
+ const markerGroups = [];
+
+ markers.forEach((marker) => {
+ const markerGroup = new THREE.Group();
+
+ const surfacePos = latLngToVector3(marker.lat, marker.lng, mergedConfig.radius * 1.001);
+ const topPos = latLngToVector3(marker.lat, marker.lng, mergedConfig.radius * 1.16);
+
+ // Pin line
+ const direction = topPos.clone().sub(surfacePos).normalize();
+ const lineHeight = topPos.distanceTo(surfacePos);
+ const lineCenter = surfacePos.clone().lerp(topPos, 0.5);
+
+ const lineGeometry = new THREE.CylinderGeometry(0.003, 0.003, lineHeight, 8);
+ const lineMaterial = new THREE.MeshBasicMaterial({
+ color: 0x94a3b8,
+ transparent: true,
+ opacity: 0.5,
+ });
+ const lineMesh = new THREE.Mesh(lineGeometry, lineMaterial);
+
+ // Orient cylinder
+ const quaternion = new THREE.Quaternion();
+ quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction);
+ lineMesh.position.copy(lineCenter);
+ lineMesh.quaternion.copy(quaternion);
+ markerGroup.add(lineMesh);
+
+ // Cone at surface
+ const coneGeometry = new THREE.ConeGeometry(0.012, 0.035, 8);
+ const coneMaterial = new THREE.MeshBasicMaterial({ color: 0xef4444 });
+ const coneMesh = new THREE.Mesh(coneGeometry, coneMaterial);
+ coneMesh.position.copy(surfacePos);
+ coneMesh.quaternion.copy(quaternion);
+ markerGroup.add(coneMesh);
+
+ // Tip Object3D (for tracking world coords)
+ const tipObject = new THREE.Object3D();
+ tipObject.position.copy(topPos);
+ markerGroup.add(tipObject);
+ tips.push(tipObject);
+
+ globeGroup.add(markerGroup);
+ markerGroups.push({ lineMaterial, coneMaterial });
+ });
+
+ markerTipObjects.current = tips;
+
+ // 7. OrbitControls
+ const controls = new OrbitControls(camera, renderer.domElement);
+ controls.enableDamping = true;
+ controls.dampingFactor = 0.05;
+ controls.enablePan = mergedConfig.enablePan;
+ controls.enableZoom = mergedConfig.enableZoom;
+ controls.minDistance = mergedConfig.minDistance;
+ controls.maxDistance = mergedConfig.maxDistance;
+ controls.rotateSpeed = 0.5;
+
+ // 8. Animation & Render Loop
+ let animationFrameId;
+ const tempV = new THREE.Vector3();
+
+ const animate = () => {
+ // Auto rotation
+ if (mergedConfig.autoRotateSpeed > 0) {
+ globeGroup.rotation.y += (mergedConfig.autoRotateSpeed * 0.005);
+ }
+
+ controls.update();
+
+ // Render Three.js scene
+ renderer.render(scene, camera);
+
+ // Update absolute positioned React avatars
+ if (containerRef.current) {
+ const width = containerRef.current.clientWidth;
+ const height = containerRef.current.clientHeight;
+
+ markers.forEach((marker, index) => {
+ const el = avatarRefs.current[index];
+ const tip = tips[index];
+ if (!el || !tip) return;
+
+ // Get world position of the tip
+ tip.getWorldPosition(tempV);
+
+ // Dot product: positive = facing camera, negative = behind
+ const markerDir = tempV.clone().normalize();
+ const camDir = camera.position.clone().normalize();
+ const dot = markerDir.dot(camDir);
+
+ const isVisible = dot > 0.05; // Slightly lax threshold to prevent sudden cuts on the edge
+
+ if (!isVisible) {
+ el.style.opacity = "0";
+ el.style.pointerEvents = "none";
+ return;
+ }
+
+ // Project to 2D
+ tempV.project(camera);
+
+ const x = (tempV.x * 0.5 + 0.5) * width;
+ const y = (-(tempV.y * 0.5) + 0.5) * height;
+
+ el.style.opacity = "1";
+ el.style.pointerEvents = "auto";
+ el.style.transform = `translate3d(${x}px, ${y}px, 0) translate(-50%, -50%)`;
+ });
+ }
+
+ animationFrameId = requestAnimationFrame(animate);
+ };
+
+ animate();
+
+ // 9. Resize Observer
+ const resizeObserver = new ResizeObserver((entries) => {
+ for (let entry of entries) {
+ const w = containerRef.current?.clientWidth || 0;
+ const h = containerRef.current?.clientHeight || 0;
+ if (w > 0 && h > 0) {
+ camera.aspect = w / h;
+ camera.updateProjectionMatrix();
+ renderer.setSize(w, h);
+ }
+ }
+ });
+ if (containerRef.current) {
+ resizeObserver.observe(containerRef.current);
+ }
+
+ // 10. Cleanups
+ return () => {
+ cancelAnimationFrame(animationFrameId);
+ resizeObserver.disconnect();
+ controls.dispose();
+ renderer.dispose();
+
+ // Dispose all Three.js objects in the scene
+ scene.traverse((object) => {
+ if (object.geometry) object.geometry.dispose();
+ if (object.material) {
+ if (Array.isArray(object.material)) {
+ object.material.forEach((material) => material.dispose());
+ } else {
+ object.material.dispose();
+ }
+ }
+ });
+
+ earthTexture.dispose();
+ bumpTexture.dispose();
+ scene.clear();
+ };
+ }, [markers]);
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/components/ui/dialog.jsx b/src/components/ui/dialog.jsx
index 852ea55..503ed0d 100644
--- a/src/components/ui/dialog.jsx
+++ b/src/components/ui/dialog.jsx
@@ -29,7 +29,7 @@ function DialogOverlay({
return {
+ const sorted = [...points].sort((a, b) => a.y - b.y || a.x - b.x);
+ const rowMap = new Map();
+ let step = 0;
+ let prevY = Number.NaN;
+ let prevXInRow = Number.NaN;
+
+ for (const p of sorted) {
+ if (p.y !== prevY) {
+ prevY = p.y;
+ prevXInRow = Number.NaN;
+ if (!rowMap.has(p.y)) rowMap.set(p.y, rowMap.size);
+ }
+ if (!Number.isNaN(prevXInRow)) {
+ const delta = p.x - prevXInRow;
+ if (delta > 0) step = step === 0 ? delta : Math.min(step, delta);
+ }
+ prevXInRow = p.x;
+ }
+
+ return { xStep: step || 1, yToRowIndex: rowMap };
+ }, [points]);
+
+ return (
+
+ );
+}
diff --git a/src/components/ui/input-otp.jsx b/src/components/ui/input-otp.jsx
index 3a951b0..eb0c1a8 100644
--- a/src/components/ui/input-otp.jsx
+++ b/src/components/ui/input-otp.jsx
@@ -21,7 +21,7 @@ function InputOTP({
function InputOTPGroup({ className, ...props }) {
return ;
}
@@ -36,14 +36,14 @@ function InputOTPSlot({
data-slot="input-otp-slot"
data-active={isActive}
className={cn(
- "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+ "relative flex h-14 w-12 sm:h-16 sm:w-14 items-center justify-center rounded-[14px] border border-slate-200 dark:border-white/10 bg-white dark:bg-white/5 text-2xl font-bold text-slate-900 dark:text-white shadow-[0_2px_10px_rgba(0,0,0,0.02)] transition-all duration-300 outline-none data-[active=true]:z-10 data-[active=true]:border-slate-900 dark:data-[active=true]:border-white data-[active=true]:ring-4 data-[active=true]:ring-slate-900/10 dark:data-[active=true]:ring-white/10",
className
)}
{...props}
>
{char}
{hasFakeCaret &&
-
+
}
;
}
diff --git a/src/components/ui/tailwindcss-buttons.jsx b/src/components/ui/tailwindcss-buttons.jsx
new file mode 100644
index 0000000..966df3a
--- /dev/null
+++ b/src/components/ui/tailwindcss-buttons.jsx
@@ -0,0 +1,204 @@
+
+import { cn } from "@/lib/utils";
+
+// 1. Sketch Button - Neobrutalist design with a solid offset border/shadow on hover
+export function SketchButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 2. Simple Button - Elegant transition with subtle translation & shadow on hover
+export function SimpleButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 3. Invert Button - Simple color inversion on hover
+export function InvertButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 4. Tailwind Connect Button - Premium radial gradient, glow overlay, and bottom gradient line
+export function TailwindConnectButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 5. Gradient Button - Premium smooth vertical gradient with hover shadows
+export function GradientButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 6. Unapologetic Button - Solid flat offset shadow box translating on hover
+export function UnapologeticButton({ children, className, shadowBg = "bg-yellow-300", ...props }) {
+ return (
+
+ );
+}
+
+// 7. Lit Up Borders Button - Sleek indigo-to-purple gradient border container
+export function LitUpBordersButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 8. Border Magic Button - Spinning conic gradient background light loop
+export function BorderMagicButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 9. Shimmer Button - Subtle shifting reflection animation
+export function ShimmerButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 10. Spotify Button - Vibrant green tracking-widest uppercase hover transform
+export function SpotifyButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 11. NextJS Blue Button - Bright blue shadow-glow transition
+export function NextJSBlueButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 12. NextJS White Button - Pure white card shadow-glow transition
+export function NextJSWhiteButton({ children, className, ...props }) {
+ return (
+
+ );
+}
diff --git a/src/components/ui/toast.jsx b/src/components/ui/toast.jsx
index 9aed58e..97613a8 100644
--- a/src/components/ui/toast.jsx
+++ b/src/components/ui/toast.jsx
@@ -2,7 +2,7 @@
import * as React from "react";
import * as ToastPrimitives from "@radix-ui/react-toast";
import { cva } from "class-variance-authority";
-import { X, CheckCircle, XCircle, AlertCircle, Info } from "lucide-react";
+import { X } from "lucide-react";
import { cn } from "@/lib/utils";
const ToastProvider = ToastPrimitives.Provider;
@@ -11,7 +11,7 @@ const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (
(
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
const toastVariants = cva(
- "group pointer-events-auto relative flex w-full items-start gap-4 overflow-hidden rounded-lg border-4 p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,0.9)] transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full",
+ "group pointer-events-auto relative flex w-full items-start gap-4 overflow-hidden rounded-xl border p-5 shadow-xl dark:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.7)] backdrop-blur-xl transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full",
{
variants: {
variant: {
- default: "border-[#1A1A1A] bg-white text-[#1A1A1A]",
- destructive: "border-red-600 bg-red-50 text-red-900",
- success: "border-green-600 bg-green-50 text-green-900",
+ default: "bg-white/90 dark:bg-[#1A1A1A]/80 border-slate-200/80 dark:border-white/10 text-slate-900 dark:text-white",
+ destructive: "border-red-500/30 dark:border-red-500/30 bg-red-50/90 dark:bg-red-950/80 text-red-900 dark:text-red-400",
+ success: "border-emerald-500/30 dark:border-emerald-500/30 bg-emerald-50/90 dark:bg-emerald-950/80 text-emerald-900 dark:text-emerald-400",
},
},
defaultVariants: {
@@ -51,7 +51,7 @@ const ToastAction = React.forwardRef(({ className, ...props }, ref) => (
(
(
+ Frequently Asked Questions
-- Here are the ones we get asked most. +
+ Everything you need to know about the product and billing.
+
{faq.answer}
+
Still have questions? We're on GitHub Discussions.
Get Your Subdomain diff --git a/src/components/feature-cards.jsx b/src/components/feature-cards.jsx index ea7e1e1..2d14b9f 100644 --- a/src/components/feature-cards.jsx +++ b/src/components/feature-cards.jsx @@ -5,52 +5,50 @@ export function FeatureCards() { { number: "01", title: "Forever Free", - description: "Zero cost. Zero strings. Just claim your subdomain and it's yours. No subscriptions, no upsells.", + description: "We believe a great idea shouldn't come with a price tag. There are no hidden fees or subscriptionsβyour domain is completely free, forever.", icon: Globe, bg: "#FFD23F" }, { number: "02", title: "Full DNS Control", - description: "Point to anywhere. A records, CNAME records, TXT records. Your subdomain, your rules.", + description: "Take the wheel with complete DNS management. Whether you need A, CNAME, or TXT records, you have the flexibility to point your domain exactly where you need it.", icon: Code, bg: "#FF6B35" }, { number: "03", title: "Growing Community", - description: "Join a community of builders, makers, and creators. The perfect home for your personal projects.", + description: "You're in good company. Join thousands of developers, makers, and students who have already found the perfect home for their personal projects.", icon: Users, bg: "#2D5016" }, { number: "04", title: "Instant Setup", - description: "Login with GitHub. Pick a name. Done in 30 seconds. No verification emails. No waiting.", + description: "Get up and running in seconds. Just log in with GitHub, pick your favorite name, and let our reliable, lightning-fast infrastructure handle the rest.", icon: Zap, bg: "#FFD23F" } ]; return ( -
- The price of admission
- is zero.
+
+
+ The price of admission is zero.
-
+
For too long, gatekeepers have put a price tag on your identity. We believe your first
idea, your tenth side project, and your portfolio deserve a home, not a monthly bill.
- Indevs is our contribution to the chaotic, beautiful mess that is the open web.
- Claim your *.indevs.in domain. Point it at Vercel, Netlify, or that
- Raspberry Pi in your closet. No strings attached. Just pure DNS freedom.
+ Stackryze Domains is our contribution to the chaotic, beautiful mess that is the open web.
+ Claim your domain, point it anywhere, and deploy. No strings attached.
@@ -59,32 +57,25 @@ export function FeatureCards() {
{features.map((feature, idx) => (
-
+
{feature.number}
-
+
{feature.title}
-
+
{feature.description}
diff --git a/src/components/footer-section.jsx b/src/components/footer-section.jsx
index 3b051eb..810c07b 100644
--- a/src/components/footer-section.jsx
+++ b/src/components/footer-section.jsx
@@ -80,7 +80,7 @@ export function Footer() {
{/* Bottom */}
- Β© 2025 Indevs. Open source and proud of it.
+ Β© 2026 Stackryze domains. Open source and proud of it.
A project by Stackryze (Registered MSME, India)
diff --git a/src/components/header.jsx b/src/components/header.jsx
index f417750..a3c02ce 100644
--- a/src/components/header.jsx
+++ b/src/components/header.jsx
@@ -1,53 +1,65 @@
-import { useLocation } from "react-router-dom";
+import { useState, useEffect } from "react";
+
import { useAuth } from "../context/auth-context";
-import { LayoutDashboard } from "lucide-react";
+import { LayoutDashboard, Sun, Moon } from "lucide-react";
+import { useTheme } from "next-themes";
export function Header() {
- const location = useLocation();
+
const { user } = useAuth();
- const isDashboard = location.pathname.startsWith("/dashboard");
+ const { theme, setTheme } = useTheme();
+ const [isScrolled, setIsScrolled] = useState(false);
+
+ useEffect(() => {
+ const handleScroll = () => {
+ setIsScrolled(window.scrollY > 10);
+ };
+ window.addEventListener("scroll", handleScroll);
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, []);
return (
-
+
{/* Left Side: Logo */}
-
- Stackryze Domains
+
+
+ Stackryze Domains
-
+
-
- IN
- DE
- VS
+
+ IN
+ DE
+ VS
- .in
+ .in
-
+
-
- SRYZE
+
+ SRYZE
- .cc
+ .cc
-
+
-
- RYZE
- DNS
+
+ RYZE
+ DNS
- .org
+ .org
-
+
-
- NX
+
+ NX
- .kg
+ .kg
@@ -56,39 +68,49 @@ export function Header() {
{/* Navigation - Desktop */}
+
+
{/* CTA Button */}
{user ? (
- {/* Darker overlay for white text readability */}
-
+
+ {/* Subtle overlay for white text readability */}
+
{/* Container with generous padding */}
@@ -97,145 +114,155 @@ export function HeroSection() {
{/* Left: Text */}
-
-
- Free Domains for Developers
-
+
-
-
-
- A FREE NAME
- FOR EVERYONE.
+
+ A NAME FOR EVERYONE ONLINE.
-
- Made for the world, by Indians.
-
- 100% Open Source and cost-free. No strings attached.
+
+ A public namespace for everyone to belong online. Made for the world. 100% free and open-source.
{/* Right: Search */}
-
-
-
-
-
-
- setDomain(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
- onKeyPress={handleKeyPress}
- className="flex-1 px-4 py-3 text-base md:text-lg font-mono min-w-0 outline-none"
- />
-
- .indevs.in
-
- {isChecking && (
-
-
-
- )}
- {errorMsg && domain.length >= 3 && (
-
-
- )}
- {isAvailable && !errorMsg && (
-
-
+ {dropdownOpen && (
+
+
+ {DOMAINS.map((d) => (
+
+ ))}
+
+
)}
-
-
-
- 0 && domain.length < 3)}
+ className="w-full rounded-xl py-4 px-6 font-extrabold uppercase tracking-widest text-sm text-slate-800 hover:text-slate-900 transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-[0_4px_14px_0_rgb(0,0,0,10%)]"
+ >
+ {isChecking ? (
+ <>
+
+ {/* Status Messages */}
+ {domain && domain.length > 0 && domain.length < 3 && (
+
+
+ )}
+ {errorMsg && domain.length >= 3 && (
+
+
+ )}
+ {isAvailable && !errorMsg && (
+
+
+ )}
+
+
+ We're a small team of students with a passion for making the internet more open and accessible. Your support helps us keep this project free and continue improving it for everyone.
+
+
+ Trusted by developers worldwide
+
+
+
+
+ {statItems.map((stat, idx) => (
+
+
+
+
+
+
+ {/* Left: Scrollable Stacked Content */}
+
+
+ {[
+ { isIntro: true },
+ ...Array.from({ length: Math.ceil(features.length / 2) }, (_, i) => ({
+ isIntro: false,
+ items: features.slice(i * 2, i * 2 + 2)
+ }))
+ ].map((block, idx, arr) => (
+
+
+
+ {block.isIntro ? (
+ <>
+
+ Who are we?
+
+
+
+ We are a small team of passionate developers building an open, accessible, and community-driven namespace for the modern internet.
+
+
+ Providing completely free domain names for open-source projects, communities, and individuals to launch ideas without financial barriers.
+
+
+ Enjoy fast and simple domain management, robust built-in security with automated abuse prevention, and absolutely zero hidden fees or upsells.
+
+
+
+ ) : (
+
+ {block.items.map((f, i) => (
+
+
+ {f.title}
+ {f.subtitle}
+
+
+ {f.description}
+
+
+
+ ))}
+
+ )}
+
+ {/* White Tail to hide previous content */}
+ {idx < arr.length - 1 && (
+
+ )}
+
+ {idx < arr.length - 1 && (
+
+ )}
+
+ ))}
+
+
+
+ {/* Right: Floating Globe Illustration (Sticky) */}
+
+ {/* Heading above the globe */}
+
+
+ Connecting the world
+
+
+
+
+ {/* Subtle background glow */}
+
+
+ {/* The Globe */}
+
+ {
+ if (import.meta.env.DEV) console.log("Clicked:", marker.label);
+ }}
+ />
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/network-map-section.jsx b/src/components/network-map-section.jsx
new file mode 100644
index 0000000..1ddb696
--- /dev/null
+++ b/src/components/network-map-section.jsx
@@ -0,0 +1,71 @@
+import { DottedMap } from "./ui/dotted-map";
+
+const mapMarkers = [
+ // Primary Nameservers
+ { lat: 40.7128, lng: -74.006, size: 1.5, pulse: true, label: "ns1.stackryze.com β’ New York" },
+ { lat: 50.1109, lng: 8.6821, size: 1.5, pulse: true, label: "ns2.stackryze.com β’ Germany" },
+ { lat: 17.3850, lng: 78.4867, size: 1.5, pulse: true, label: "ns3.stackryze.com β’ Hyderabad" }
+];
+
+export function NetworkMapSection() {
+ return (
+
+
+
+
+
+ Globally Distributed Name Servers
+
+
+ Lightning-fast resolution from edge nodes worldwide, ensuring your domain resolves instantly anywhere on the planet.
+
+
+
+
+
+ {
+ if (!marker.label) return null;
+ return (
+
+ {/* Pill Background */}
+
+ {marker.label}
+
+
+ );
+ }}
+ />
+
+
+
+
+ );
+}
diff --git a/src/components/sponsors-section.jsx b/src/components/sponsors-section.jsx
index 68aa82b..6166bb3 100644
--- a/src/components/sponsors-section.jsx
+++ b/src/components/sponsors-section.jsx
@@ -32,52 +32,30 @@ export function SponsorsSection() {
];
return (
-
+
-
-
- Sponsored By
+
+
+ Trusted By
-
- These industry leaders help us keep Indevs free, open-source, and accessible to everyone.
-
-
+
{sponsors.map((sponsor, idx) => (
-
-
-
-
-
-
-
- {sponsor.name}
-
- {' '}{sponsor.description.replace(sponsor.name + ' ', '')}
-
-
+
+
))}
diff --git a/src/components/ui/3d-globe.jsx b/src/components/ui/3d-globe.jsx
new file mode 100644
index 0000000..9114243
--- /dev/null
+++ b/src/components/ui/3d-globe.jsx
@@ -0,0 +1,342 @@
+import React, { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { cn } from "@/lib/utils";
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+/**
+ * Convert latitude/longitude to 3D cartesian coordinates
+ */
+function latLngToVector3(lat, lng, radius) {
+ const phi = (90 - lat) * (Math.PI / 180);
+ const theta = (lng + 180) * (Math.PI / 180);
+
+ const x = -(radius * Math.sin(phi) * Math.cos(theta));
+ const z = radius * Math.sin(phi) * Math.sin(theta);
+ const y = radius * Math.cos(phi);
+
+ return new THREE.Vector3(x, y, z);
+}
+
+// ============================================================================
+// Atmosphere Shader Shaders
+// ============================================================================
+
+const atmosphereVertexShader = `
+ varying vec3 vNormal;
+ varying vec3 vPosition;
+ void main() {
+ vNormal = normalize(normalMatrix * normal);
+ vPosition = (modelViewMatrix * vec4(position, 1.0)).xyz;
+ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+ }
+`;
+
+const atmosphereFragmentShader = `
+ uniform vec3 atmosphereColor;
+ uniform float intensity;
+ uniform float fresnelPower;
+ varying vec3 vNormal;
+ varying vec3 vPosition;
+ void main() {
+ float fresnel = pow(1.0 - abs(dot(vNormal, normalize(-vPosition))), fresnelPower);
+ gl_FragColor = vec4(atmosphereColor, fresnel * intensity);
+ }
+`;
+
+// ============================================================================
+// Main Globe3D Component
+// ============================================================================
+
+const defaultConfig = {
+ radius: 2,
+ globeColor: "#05050a",
+ textureUrl: "https://unpkg.com/three-globe@2.31.0/example/img/earth-blue-marble.jpg",
+ bumpMapUrl: "https://unpkg.com/three-globe@2.31.0/example/img/earth-topology.png",
+ showAtmosphere: false,
+ atmosphereColor: "#3b82f6",
+ atmosphereIntensity: 0.6,
+ atmosphereBlur: 3.0,
+ bumpScale: 1,
+ autoRotateSpeed: 0.4,
+ enableZoom: false,
+ enablePan: false,
+ minDistance: 4,
+ maxDistance: 12,
+ ambientIntensity: 0.8,
+ pointLightIntensity: 2.0,
+ backgroundColor: null,
+};
+
+export function Globe3D({
+ markers = [],
+ config = {},
+ className,
+ onMarkerClick: _onMarkerClick,
+ onMarkerHover: _onMarkerHover,
+}) {
+ const containerRef = useRef(null);
+ const canvasRef = useRef(null);
+ const avatarRefs = useRef([]);
+ const markerTipObjects = useRef([]);
+ const [_hoveredIndex, _setHoveredIndex] = useState(null);
+
+ const mergedConfig = { ...defaultConfig, ...config };
+
+ useEffect(() => {
+ if (!containerRef.current || !canvasRef.current) return;
+
+ const width = containerRef.current.clientWidth || 1;
+ const height = containerRef.current.clientHeight || 1;
+
+ // 1. Create Scene
+ const scene = new THREE.Scene();
+
+ // 2. Camera
+ const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
+ camera.position.set(0, 0, mergedConfig.radius * 3.2);
+
+ // 3. Renderer
+ const renderer = new THREE.WebGLRenderer({
+ canvas: canvasRef.current,
+ antialias: true,
+ alpha: true,
+ powerPreference: "high-performance",
+ });
+ renderer.setSize(width, height);
+ renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+
+ // 4. Lighting
+ const ambientLight = new THREE.AmbientLight(0xffffff, mergedConfig.ambientIntensity);
+ scene.add(ambientLight);
+
+ const dirLight1 = new THREE.DirectionalLight(0xffffff, mergedConfig.pointLightIntensity);
+ dirLight1.position.set(mergedConfig.radius * 5, mergedConfig.radius * 3, mergedConfig.radius * 5);
+ scene.add(dirLight1);
+
+ const dirLight2 = new THREE.DirectionalLight(0x88ccff, mergedConfig.pointLightIntensity * 0.4);
+ dirLight2.position.set(-mergedConfig.radius * 4, mergedConfig.radius * 2, -mergedConfig.radius * 3);
+ scene.add(dirLight2);
+
+ // 5. Globe Group (contains globe mesh and markers for rotation)
+ const globeGroup = new THREE.Group();
+ scene.add(globeGroup);
+
+ // Load Textures
+ const textureLoader = new THREE.TextureLoader();
+ textureLoader.crossOrigin = "anonymous";
+
+ const earthTexture = textureLoader.load(mergedConfig.textureUrl);
+ earthTexture.colorSpace = THREE.SRGBColorSpace;
+ const bumpTexture = textureLoader.load(mergedConfig.bumpMapUrl);
+
+ // Globe Mesh
+ const globeGeometry = new THREE.SphereGeometry(mergedConfig.radius, 64, 64);
+ const globeMaterial = new THREE.MeshStandardMaterial({
+ map: earthTexture,
+ bumpMap: bumpTexture,
+ bumpScale: mergedConfig.bumpScale * 0.05,
+ roughness: 0.8,
+ metalness: 0.1,
+ });
+ const globeMesh = new THREE.Mesh(globeGeometry, globeMaterial);
+ globeGroup.add(globeMesh);
+
+ // Atmosphere Mesh
+ let atmosphereMesh;
+ if (mergedConfig.showAtmosphere) {
+ const fresnelPower = 6.0; // Higher power = thinner, softer glow
+ const atmosphereMaterial = new THREE.ShaderMaterial({
+ uniforms: {
+ atmosphereColor: { value: new THREE.Color(mergedConfig.atmosphereColor) },
+ intensity: { value: mergedConfig.atmosphereIntensity },
+ fresnelPower: { value: fresnelPower },
+ },
+ vertexShader: atmosphereVertexShader,
+ fragmentShader: atmosphereFragmentShader,
+ side: THREE.BackSide,
+ transparent: true,
+ depthWrite: false,
+ });
+
+ // Atmosphere is slightly larger than the globe
+ const atmosphereGeometry = new THREE.SphereGeometry(mergedConfig.radius * 1.04, 64, 32);
+ atmosphereMesh = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
+ scene.add(atmosphereMesh);
+ }
+
+ // 6. Build markers and pins inside globeGroup
+ const tips = [];
+ const markerGroups = [];
+
+ markers.forEach((marker) => {
+ const markerGroup = new THREE.Group();
+
+ const surfacePos = latLngToVector3(marker.lat, marker.lng, mergedConfig.radius * 1.001);
+ const topPos = latLngToVector3(marker.lat, marker.lng, mergedConfig.radius * 1.16);
+
+ // Pin line
+ const direction = topPos.clone().sub(surfacePos).normalize();
+ const lineHeight = topPos.distanceTo(surfacePos);
+ const lineCenter = surfacePos.clone().lerp(topPos, 0.5);
+
+ const lineGeometry = new THREE.CylinderGeometry(0.003, 0.003, lineHeight, 8);
+ const lineMaterial = new THREE.MeshBasicMaterial({
+ color: 0x94a3b8,
+ transparent: true,
+ opacity: 0.5,
+ });
+ const lineMesh = new THREE.Mesh(lineGeometry, lineMaterial);
+
+ // Orient cylinder
+ const quaternion = new THREE.Quaternion();
+ quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction);
+ lineMesh.position.copy(lineCenter);
+ lineMesh.quaternion.copy(quaternion);
+ markerGroup.add(lineMesh);
+
+ // Cone at surface
+ const coneGeometry = new THREE.ConeGeometry(0.012, 0.035, 8);
+ const coneMaterial = new THREE.MeshBasicMaterial({ color: 0xef4444 });
+ const coneMesh = new THREE.Mesh(coneGeometry, coneMaterial);
+ coneMesh.position.copy(surfacePos);
+ coneMesh.quaternion.copy(quaternion);
+ markerGroup.add(coneMesh);
+
+ // Tip Object3D (for tracking world coords)
+ const tipObject = new THREE.Object3D();
+ tipObject.position.copy(topPos);
+ markerGroup.add(tipObject);
+ tips.push(tipObject);
+
+ globeGroup.add(markerGroup);
+ markerGroups.push({ lineMaterial, coneMaterial });
+ });
+
+ markerTipObjects.current = tips;
+
+ // 7. OrbitControls
+ const controls = new OrbitControls(camera, renderer.domElement);
+ controls.enableDamping = true;
+ controls.dampingFactor = 0.05;
+ controls.enablePan = mergedConfig.enablePan;
+ controls.enableZoom = mergedConfig.enableZoom;
+ controls.minDistance = mergedConfig.minDistance;
+ controls.maxDistance = mergedConfig.maxDistance;
+ controls.rotateSpeed = 0.5;
+
+ // 8. Animation & Render Loop
+ let animationFrameId;
+ const tempV = new THREE.Vector3();
+
+ const animate = () => {
+ // Auto rotation
+ if (mergedConfig.autoRotateSpeed > 0) {
+ globeGroup.rotation.y += (mergedConfig.autoRotateSpeed * 0.005);
+ }
+
+ controls.update();
+
+ // Render Three.js scene
+ renderer.render(scene, camera);
+
+ // Update absolute positioned React avatars
+ if (containerRef.current) {
+ const width = containerRef.current.clientWidth;
+ const height = containerRef.current.clientHeight;
+
+ markers.forEach((marker, index) => {
+ const el = avatarRefs.current[index];
+ const tip = tips[index];
+ if (!el || !tip) return;
+
+ // Get world position of the tip
+ tip.getWorldPosition(tempV);
+
+ // Dot product: positive = facing camera, negative = behind
+ const markerDir = tempV.clone().normalize();
+ const camDir = camera.position.clone().normalize();
+ const dot = markerDir.dot(camDir);
+
+ const isVisible = dot > 0.05; // Slightly lax threshold to prevent sudden cuts on the edge
+
+ if (!isVisible) {
+ el.style.opacity = "0";
+ el.style.pointerEvents = "none";
+ return;
+ }
+
+ // Project to 2D
+ tempV.project(camera);
+
+ const x = (tempV.x * 0.5 + 0.5) * width;
+ const y = (-(tempV.y * 0.5) + 0.5) * height;
+
+ el.style.opacity = "1";
+ el.style.pointerEvents = "auto";
+ el.style.transform = `translate3d(${x}px, ${y}px, 0) translate(-50%, -50%)`;
+ });
+ }
+
+ animationFrameId = requestAnimationFrame(animate);
+ };
+
+ animate();
+
+ // 9. Resize Observer
+ const resizeObserver = new ResizeObserver((entries) => {
+ for (let entry of entries) {
+ const w = containerRef.current?.clientWidth || 0;
+ const h = containerRef.current?.clientHeight || 0;
+ if (w > 0 && h > 0) {
+ camera.aspect = w / h;
+ camera.updateProjectionMatrix();
+ renderer.setSize(w, h);
+ }
+ }
+ });
+ if (containerRef.current) {
+ resizeObserver.observe(containerRef.current);
+ }
+
+ // 10. Cleanups
+ return () => {
+ cancelAnimationFrame(animationFrameId);
+ resizeObserver.disconnect();
+ controls.dispose();
+ renderer.dispose();
+
+ // Dispose all Three.js objects in the scene
+ scene.traverse((object) => {
+ if (object.geometry) object.geometry.dispose();
+ if (object.material) {
+ if (Array.isArray(object.material)) {
+ object.material.forEach((material) => material.dispose());
+ } else {
+ object.material.dispose();
+ }
+ }
+ });
+
+ earthTexture.dispose();
+ bumpTexture.dispose();
+ scene.clear();
+ };
+ }, [markers]);
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/components/ui/dialog.jsx b/src/components/ui/dialog.jsx
index 852ea55..503ed0d 100644
--- a/src/components/ui/dialog.jsx
+++ b/src/components/ui/dialog.jsx
@@ -29,7 +29,7 @@ function DialogOverlay({
return {
+ const sorted = [...points].sort((a, b) => a.y - b.y || a.x - b.x);
+ const rowMap = new Map();
+ let step = 0;
+ let prevY = Number.NaN;
+ let prevXInRow = Number.NaN;
+
+ for (const p of sorted) {
+ if (p.y !== prevY) {
+ prevY = p.y;
+ prevXInRow = Number.NaN;
+ if (!rowMap.has(p.y)) rowMap.set(p.y, rowMap.size);
+ }
+ if (!Number.isNaN(prevXInRow)) {
+ const delta = p.x - prevXInRow;
+ if (delta > 0) step = step === 0 ? delta : Math.min(step, delta);
+ }
+ prevXInRow = p.x;
+ }
+
+ return { xStep: step || 1, yToRowIndex: rowMap };
+ }, [points]);
+
+ return (
+
+ );
+}
diff --git a/src/components/ui/input-otp.jsx b/src/components/ui/input-otp.jsx
index 3a951b0..eb0c1a8 100644
--- a/src/components/ui/input-otp.jsx
+++ b/src/components/ui/input-otp.jsx
@@ -21,7 +21,7 @@ function InputOTP({
function InputOTPGroup({ className, ...props }) {
return ;
}
@@ -36,14 +36,14 @@ function InputOTPSlot({
data-slot="input-otp-slot"
data-active={isActive}
className={cn(
- "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+ "relative flex h-14 w-12 sm:h-16 sm:w-14 items-center justify-center rounded-[14px] border border-slate-200 dark:border-white/10 bg-white dark:bg-white/5 text-2xl font-bold text-slate-900 dark:text-white shadow-[0_2px_10px_rgba(0,0,0,0.02)] transition-all duration-300 outline-none data-[active=true]:z-10 data-[active=true]:border-slate-900 dark:data-[active=true]:border-white data-[active=true]:ring-4 data-[active=true]:ring-slate-900/10 dark:data-[active=true]:ring-white/10",
className
)}
{...props}
>
{char}
{hasFakeCaret &&
-
+
}
;
}
diff --git a/src/components/ui/tailwindcss-buttons.jsx b/src/components/ui/tailwindcss-buttons.jsx
new file mode 100644
index 0000000..966df3a
--- /dev/null
+++ b/src/components/ui/tailwindcss-buttons.jsx
@@ -0,0 +1,204 @@
+
+import { cn } from "@/lib/utils";
+
+// 1. Sketch Button - Neobrutalist design with a solid offset border/shadow on hover
+export function SketchButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 2. Simple Button - Elegant transition with subtle translation & shadow on hover
+export function SimpleButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 3. Invert Button - Simple color inversion on hover
+export function InvertButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 4. Tailwind Connect Button - Premium radial gradient, glow overlay, and bottom gradient line
+export function TailwindConnectButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 5. Gradient Button - Premium smooth vertical gradient with hover shadows
+export function GradientButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 6. Unapologetic Button - Solid flat offset shadow box translating on hover
+export function UnapologeticButton({ children, className, shadowBg = "bg-yellow-300", ...props }) {
+ return (
+
+ );
+}
+
+// 7. Lit Up Borders Button - Sleek indigo-to-purple gradient border container
+export function LitUpBordersButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 8. Border Magic Button - Spinning conic gradient background light loop
+export function BorderMagicButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 9. Shimmer Button - Subtle shifting reflection animation
+export function ShimmerButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 10. Spotify Button - Vibrant green tracking-widest uppercase hover transform
+export function SpotifyButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 11. NextJS Blue Button - Bright blue shadow-glow transition
+export function NextJSBlueButton({ children, className, ...props }) {
+ return (
+
+ );
+}
+
+// 12. NextJS White Button - Pure white card shadow-glow transition
+export function NextJSWhiteButton({ children, className, ...props }) {
+ return (
+
+ );
+}
diff --git a/src/components/ui/toast.jsx b/src/components/ui/toast.jsx
index 9aed58e..97613a8 100644
--- a/src/components/ui/toast.jsx
+++ b/src/components/ui/toast.jsx
@@ -2,7 +2,7 @@
import * as React from "react";
import * as ToastPrimitives from "@radix-ui/react-toast";
import { cva } from "class-variance-authority";
-import { X, CheckCircle, XCircle, AlertCircle, Info } from "lucide-react";
+import { X } from "lucide-react";
import { cn } from "@/lib/utils";
const ToastProvider = ToastPrimitives.Provider;
@@ -11,7 +11,7 @@ const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (
(
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
const toastVariants = cva(
- "group pointer-events-auto relative flex w-full items-start gap-4 overflow-hidden rounded-lg border-4 p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,0.9)] transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full",
+ "group pointer-events-auto relative flex w-full items-start gap-4 overflow-hidden rounded-xl border p-5 shadow-xl dark:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.7)] backdrop-blur-xl transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full",
{
variants: {
variant: {
- default: "border-[#1A1A1A] bg-white text-[#1A1A1A]",
- destructive: "border-red-600 bg-red-50 text-red-900",
- success: "border-green-600 bg-green-50 text-green-900",
+ default: "bg-white/90 dark:bg-[#1A1A1A]/80 border-slate-200/80 dark:border-white/10 text-slate-900 dark:text-white",
+ destructive: "border-red-500/30 dark:border-red-500/30 bg-red-50/90 dark:bg-red-950/80 text-red-900 dark:text-red-400",
+ success: "border-emerald-500/30 dark:border-emerald-500/30 bg-emerald-50/90 dark:bg-emerald-950/80 text-emerald-900 dark:text-emerald-400",
},
},
defaultVariants: {
@@ -51,7 +51,7 @@ const ToastAction = React.forwardRef(({ className, ...props }, ref) => (
(
(
+ The price of admission is zero.
-For too long, gatekeepers have put a price tag on your identity. We believe your first idea, your tenth side project, and your portfolio deserve a home, not a monthly bill.
- Indevs is our contribution to the chaotic, beautiful mess that is the open web. - Claim your *.indevs.in domain. Point it at Vercel, Netlify, or that - Raspberry Pi in your closet. No strings attached. Just pure DNS freedom. + Stackryze Domains is our contribution to the chaotic, beautiful mess that is the open web. + Claim your domain, point it anywhere, and deploy. No strings attached.
+
{feature.title}
-
+
{feature.description}
- Β© 2025 Indevs. Open source and proud of it. + Β© 2026 Stackryze domains. Open source and proud of it.
A project by Stackryze (Registered MSME, India)
diff --git a/src/components/header.jsx b/src/components/header.jsx
index f417750..a3c02ce 100644
--- a/src/components/header.jsx
+++ b/src/components/header.jsx
@@ -1,53 +1,65 @@
-import { useLocation } from "react-router-dom";
+import { useState, useEffect } from "react";
+
import { useAuth } from "../context/auth-context";
-import { LayoutDashboard } from "lucide-react";
+import { LayoutDashboard, Sun, Moon } from "lucide-react";
+import { useTheme } from "next-themes";
export function Header() {
- const location = useLocation();
+
const { user } = useAuth();
- const isDashboard = location.pathname.startsWith("/dashboard");
+ const { theme, setTheme } = useTheme();
+ const [isScrolled, setIsScrolled] = useState(false);
+
+ useEffect(() => {
+ const handleScroll = () => {
+ setIsScrolled(window.scrollY > 10);
+ };
+ window.addEventListener("scroll", handleScroll);
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, []);
return (
-
- Free Domains for Developers
-
+
- Made for the world, by Indians.
-
+ A public namespace for everyone to belong online. Made for the world. 100% free and open-source.
-
-
-
+
+
+ We're a small team of students with a passion for making the internet more open and accessible. Your support helps us keep this project free and continue improving it for everyone.
+ We are a small team of passionate developers building an open, accessible, and community-driven namespace for the modern internet.
+
+ Providing completely free domain names for open-source projects, communities, and individuals to launch ideas without financial barriers.
+
+ Enjoy fast and simple domain management, robust built-in security with automated abuse prevention, and absolutely zero hidden fees or upsells.
+ {f.subtitle}
+ {f.description}
+
+ Lightning-fast resolution from edge nodes worldwide, ensuring your domain resolves instantly anywhere on the planet.
+
- These industry leaders help us keep Indevs free, open-source, and accessible to everyone.
-
-
- {sponsor.name}
-
- {' '}{sponsor.description.replace(sponsor.name + ' ', '')}
-
- Stackryze Domains
+
+
+ Stackryze Domains
- A FREE NAME
- FOR EVERYONE.
+
+ A NAME FOR EVERYONE ONLINE.
-
- 100% Open Source and cost-free. No strings attached.
+
+ Trusted by developers worldwide
+
+
+ Who are we?
+
+ {f.title}
+
+ Connecting the world
+
+
+ Globally Distributed Name Servers
+
+
- Sponsored By
+
+ Trusted By
-
-
-
-
+
))}