development/3d25906a-31c8-498a-aae7-288b45410e30
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-01-21 19:09:49 +02:00
commit 102351926c
259 changed files with 50011 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

526
src/app/globals.css Normal file
View File

@@ -0,0 +1,526 @@
@import "tailwindcss";
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #fafffb;;
--card: #f7fffa;;
--foreground: #001a0a;;
--primary-cta: #0a7039;;
--secondary-cta: #ffffff;;
--accent: #a8d9be;;
--background-accent: #6bbf8e;; */
--background: #fafffb;;
--card: #f7fffa;;
--foreground: #001a0a;;
--primary-cta: #0a7039;;
--secondary-cta: #ffffff;;
--accent: #a8d9be;;
--background-accent: #6bbf8e;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-secondary-cta: var(--secondary-cta);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-rubik), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-rubik), sans-serif;
}

1265
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

274
src/app/page.tsx Normal file
View File

@@ -0,0 +1,274 @@
"use client"
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import { CheckCircle, HelpCircle, Shield, Star, TrendingUp, Zap } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="mediumSmall"
sizing="mediumLarge"
background="none"
cardStyle="layered-gradient"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Glyde"
navItems={[
{ name: "Features", id: "features" },
{ name: "Security", id: "security" },
{ name: "Metrics", id: "metrics" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" }
]}
button={{
text: "Launch App", href: "https://app.glyde.exchange"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
title="Trade Crypto with Confidence on Glyde"
description="The most secure and efficient decentralized exchange platform. Swap tokens instantly with zero intermediaries, transparent pricing, and advanced security protocols protecting your assets."
tag="Launch Your Trades"
tagIcon={Zap}
mediaItems={[
{
imageSrc: "https://img.b2bpic.net/free-photo/bitcoin-coin-keyboard-with-nice-background-crypto-money-concept_169016-61045.jpg", imageAlt: "Glyde trading interface dashboard"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/bitcoin-coin-keyboard-with-nice-background-crypto-money-concept_169016-60818.jpg", imageAlt: "Decentralized network visualization"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/golden-bitcoin-coin-keyboard-stock-market-trading-chart-online-candlestick_169016-66293.jpg", imageAlt: "Secure cryptocurrency transaction"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/bitcoin-coin-keyboard-with-nice-background-crypto-money-concept_169016-61045.jpg", imageAlt: "Advanced trading tools"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/bitcoin-coin-keyboard-with-nice-background-crypto-money-concept_169016-60818.jpg", imageAlt: "Blockchain ecosystem"
}
]}
buttons={[
{
text: "Start Trading Now", href: "https://app.glyde.exchange"
},
{
text: "Learn More", href: "#features"
}
]}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title="About Glyde"
description={[
"Glyde is a next-generation decentralized exchange built for speed, security, and simplicity. We've eliminated the friction of traditional crypto trading by creating a platform where users maintain complete control of their assets while enjoying seamless token swaps.", "Our mission is to democratize access to decentralized finance. Whether you're a seasoned trader or just entering the crypto space, Glyde provides the tools, transparency, and security you need to execute trades with confidence. Every transaction is protected by advanced encryption and smart contract audits.", "With Glyde, you're not just trading—you're joining a community committed to building the future of finance. We prioritize user trust above all else, which is why we maintain full transparency in our operations and regularly publish security audits."
]}
buttons={[
{
text: "Read Our Whitepaper", href: "https://docs.glyde.exchange/whitepaper"
},
{
text: "Join Community", href: "https://discord.gg/glyde"
}
]}
showBorder={true}
useInvertedBackground="noInvert"
/>
</div>
<div id="features" data-section="features">
<FeatureCardSixteen
title="Why Choose Glyde Over Traditional Exchanges"
description="Experience the difference between centralized and decentralized trading. Glyde eliminates intermediaries, reduces fees, and puts you in control."
tag="Comparison"
tagIcon={CheckCircle}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
negativeCard={{
items: [
"High trading fees and hidden costs", "Centralized control of your assets", "Slow withdrawal processes", "Limited token selection", "Regulatory restrictions and compliance delays", "Single point of failure risk"
]
}}
positiveCard={{
items: [
"Ultra-low fees with transparent pricing", "Non-custodial wallet integration", "Instant settlements on-chain", "Access to thousands of token pairs", "Community-driven governance", "Resilient decentralized infrastructure"
]
}}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
title="Glyde Platform Performance"
description="Real-time statistics demonstrating the strength and adoption of our decentralized exchange ecosystem."
tag="Live Stats"
tagIcon={TrendingUp}
animationType="slide-up"
gridVariant="uniform-all-items-equal"
textboxLayout="default"
useInvertedBackground="noInvert"
metrics={[
{
id: "1", value: "$2.8B+", description: "Total Value Locked (TVL)"
},
{
id: "2", value: "150K+", description: "Active Daily Traders"
},
{
id: "3", value: "$500M+", description: "Daily Trading Volume"
},
{
id: "4", value: "99.99%", description: "Platform Uptime"
}
]}
/>
</div>
<div id="security" data-section="security">
<FeatureCardSixteen
title="Security First. Always."
description="Your assets are protected by enterprise-grade security measures, regular audits, and industry-leading smart contract protection protocols."
tag="Security"
tagIcon={Shield}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
negativeCard={{
items: [
"Unaudited smart contracts", "Single signature authentication", "No liquidity insurance", "Exposure to flash loan attacks", "No emergency pause mechanisms"
]
}}
positiveCard={{
items: [
"Triple-audited smart contracts", "Multi-signature security architecture", "Comprehensive insurance coverage", "Advanced flashloan protection", "Emergency shutdown protocols"
]
}}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
title="Trusted by Thousands of Traders"
description="Join thousands of satisfied users who've made the switch to Glyde for their decentralized trading needs."
tag="User Reviews"
tagIcon={Star}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
speed={40}
topMarqueeDirection="left"
testimonials={[
{
id: "1", name: "Alex Chen", handle: "@alextrader_eth", testimonial: "Glyde's interface is incredibly intuitive. I've cut my trading time in half and reduced fees by 70%. This is the future of crypto trading.", imageSrc: "https://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5366.jpg", imageAlt: "Alex Chen"
},
{
id: "2", name: "Sarah Williams", handle: "@sarahwill_defi", testimonial: "The security measures on Glyde give me complete peace of mind. Finally, a DEX where I trust my assets are truly safe.", imageSrc: "https://img.b2bpic.net/free-photo/businessman-wearing-coat_1098-3778.jpg", imageAlt: "Sarah Williams"
},
{
id: "3", name: "Marcus Johnson", handle: "@mjohn_crypto", testimonial: "Best liquidity I've seen on any decentralized exchange. Slippage is minimal and execution is lightning fast. Highly impressed.", imageSrc: "https://img.b2bpic.net/free-photo/company-administrator-searching-new-solution-obtain-business-growth-working-hard_482257-136146.jpg", imageAlt: "Marcus Johnson"
},
{
id: "4", name: "Emma Rodriguez", handle: "@emmadefi", testimonial: "The transparency and community governance on Glyde are game-changers. I feel like my voice actually matters as a user.", imageSrc: "https://img.b2bpic.net/free-photo/portrait-fashionable-well-dressed-man-with-beard-posing-outdoors_1328-3268.jpg", imageAlt: "Emma Rodriguez"
},
{
id: "5", name: "David Park", handle: "@davidpark_eth", testimonial: "Customer support is exceptional. Every question I had was answered within minutes. This level of care is rare in crypto.", imageSrc: "https://img.b2bpic.net/free-photo/confident-handsome-middle-aged-entrepreneur_1262-4871.jpg", imageAlt: "David Park"
},
{
id: "6", name: "Jessica Moore", handle: "@jmoore_trading", testimonial: "I've tried dozens of DEXs. Glyde is the only one I use now. The combination of features, security, and user experience is unmatched.", imageSrc: "https://img.b2bpic.net/free-photo/portrait-bald-senior-dressed-stylish-suit-posing-against-dark-background_613910-17578.jpg", imageAlt: "Jessica Moore"
}
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
title="Frequently Asked Questions"
description="Get answers to common questions about using Glyde, our security practices, and how decentralized trading works."
tag="Help Center"
tagIcon={HelpCircle}
textboxLayout="default"
useInvertedBackground="invertDefault"
animationType="smooth"
faqs={[
{
id: "1", title: "What is a decentralized exchange (DEX) and how does Glyde work?", content: "A decentralized exchange allows users to trade cryptocurrency directly from their wallets without relying on a centralized intermediary. Glyde uses automated market maker (AMM) technology and smart contracts to facilitate trades. You maintain complete custody of your assets throughout the process, and all transactions are recorded on the blockchain."
},
{
id: "2", title: "Is my cryptocurrency safe on Glyde?", content: "Yes. Glyde uses non-custodial technology, meaning you control your private keys and funds at all times. Our smart contracts have been audited by three independent security firms. We also implement multi-signature security, emergency pause protocols, and insurance coverage for additional protection."
},
{
id: "3", title: "What are the trading fees on Glyde?", content: "Glyde charges a base trading fee of 0.25% per swap, which is significantly lower than centralized exchanges (typically 0.5-1%). There are no hidden fees or withdrawal charges. Liquidity providers earn fees from each trade conducted on their pools."
},
{
id: "4", title: "How do I get started trading on Glyde?", content: "Getting started is simple: 1) Connect your crypto wallet (MetaMask, WalletConnect, or any ERC-20 compatible wallet), 2) Deposit the tokens you want to trade, 3) Select your trading pair and execute your swap. Your transaction is processed instantly on-chain."
},
{
id: "5", title: "What blockchain networks does Glyde support?", content: "Glyde is available on Ethereum, Polygon, Arbitrum, and Optimism. We're continuously expanding to new networks based on community demand. Each network maintains the same security standards and low-fee structure."
},
{
id: "6", title: "Can I lose my funds on Glyde?", content: "Like all cryptocurrency trading, there are inherent market risks. However, Glyde's smart contracts eliminate counterparty risk and exchange hack exposure. Your funds are always in your control. We recommend starting with small trades as you familiarize yourself with the platform."
},
{
id: "7", title: "How does Glyde governance work?", content: "Glyde token holders can vote on platform improvements, fee structures, and future development directions. Our DAO governance model ensures that all major decisions are made by the community. Voting power is proportional to tokens held."
},
{
id: "8", title: "What's the difference between Glyde and other DEXs?", content: "Glyde stands out through superior security (triple-audited contracts), lowest fees in the industry (0.25%), exceptional user experience, dedicated community support, and advanced trading features like limit orders and yield farming. Our governance model also gives users real influence over platform direction."
}
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="Glyde"
copyrightText="© 2025 Glyde Protocol. All rights reserved."
columns={[
{
title: "Product", items: [
{ label: "Launch App", href: "https://app.glyde.exchange" },
{ label: "Features", href: "#features" },
{ label: "Security", href: "#security" },
{ label: "Pricing", href: "#metrics" }
]
},
{
title: "Resources", items: [
{ label: "Documentation", href: "https://docs.glyde.exchange" },
{ label: "Whitepaper", href: "https://docs.glyde.exchange/whitepaper" },
{ label: "API Reference", href: "https://docs.glyde.exchange/api" },
{ label: "Blog", href: "https://blog.glyde.exchange" }
]
},
{
title: "Community", items: [
{ label: "Discord", href: "https://discord.gg/glyde" },
{ label: "Twitter", href: "https://twitter.com/glydeprotocol" },
{ label: "GitHub", href: "https://github.com/glyde-protocol" },
{ label: "Governance", href: "https://governance.glyde.exchange" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}