A production-oriented React landing page for an electrical engineering and power systems company.
VoltCraft is a single-page marketing website for an electrical engineering contractor. It presents the company, its services, completed projects, delivery process, client feedback, and contact options in a responsive interface with a technical visual language.
The project provides a focused web presence for prospective commercial, industrial, residential, and renewable-energy clients. Its primary goals are to communicate technical credibility, make services easy to scan, showcase representative work, and provide clear paths to request a quote or make contact.
This repository currently contains a frontend-only implementation. There is no backend service, persistent database, authentication layer, or application API.
- Responsive single-page layout with anchored navigation.
- Hero section with primary calls to action and operational status treatment.
- Company overview with animated reveal behavior and value highlights.
- Service catalogue for installation, maintenance, industrial systems, distribution, lighting, and renewable energy.
- Filterable project portfolio by category.
- Process and capability sections with responsive layouts.
- Testimonial carousel with client navigation and ratings.
- Contact and quote-request presentation sections.
- Accessible focus states, semantic headings, alternative text, and reduced-motion support.
- Reusable React components, typed data models, and centralized static content.
| Area | Technology |
|---|---|
| UI | React 18.3.1, React DOM |
| Language | TypeScript 5.6.3 |
| Build tool | Vite 5.4.10 |
| Styling | Tailwind CSS 3.4.14, PostCSS, Autoprefixer |
| Icons | Lucide React |
| Code quality | ESLint 9 with TypeScript and React plugins |
| Fonts | Archivo, Inter, and JetBrains Mono font families configured in Tailwind |
| Backend | None |
| Database | None |
| External APIs | None |
| Deployment target | Any static hosting platform that can serve a Vite build |
The application uses a component-oriented React architecture. App.tsx composes page sections, static content is kept in typed data modules, and small custom hooks isolate scroll-reveal, active-section, and count-up behavior.
flowchart TD
Browser[User browser] --> App[React App]
App --> Nav[Navbar]
App --> Sections[Page sections]
Sections --> Hero[Hero]
Sections --> Content[About, Services, Projects]
Sections --> Trust[Stats, Why Us, Process, Testimonials]
Sections --> Conversion[CTA and Contact]
Content --> Data[Typed static data modules]
Trust --> Hooks[Custom React hooks]
App --> Styles[Tailwind CSS and index.css]
voltcraft-electrical/
├── public/ # Public static assets
├── src/
│ ├── components/ # Page sections and reusable UI components
│ ├── data/ # Typed static content for navigation and sections
│ ├── hooks/ # Scroll, count-up, and active-section hooks
│ ├── types/ # Shared TypeScript interfaces
│ ├── App.tsx # Top-level page composition
│ ├── index.css # Tailwind layers and design-system styles
│ ├── main.tsx # React application entry point
│ └── vite-env.d.ts # Vite type declarations
├── index.html # HTML entry document
├── postcss.config.js # PostCSS configuration
├── tailwind.config.js # Tailwind theme and animation tokens
├── tsconfig.json # TypeScript project configuration
├── vite.config.ts # Vite and React plugin configuration
├── package.json # Scripts and dependencies
└── README.md
- Node.js 18 or later
- npm 9 or later
Check the installed versions:
node --version
npm --versionClone the repository and install dependencies:
git clone https://github.com/TARQkop/voltcraft-electrical.git
cd voltcraft-electrical
npm installThe current frontend does not read environment variables and does not require a .env file. No .env.example is needed for the current implementation.
If a future backend, analytics provider, or form service is introduced, document its public configuration keys in .env.example and keep credentials out of version control.
Start the development server:
npm run devVite will print the local URL, typically http://localhost:5173.
Create a production build:
npm run buildPreview the production build locally:
npm run previewRun the configured linter:
npm run lintThere is no backend or API in this repository. Contact and quote-request interactions are currently presented by the frontend; no HTTP endpoints or server-side form handlers are defined.
The application has no database. All page content is local, typed static data under src/data/.
Because this is a static frontend, there is currently no authentication, authorization, server-side validation, CORS policy, or secret management layer in this repository.
Before connecting forms or external services:
- Validate and sanitize all submitted data on the server.
- Keep API keys and credentials in deployment environment variables.
- Restrict CORS to approved origins.
- Add rate limiting and abuse protection to public form endpoints.
- Avoid storing sensitive customer information in client-side storage.
The application can be deployed to any static hosting provider that supports a Vite output directory, including Vercel, Netlify, Cloudflare Pages, or GitHub Pages with suitable Vite base-path configuration.
Typical deployment commands are:
npm ci
npm run buildServe the generated dist/ directory as the site artifact. The current project does not require deployment environment variables.
The project is designed to run locally with Vite. A public demo URL and repository screenshots have not been configured yet.
Suggested assets for a future release:
- Desktop homepage screenshot
- Mobile homepage screenshot
- Hosted demo link in this section
- Add a production contact form backed by a validated server endpoint.
- Replace placeholder portfolio and testimonial imagery with licensed project photography.
- Add automated unit and component tests.
- Add continuous integration for linting, type-checking, and production builds.
- Add performance and accessibility checks to the CI pipeline.
- Add a content management workflow for projects, services, and testimonials.
- Publish a live deployment and document its release process.
Contributions are welcome. To propose a change:
- Create a focused branch from the default branch.
- Make the smallest coherent change that addresses the issue.
- Run
npm run lintandnpm run buildbefore opening a pull request. - Use a clear commit message that describes the change.
- Open a pull request with context, screenshots for visual changes, and any relevant testing notes.
Keep pull requests focused, preserve existing component patterns, and avoid committing secrets or generated build output.
- Use TypeScript types for shared data and component contracts.
- Keep static content in
src/data/rather than embedding large content blocks in components. - Prefer small, reusable components with clear responsibilities.
- Follow the existing Tailwind utility and design-token conventions.
- Use semantic HTML and meaningful alternative text for images.
- Preserve keyboard focus visibility and reduced-motion behavior.
- Run ESLint and the production build before submitting changes.
- Add tests when introducing stateful behavior or changing user-facing workflows.
No automated test framework or test script is currently configured. The available validation commands are:
npm run lint
npm run buildThe roadmap includes adding unit, component, accessibility, and browser-level coverage.
No open-source license has been declared for this repository yet. Until a license file is added, the source should be treated as all rights reserved. Contributions and reuse should not be assumed to be permitted.
Tariq (TARQkop)