A modern, responsive website for Shepherd - a platform that helps creators and media teams publish videos globally without repetitive work. The platform automatically adapts videos for different languages, regions, and social platforms.
- Home Page - Hero section with video background and call-to-action
- Products Page - Interactive radial orbital timeline showcasing product features
- Pricing Page - Animated pricing cards with monthly and yearly plans
- Smooth Page Transitions - Fade-in animations between routes
- Responsive Design - Mobile-first approach with desktop optimizations
- Modern UI Components - Built with shadcn/ui patterns and Tailwind CSS
- React 18 - UI library
- TypeScript - Type safety
- Vite - Build tool and dev server
- React Router - Client-side routing
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Animation library
- Lucide React - Icon library
- Radix UI - Accessible component primitives
shepherd.world/
├── public/ # Static assets
│ ├── logo.png
│ ├── whitelogo.png
│ └── video.mp4
├── src/
│ ├── components/ # Reusable components
│ │ ├── header/ # Header navigation components
│ │ ├── hero/ # Hero section components
│ │ ├── ui/ # UI components (buttons, cards, etc.)
│ │ └── PageTransition.tsx
│ ├── pages/ # Page components
│ │ ├── Home.tsx
│ │ ├── Products.tsx
│ │ └── Pricing.tsx
│ ├── sections/ # Page sections
│ │ └── UseCasesSection/
│ ├── lib/ # Utility functions
│ │ └── utils.ts
│ ├── App.tsx # Main app component with routing
│ ├── index.tsx # Entry point
│ └── index.css # Global styles
├── package.json
├── vite.config.ts # Vite configuration
├── tailwind.config.js # Tailwind configuration
└── tsconfig.json # TypeScript configuration
- Node.js (v18 or higher)
- npm or yarn
- Clone the repository:
git clone <repository-url>
cd shepherd.world- Install dependencies:
npm install- Start the development server:
npm run devThe app will be available at http://localhost:5173
npm run buildThe production build will be in the dist/ directory.
npm run dev- Start development servernpm run build- Build for production
- Responsive navigation with logo
- Centered navigation links (Home, Pricing)
- Mobile menu button
- Header actions (Log In, Get Started)
- Video background (clickable to play/pause)
- Hero content with headline and CTA
- Responsive design
- Interactive radial orbital timeline
- Feature cards with animations
- Click to expand feature details
- Animated pricing cards
- Monthly and yearly plans
- Border trail animations
- Responsive grid layout
/- Home page/products- Products page with timeline/pricing- Pricing page
The project uses:
- Tailwind CSS for utility classes
- Custom CSS files for complex components (e.g.,
DesktopNav.css) - CSS Modules support available
- Dark theme throughout
react&react-dom- React frameworkreact-router-dom- Routingtypescript- Type safety
tailwindcss- CSS frameworkframer-motion- Animationslucide-react- Icons
@radix-ui/react-slot- Component compositionclass-variance-authority- Component variants
@/maps tosrc/directory- Used for imports like
@/components/ui/button
- React plugin enabled
- Path aliases configured
- Public directory set to
./public
- The video in the hero section is clickable to play/pause
- Page transitions use fade-in animations
- Components follow a modular, component-based architecture
- TypeScript is used throughout for type safety
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
[Add your license here]
Built with ❤️ for Shepherd