DELXAS - The Glass Terminal

AI-Powered Forex Trading & Education Platform

---

🚀 How to Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

The site will be available at http://localhost:3000

---

📁 Folder Structure

delxas/
├── app/                    # Next.js App Router pages
│   ├── blog/              # Blog listing & dynamic post pages
│   │   ├── [slug]/        # Dynamic blog post route
│   │   └── page.tsx       # Blog listing page
│   ├── globals.css        # Design system & Tailwind config
│   ├── layout.tsx         # Root layout with fonts & SEO
│   └── page.tsx           # Home page (Hero, Ticker, Pricing)
├── components/            # React components
│   ├── ui/                # Reusable UI primitives
│   │   ├── GlassCard.tsx  # Glassmorphism container
│   │   ├── MagneticButton.tsx  # Magnetic hover effect
│   │   └── NeonButton.tsx # Glowing CTA button
│   ├── AnimatedChart.tsx  # Hero background SVG animation
│   ├── LogoTicker.tsx     # Infinite scroll ticker
│   └── PricingCard.tsx    # Holographic pricing card
├── content/
│   └── blog/              # MDX blog posts
├── lib/
│   └── blog.ts            # Blog utility functions
└── mdx-components.tsx     # Custom MDX styling

---

✏️ How to Edit Content

Adding a Blog Post

1. Create a new .mdx file in content/blog/:

   content/blog/my-new-post.mdx
   

2. Add frontmatter at the top:

   ---
   title: "My New Post Title"
   date: "2026-01-15"
   author: "Author Name"
   excerpt: "Brief description for the listing page."
   ---
   
   # Your content here...

3. Register the post in lib/blog.ts:

   export const blogPosts: BlogPost[] = [
     // Add your new post
     {
       slug: "my-new-post",
       title: "My New Post Title",
       date: "2026-01-15",
       author: "Author Name",
       excerpt: "Brief description...",
     },
     // ... existing posts
   ];

4. Add the dynamic import in app/blog/[slug]/page.tsx

Editing Pricing

Update the pricingData array in app/page.tsx:

const pricingData = [
  {
    title: "Plan Name",
    price: 160,
    description: "Plan description",
    features: ["Feature 1", "Feature 2"],
    popular: false, // Set true for "Most Popular" badge
  },
  // ...
];

---

🎨 Design System

Color Palette

Name	Hex	Usage
Obsidian	#050A14	Primary background
Obsidian Light	#0a1220	Card backgrounds
Electric Blue	#2E5CFF	Primary accent, CTAs
Cyan	#00F0FF	Secondary accent, glows
Text Primary	#FFFFFF	Headings
Text Secondary	#94A3B8	Body text
Text Muted	#64748B	Subtle text

Typography

Font	Variable	Usage
Space Grotesk	--font-space-grotesk	Headings
Manrope	--font-manrope	Body text
JetBrains Mono	--font-jetbrains-mono	Code/data

CSS Utilities

.glass              /* Glassmorphism container */
.glass-border-gradient  /* Gradient border effect */
.holographic-card   /* Animated holographic card */
.glow-blue          /* Blue box-shadow glow */
.glow-cyan          /* Cyan box-shadow glow */
.text-glow-cyan     /* Cyan text shadow */
.heading-hero       /* Responsive hero heading */
.heading-section    /* Section heading style */
.btn-neon           /* Neon button style */
.ticker-scroll      /* Infinite scroll animation */

---

🛠️ Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript (Strict)
• Styling: Tailwind CSS 4
• Animation: Framer Motion + CSS Animations
• Icons: Lucide React
• Content: MDX

---

📦 Deployment

This project is optimized for Vercel:

1. Push to GitHub
2. Import project on vercel.com
3. Deploy automatically

---

© 2026 DELXAS. All rights reserved.