Official landing page for Helixque - a professional networking platform where developers, designers, founders, and learners connect for instant matching based on skills, industry, and language.
- About Helixque
- Landing Page Features
- Landing Page Sections
- Why Helixque Matters
- Join the Community
- Getting Started
- Development Setup
- Tech Stack
Helixque is a professional networking platform that enables instant matching based on skills, industry, and language—making it easy to learn, mentor, and collaborate through structured text or video sessions. This repository contains the marketing landing page that showcases the platform's features and value proposition.
helixque.vercel.app
- Matches users by skills, industry, and language
- Balances experience levels for productive conversations
- Randomized pairing to reduce bias
- Mock Interviews: Technical & behavioral interview practice
- Pair Programming: Collaborative coding sessions and code reviews
- Portfolio Critiques: Get feedback on your work
- Startup Pitch Practice: Refine your pitch with experienced founders
- Instant chat and video calls
- No awkward cold outreach—just meaningful interactions
- Structured sessions for productive collaboration
- Showcase your skills, experience level, and goals
- Clarify whether you're here to learn, mentor, or collaborate
- Build trust through verified profiles and session history
This landing page serves as the first touchpoint for users discovering Helixque. It's designed to:
- Communicate Value: Clearly explain what Helixque does and who it's for
- Drive Conversions: Guide visitors to sign up and start networking
- Build Trust: Showcase social proof, features, and community
- Engage Visitors: Interactive animations and modern UI keep users interested
- Modern Tech Stack: Built with Next.js 15, React 19, TypeScript, and Tailwind CSS 4
- Dark/Light Mode: Seamless theme switching with next-themes
- Responsive Design: Fully responsive across all device sizes
- Interactive Components: Animated elements using Framer Motion to showcase Helixque's capabilities
- Performance Optimized: Fast loading times and excellent Core Web Vitals scores
- SEO Ready: Comprehensive meta tags and structured data for search engines
- Beautiful UI Elements: 50+ custom components including:
- Animated hero sections with dynamic text rotation
- Interactive feature showcases with animated beams
- Benefits sections with timeline animations
- Professional pricing tables
- Social proof and testimonial sections
- Dynamic text rotation showcasing Helixque's value proposition
- Animated gradient backgrounds with dot patterns
- Clear call-to-action buttons
- Dashboard preview mockup
- Interactive demonstrations of platform capabilities
- Animated beams connecting related features
- Orbiting elements showing ecosystem
- Responsive grid layouts
- Timeline-based animations
- User testimonials and success stories
- Statistics and social proof
- Trust indicators
- Clear pricing tiers (Free to start!)
- Feature comparison tables
- Interactive hover effects
- Call-to-action for sign-ups
The hero section features dynamic text rotation cycling through words like "Better", "Perfect", "Modern", and "Unique". It includes:
- Animated gradient backgrounds with dot patterns
- Responsive typography that scales beautifully
- Call-to-action buttons with shimmer effects
- Dashboard mockup with overlay effects
Built with Framer Motion for smooth, performant animations:
- Animated Beams: SVG-based connecting lines between components
- Orbiting Circles: Circular motion animations around central elements
- Text Effects: Scramble animations, underline reveals, and rotation cycles
- Scroll Animations: Elements animate as they enter the viewport
Over 50 reusable components including:
- Cards: Interactive cards with hover effects and gradient borders
- Buttons: Shimmer buttons, gradient buttons, outline variants
- Navigation: Responsive headers with mobile drawer navigation
- Layouts: Grid systems, timeline layouts, and flexible containers
- Forms: Input fields, dropdowns, and form validation
Sophisticated dark/light mode implementation:
- System preference detection
- Smooth transitions between themes
- CSS custom properties for consistent theming
- Per-component theme variants
- Image Optimization: Next.js Image component with lazy loading
- Bundle Splitting: Automatic code splitting for optimal loading
- Font Loading: Geist font family with display optimization
- CSS Optimization: Tailwind CSS with purging for minimal bundle size
Helixque is more than just a platform, it's a growing network of professionals practicing together in a safe, structured environment.
- Safe Learning Environment: Practice and improve without judgment
- Diverse Network: Connect with developers, designers, and founders globally
- Open Source: Contribute to the platform and shape its future
- Active Discord: Get feedback, share ideas, and collaborate with the team
- Hacktoberfest Participant: Contribute during Hacktoberfest and earn recognition
- 🌐 Visit Platform: helixque.vercel.app
- ⭐ Star on GitHub: github.com/HXQLabs/helixque-landing
- 💬 Join Discord: discord.gg/helixque
- 🐛 Report Issues: GitHub Issues
- 🎨 Contribute: Submit PRs for features, fixes, or documentation
- Visit helixque.vercel.app
- Create your profile with skills, experience level, and preferences
- Get matched instantly with professionals who match your goals
- Start collaborating through text chat or video calls
- Build your network and improve your skills
Ready to contribute to the landing page? Follow the development setup below.
- Rapid Skill Development: Practice real-world scenarios with peers
- Interview Preparation: Mock interviews to land your dream job
- Code Review Practice: Get feedback and improve your coding style
- Network Building: Connect with developers worldwide
- Learn by Teaching: Mentor others to solidify your own knowledge
- Instant Access to Mentors: Get matched with experienced professionals
- Structured Learning: Focused sessions on specific skills or topics
- Safe Practice Environment: Learn without fear of judgment
- Career Guidance: Get advice from those who've been there
- Free to Start: No financial barrier to entry
- Talent Discovery: Find skilled developers through their interactions
- Team Building: Facilitate internal knowledge sharing
- Interview Process: Use as a screening tool for candidates
- Community Building: Build reputation in the developer community
- Recruitment Pipeline: Connect with motivated, skilled professionals
- TypeScript First: Full type safety across the entire codebase
- ESLint Configuration: Enforced coding standards and best practices
- Component Architecture: Modular, reusable, and maintainable components
- Performance Monitoring: Built-in optimizations for Core Web Vitals
- WCAG Compliance: Follows web accessibility guidelines
- Keyboard Navigation: Full keyboard accessibility support
- Screen Reader Support: Semantic HTML and ARIA labels
- Focus Management: Proper focus handling for interactive elements
- Meta Tags: Comprehensive meta tag management
- Structured Data: JSON-LD for rich search results
- Performance: Optimized for Google's Core Web Vitals
- Mobile First: Responsive design for all devices
The design follows established principles of visual hierarchy:
- Typography Scale: Consistent font sizing and spacing
- Color System: Carefully curated color palette with semantic meaning
- Spacing System: Mathematical spacing scale for visual harmony
- Component States: Clear visual feedback for all interactive elements
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS 4
- Animations: Framer Motion
- Icons: Lucide React & Tabler Icons
- UI Primitives: Radix UI
- Theme Management: next-themes
- Package Manager: Bun
Want to run this landing page locally or contribute? Follow these steps:
- Node.js 18+ or Bun
- Git
- Clone the repository:
git clone https://github.com/HXQLabs/helixque-landing.git
cd helixque-landing- Install dependencies:
bun install
# or
npm install- Start the development server:
bun dev
# or
npm run dev- Open http://localhost:3000 in your browser.
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout with theme provider
│ ├── page.tsx # Main landing page
│ └── globals.css # Global styles and animations
├── components/ # Reusable UI components
│ ├── common/ # Shared components (header, footer)
│ ├── fancy/ # Advanced text animations
│ ├── magicui/ # Interactive UI elements
│ ├── sections/ # Page sections (hero, features, etc.)
│ ├── ui/ # Base UI components
│ └── utils/ # Utility components
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
└── public/ # Static assets
This landing page showcases Helixque's value for different user types:
- Developers: Practice technical interviews, pair program, and get code reviews
- Designers: Share portfolio work and get constructive feedback
- Founders: Refine your pitch and connect with potential co-founders
- Learners: Find mentors and learn from experienced professionals
- Mentors: Share your knowledge and help others grow
- Job Seekers: Practice interviews and build your professional network
We welcome contributions to improve the Helixque landing page! Here's how you can help:
- 🐛 Bug Fixes: Fix issues and improve stability
- ✨ New Features: Add new sections or interactive elements
- 🎨 Design Improvements: Enhance UI/UX and animations
- 📝 Documentation: Improve README, code comments, and guides
- ♿ Accessibility: Make the site more accessible to all users
- ⚡ Performance: Optimize loading times and Core Web Vitals
- Fork this repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes and test thoroughly
- Commit your changes (
git commit -m 'Add amazing feature') - Push to your branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Write clean, maintainable TypeScript code
- Follow the existing code style and conventions
- Test your changes across different screen sizes
- Ensure accessibility standards are met
- Add comments for complex logic
The project uses Tailwind CSS with custom CSS variables for theming. Modify colors in globals.css:
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
/* ... other custom properties */
}All components are modular and can be easily customized. Key sections are located in components/sections/.
Framer Motion configurations can be adjusted in individual components for different animation styles.
- Core Web Vitals: Optimized for excellent performance scores
- Bundle Size: Minimized with tree-shaking and code splitting
- Image Optimization: Next.js Image component with optimized loading
- Font Loading: Optimized with next/font using Geist font family
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
This project is open source and available under the MIT License.
- Helixque Platform: helixque.vercel.app
- Built with Next.js
- UI components inspired by Radix UI
- Animations powered by Framer Motion
- Icons from Lucide and Tabler Icons
- 🌐 Platform: helixque.vercel.app
- 💬 Discord: Join our community server
- ⭐ GitHub: Star this repo and contribute
Built with ❤️ for the Helixque Community
Connecting professionals, one conversation at a time.