https://github.com/ahmadjamil888/advanced_website_design
This is my company site(ZehanX) Technologies.
https://github.com/ahmadjamil888/advanced_website_design
ai company framer-motion futuristic template website
Last synced: about 2 months ago
JSON representation
This is my company site(ZehanX) Technologies.
- Host: GitHub
- URL: https://github.com/ahmadjamil888/advanced_website_design
- Owner: Ahmadjamil888
- License: mit
- Created: 2025-07-20T19:54:01.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-07-30T16:53:25.000Z (3 months ago)
- Last Synced: 2025-07-30T17:12:38.578Z (3 months ago)
- Topics: ai, company, framer-motion, futuristic, template, website
- Language: TypeScript
- Homepage: https://zehanxtech.com/
- Size: 4.11 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 🤖 Zehan X Technologies - AI & Web Development Company
A professional, modern website for Zehan X Technologies, showcasing AI and web development services. Built with Next.js, Shadcn/ui, and Tailwind CSS, featuring contact forms and email integration.
[](https://nextjs.org/)
[](https://tailwindcss.com/)
[](https://www.typescriptlang.org/)
[](https://ui.shadcn.com/)
## 🎯 Features
- **Professional Design**: Clean, modern design that maintains professionalism
- **Futuristic Branding**: "ZEHAN X" logo with futuristic monospace font styling
- **Real Authentication**: Clerk authentication with sign-in/sign-up functionality
- **Complete Service Pages**: Individual pages for each service with detailed information
- **Contact System**: Dedicated contact page with email integration to shazabjamildhami@gmail.com
- **Full Navigation**: Real links to all pages (Home, About, Services, Contact)
- **Responsive Design**: Works perfectly on all devices
- **SEO Optimized**: Meta tags and structure optimized for search engines
## 📄 Pages Structure
- **Home** (`/`) - Main landing page with hero, services overview, stats, FAQ, and CTA
- **About** (`/about`) - Company information, mission, values, and team details
- **Services** (`/services`) - Overview of all services with links to individual service pages
- **Contact** (`/contact`) - Dedicated contact form and company contact information
### Individual Service Pages:
- **AI & Machine Learning** (`/services/ai-machine-learning`)
- **Next.js Development** (`/services/nextjs-development`)
- **Full-Stack Web Development** (`/services/fullstack-web-development`)
- **Deep Learning** (`/services/deep-learning`)
- **AI Chatbots** (`/services/ai-chatbots`)
- **AI Consulting** (`/services/ai-consulting`)
- **Data Analytics** (`/services/data-analytics`)
- **Enterprise Solutions** (`/services/enterprise-solutions`)
> [!TIP]
> **Tailwind v4 + React 19:**
> Launch UI v2.0 adds full support for Tailwind v4, React 19 and Next.js 15.
> If you're using Tailwind 3, a version that supports it is still maintained on a [separate branch](https://github.com/launch-ui/launch-ui/tree/tailwind-3).
## 🚀 Quick Start
1. Install dependencies:
```bash
npm install
```
2. Set up environment variables:
```bash
cp .env.local.example .env.local
```
Edit `.env.local` and add your credentials:
- `GMAIL_USER`: Your Gmail address (shazabjamildhami@gmail.com)
- `GMAIL_APP_PASSWORD`: Your Gmail App Password (generate from Google Account settings)
- `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`: Your Clerk publishable key
- `CLERK_SECRET_KEY`: Your Clerk secret key
3. Start the development server:
```bash
npm run dev
```
4. Open [http://localhost:3000](http://localhost:3000) to view your site
## 🔐 Clerk Authentication Setup
1. Create a Clerk account at [clerk.com](https://clerk.com)
2. Create a new application in your Clerk dashboard
3. Copy your API keys from the Clerk dashboard
4. Add them to your `.env.local` file
## 📧 Email Setup
To receive contact form emails, you need to:
1. Enable 2-factor authentication on your Gmail account
2. Generate an App Password in Google Account settings
3. Add the App Password to your `.env.local` file
## ✨ Features
- 🎨 **Modern Design System**: Built on top of shadcn/ui, offering a clean and professional look
- 📱 **Fully Responsive**: All components work perfectly across desktop, tablet, and mobile devices
- ⚡ **Performance Optimized**: Leverages Next.js 14 features for optimal loading speed
- 🌗 **Dark Mode Support**: Seamless light/dark mode switching with system preference detection
- ♿ **Accessibility First**: WCAG compliant components for inclusive web experiences
- 🎯 **SEO Optimized**: Built with best practices for search engine visibility
## 🧱 Components
### Included
- **Navbar**: Modern navigation component with multiple variants including static and floating styles. Features dropdown menus, mobile responsiveness, and seamless dark mode support
- **Hero**: Stunning hero sections with multiple variants including illustration-based layouts, glowing effects, and mobile app showcases. Built for strong first impressions and effective message delivery
- **Items**: Flexible grid system for feature lists, pricing tables, and product showcases. Includes both default and branded variants with responsive layouts
- **Logos**: Clean logo showcase component with static grid layout. Perfect for displaying brand partnerships and client logos with consistent styling
- **FAQ**: Comprehensive FAQ component with expandable accordions. Features smooth animations and responsive design for optimal user experience
- **Stats**: Versatile statistics display component with horizontal, tiles, and grid layouts. Perfect for showcasing statistics, big numbers, key metrics and data points
- **CTA**: Powerful call-to-action component with multiple styles including box layouts and beam effects. Designed to create compelling sections that drive user engagement
- **Footer**: Versatile footer with multiple layout variants including default, minimal, and multi-column styles. Perfect for organizing site information and links
### In [Pro version](https://launchuicomponents.com/pricing)
- **Bento Grid**: Advanced masonry-style grid system for creating visually appealing content arrangements. Perfect for showcasing features, products, or content in an elegant, card-based layout
- **Feature**: Sophisticated feature showcase with flexible illustration placements and mockup displays. Includes multiple layout options while maintaining shadcn's consistent design language
- **Social Proof**: Advanced social proof displays with masonry layouts, marquee animations, and clickable cards. Built for showcasing user feedback in engaging ways
- **Tabs**: Fully customizable tabs with left, top, and bottom alignments. Built with accessibility in mind for seamless content organization
- **Carousel**: Dynamic carousel component with multiple variants. Features smooth animations, responsive design, and customizable navigation controls
- **Testimonials**: Comprehensive testimonials component with grid layouts, carousels, and static displays. Designed for beautiful, accessible customer feedback showcases
## 🛠️ Tech Stack
- **Framework**: [Next.js 15](https://nextjs.org/)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
- **UI Components**: [shadcn/ui](https://ui.shadcn.com/)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Animations**: CSS animations and transitions
- **Icons**: Lucide icons
## 💡 Use Cases
Launch UI was made for products that need a great-looking, conversion-optimized landing page that speaks to proffessional quality-oriented audiences.
Perfect for building landing pages for:
- 🛠️ **Developer Tools**: Present APIs, SDKs, CLI tools, and technical infrastructure products
- 🤖 **AI-Powered Applications**: Showcase products made with AI, assistants, agents and automation tools
- 💻 **SaaS Products**: Launch web applications, productivity tools, and business solutions
- 📱 **Mobile Apps**: Promote iOS and Android applications with beautiful app showcases
- 🚀 **Startup Products**: Perfect for indie hackers, solo founders, and technical startups
- ⚡ **Technical Products**: Ideal for technical products, development tools, and programming software
## 📝 License
This repository is licensed under the [MIT License](https://github.com/launch-ui/launch-ui/blob/main/LICENSE.md).
---