This project is a comprehensive clone of the FreekiWebsite website, built from scratch using React and Tailwind CSS. It aims to replicate the design, functionality, and user experience of the original site, including its modern all-black theme and dynamic navigation.
- Complete Website Clone: All major pages from the original FreekiWebsite site are included: Home, Services, Industries, Clients, About, Insights, and Contact.
- Modern All-Black Theme: A sleek and professional all-black design has been implemented across the entire website, providing a consistent and visually appealing user experience.
- Responsive Design: The layout is fully responsive and optimized for various screen sizes, from mobile devices to desktops.
- Dynamic Navigation: The navigation bar is initially transparent, becomes solid on scroll, and hides/appears based on scroll direction for an enhanced UX.
- Component-Based Architecture: Built with a clean and modular component structure in React, making the codebase easy to maintain and scale.
- Custom Tailwind CSS Theme: The project uses a custom Tailwind CSS configuration with a specific color palette, font styles, and animations to match the FreekiWebsite branding.
- Routing with React Router: All page navigation is handled by
react-router-dom, ensuring a seamless single-page application experience. - Netlify Ready: The project includes a
netlify.tomlfile with the necessary build configurations and redirects for easy deployment on Netlify. - Detailed README: This
README.mdprovides comprehensive instructions for installation, development, and deployment.
- React
- Tailwind CSS
- React Router
- Lucide React (for icons)
- Unsplash (for placeholder images)
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
-
Clone the repository:
git clone https://github.com/Teju2025/Development-website-.git cd Development-website- -
Install dependencies:
Using npm:
npm install
Using Yarn:
yarn install
To start the development server, run the following command:
npm startThis will start the app in development mode. Open http://localhost:3000 to view it in your browser. The page will reload when you make changes, and you may also see any lint errors in the console.
To create a production-ready build of the app, run:
npm run buildThis command bundles the app into static files for production and places them in the build directory. It correctly bundles React in production mode and optimizes the build for the best performance.
This project is configured for easy deployment on Netlify.
- Push your code to a GitHub repository.
- Log in to Netlify and select "New site from Git."
- Choose your Git provider (e.g., GitHub) and select the repository.
- Configure the build settings:
- Build command:
npm run build - Publish directory:
build
- Build command:
- Click "Deploy site."
Netlify will automatically build and deploy your site. The netlify.toml file in the repository includes the necessary configurations, including a redirect rule to handle single-page application routing correctly.
# netlify.toml
[build]
command = "npm run build"
publish = "build"
[build.environment]
NODE_VERSION = "18"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── components/
│ │ ├── Navbar.js
│ │ └── Footer.js
│ ├── pages/
│ │ ├── Home.js
│ │ ├── About.js
│ │ ├── ...
│ ├── App.js
│ ├── index.css
│ └── index.js
├── .gitignore
├── netlify.toml
├── package.json
├── README.md
└── tailwind.config.js
This FreekiWebsite clone serves as a comprehensive example of building a modern, fully-featured website with React and Tailwind CSS. It demonstrates best practices in project setup, component architecture, responsive design, and deployment.
- Modern Design: Sleek black theme with professional aesthetics
- Responsive Layout: Fully responsive design that works on all devices
- Interactive Navigation: Multi-level dropdown menus with smooth animations
- Multiple Pages: Complete website with all major sections
- Contact Forms: Functional contact forms with validation
- Case Studies: Showcase of client projects and testimonials
- Services & Industries: Comprehensive service offerings and industry expertise
- Home: Hero section, case studies, testimonials, statistics
- Services: Ideation, Development, Design, AI, Maintenance, Cooperation Models
- Industries: Finance, Commerce, Healthcare, Education, Proptech, Greentech
- Clients: Case studies and client testimonials
- About: Company values, culture, team information
- Insights: Blog posts and newsletters
- Contact: Contact forms and office locations
- React 18: Modern React with hooks and functional components
- Tailwind CSS: Utility-first CSS framework for styling
- React Router: Client-side routing
- Lucide React: Beautiful icons
- Framer Motion: Smooth animations (ready for implementation)
-
Clone the repository
git clone https://github.com/Teju2025/Development-website-.git cd Development-website- -
Install dependencies
npm install
-
Start the development server
npm start
-
Open in browser
http://localhost:3000
This project is configured for easy deployment on Netlify:
-
Connect to Netlify:
- Go to Netlify
- Connect your GitHub account
- Select this repository
-
Build Settings:
- Build command:
npm run build - Publish directory:
build - Node version: 18 (or latest LTS)
- Build command:
-
Environment Variables (if needed):
- Add any environment variables in Netlify dashboard
-
Deploy:
- Netlify will automatically deploy on every push to main branch
-
Build the project:
npm run build
-
Deploy the
buildfolder to your hosting provider
src/
├── components/
│ ├── Navbar.js # Navigation component
│ └── Footer.js # Footer component
├── pages/
│ ├── Home.js # Homepage
│ ├── Services.js # Services page
│ ├── Industries.js # Industries page
│ ├── Clients.js # Clients page
│ ├── About.js # About page
│ ├── Insights.js # Insights/Blog page
│ └── Contact.js # Contact page
├── App.js # Main app component
├── index.js # Entry point
└── index.css # Global styles
The theme uses a black color scheme defined in tailwind.config.js:
- Primary: Black (#000000)
- Secondary: Dark grays (#111111, #1a1a1a)
- Text: White (#ffffff) and light grays
- All styles are in
src/index.cssusing Tailwind CSS - Custom components defined in the CSS file
- Responsive design with mobile-first approach
npm start: Runs the app in development modenpm run build: Builds the app for productionnpm test: Launches the test runnernpm run eject: Ejects from Create React App (not recommended)
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Design inspired by Netguru
- Icons from Lucide React
- Images from Unsplash
For support, email support@example.com or create an issue in this repository.
Made with ❤️ by [Your Name]