Automatically publish AI-powered posts about your GitHub commits to Telegram
A stunning landing page built with the Bitcoin DeFi aesthetic – featuring luminescent energy, mathematical precision, and layered depth that makes your code broadcasts feel like digital gold.
- Bitcoin DeFi Aesthetic – True void backgrounds (#030304) with Bitcoin orange (#F7931A) and digital gold (#FFD600) accents
- Colored Glow Shadows – No black shadows, only orange/gold luminescence
- Glass Morphism – Translucent panels with backdrop blur effects
- Grid Patterns – Subtle blockchain-inspired network backgrounds
- 3D Animations – Spinning orbital rings, floating cards, pulsing indicators
- English and Russian language support
- Elegant floating language switcher (top-right corner)
- Persistent language selection via localStorage
- Full translation coverage across all sections
- Mobile-first approach
- Smooth animations and interactions
- Touch-friendly buttons (44px+ targets)
- Adaptive typography scaling
- Built with Shadcn/ui patterns
- Custom Bitcoin DeFi styled components:
Button– Gradient pill buttons with glow effectsCard– Elevated surfaces with hover animationsInput– Minimalist bottom-border inputs
- Type-safe variants using
class-variance-authority
| Technology | Purpose |
|---|---|
| Vite | Lightning-fast dev server & build tool |
| React 18 | UI component library |
| TypeScript | Type safety & developer experience |
| Tailwind CSS v3 | Utility-first styling |
| i18next | Internationalization framework |
| Lucide React | Beautiful, consistent icons |
| CVA | Type-safe component variants |
- Space Grotesk – Headings (geometric grotesque with technical character)
- Inter – Body text (highly legible, screen-optimized)
- JetBrains Mono – Data & stats (precision monospace)
- Node.js 18+ and npm
# Clone the repository
git clone <your-repo-url>
cd commitcasterweb
# Install dependencies
npm install
# Start development server
npm run devThe app will be available at http://localhost:5173/ (or 5174 if 5173 is in use)
# Create optimized production build
npm run build
# Preview production build locally
npm run previewcommitcasterweb/
├── public/ # Static assets
├── src/
│ ├── components/
│ │ ├── ui/ # Base UI components
│ │ │ ├── button.tsx # Button with gradient & glow
│ │ │ ├── card.tsx # Card with hover lift effect
│ │ │ └── input.tsx # Minimalist input field
│ │ ├── sections/ # Landing page sections
│ │ │ ├── Hero.tsx # Hero with 3D orb animation
│ │ │ ├── Features.tsx # Feature grid with icons
│ │ │ ├── HowItWorks.tsx # Blockchain-style timeline
│ │ │ ├── Trust.tsx # Stats & testimonials
│ │ │ └── Footer.tsx # Footer with links
│ │ └── LanguageSwitcher.tsx # Floating language toggle
│ ├── lib/
│ │ ├── i18n.ts # i18next configuration
│ │ └── utils.ts # cn() utility for class merging
│ ├── locales/
│ │ ├── en.json # English translations
│ │ └── ru.json # Russian translations
│ ├── App.tsx # Main app component
│ ├── main.tsx # App entry point
│ └── index.css # Global styles & Tailwind
├── tailwind.config.js # Tailwind + design tokens
├── tsconfig.json # TypeScript configuration
├── vite.config.ts # Vite configuration
└── package.json # Dependencies & scripts
{
background: '#030304', // True Void
surface: '#0F1115', // Dark Matter
foreground: '#FFFFFF', // Pure Light
muted: '#94A3B8', // Stardust
border: '#1E293B', // Dim Boundary
primary: '#F7931A', // Bitcoin Orange
'primary-burnt': '#EA580C', // Burnt Orange
'primary-gold': '#FFD600', // Digital Gold
}shadow-glow-orange → 0 0 20px -5px rgba(234, 88, 12, 0.5)
shadow-glow-orange-lg → 0 0 30px -5px rgba(247, 147, 26, 0.6)
shadow-glow-gold → 0 0 20px rgba(255, 214, 0, 0.3)
shadow-card-elevation → 0 0 50px -10px rgba(247, 147, 26, 0.1)animate-float– Smooth vertical floating (8s loop)animate-spin-slow– 10s rotation for outer ringanimate-spin-reverse– 15s reverse rotation for inner ringanimate-bounce– Staggered bouncing for floating cards
-
Create a new translation file in
src/locales/:src/locales/es.json # Spanish example -
Add translations following the existing structure:
{ "hero": { "badge": "Impulsado por IA", "title": "Transmite Tu Código", ... } } -
Register the language in
src/lib/i18n.ts:import es from '@/locales/es.json' const resources = { en: { translation: en }, ru: { translation: ru }, es: { translation: es } // Add here }
-
Update the
LanguageSwitcher.tsxcomponent to include your new language option.
Light emanates from interactive elements. Shadows are colored (orange/gold), never pure black.
Ultra-thin 1px borders, monospace fonts for data, strict geometric alignment.
3D space through glass morphism, colored glows, and backdrop blur—digital depth, not physical.
Backgrounds breathe with grid patterns, radial gradients, and subtle noise textures.
High contrast, clear hierarchy, and technical precision communicate security and reliability.
Contributions are welcome! Please follow these guidelines:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Follow the existing code style and design system
- Ensure all text is translatable (use i18next)
- Test on mobile and desktop
- Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
| Command | Description |
|---|---|
npm run dev |
Start development server with HMR |
npm run build |
Build for production (output to dist/) |
npm run preview |
Preview production build locally |
npm run lint |
Run ESLint for code quality |
This project is licensed under the MIT License – see the LICENSE file for details.
- Bitcoin for the iconic orange that powers this design
- Tailwind CSS for the utility-first philosophy
- Shadcn/ui for component architecture patterns
- Lucide for beautiful, consistent icons
- i18next for seamless internationalization
For questions, feedback, or collaboration:
- GitHub Issues: Open an issue
- Email: your.email@example.com
Built with ⚡ by developers, for developers
Made with the Bitcoin DeFi aesthetic – where code meets digital gold ✨