[05/26, 09:55] Mo Lefatsheng🌍: {
"name": "diraw-enterprise-website",
"version": "1.0.0",
"description": "Diraw Enterprise PTY LTD - Professional Software Engineering Firm Website",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "^14.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"lucide-react": "^0.263.0"
},
"devDependencies": {
"autoprefixer": "^10.4.14",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5"
}
}
[05/26, 09:55] Mo Lefatsheng🌍: /** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
primary: '#FF8C42',
dark: '#1a1f2e',
lightGray: '#f5f7fa',
},
},
},
plugins: [],
}
[05/26, 09:57] Mo Lefatsheng🌍: module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
[05/26, 09:57] Mo Lefatsheng🌍: /** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
}
module.exports = nextConfig
[05/26, 09:57] Mo Lefatsheng🌍: import './globals.css'
import Header from '@/components/Header'
import Footer from '@/components/Footer'
export const metadata = {
title: 'Diraw Enterprise PTY LTD - Software Engineering Firm',
description: 'South Africa\'s trusted software engineering firm building digital solutions that last. Website development, mobile apps, custom software.',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className="bg-white">
<Header />
{children}
<Footer />
</body>
</html>
)
}
[05/26, 09:57] Mo Lefatsheng🌍: 'use client'
import Hero from '@/components/Hero'
import Services from '@/components/Services'
import Portfolio from '@/components/Portfolio'
import Contact from '@/components/Contact'
export default function Home() {
return (
<main>
<Hero />
<Services />
<Portfolio />
<Contact />
</main>
)
}
[05/26, 09:57] Mo Lefatsheng🌍: @tailwind base;
@tailwind components;
@tailwind utilities;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container-custom {
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
}
.btn-primary {
@apply bg-primary text-white px-8 py-3 rounded-lg font-semibold hover:bg-orange-600 transition duration-300 inline-block;
}
.btn-secondary {
@apply border-2 border-primary text-primary px-8 py-3 rounded-lg font-semibold hover:bg-primary hover:text-white transition duration-300 inline-block;
}
.section-padding {
@apply py-20;
}
@media (max-width: 768px) {
.section-padding {
@apply py-12;
}
}
[05/26, 09:58] Mo Lefatsheng🌍: 'use client'
import { useState } from 'react'
import Link from 'next/link'
import { Menu, X } from 'lucide-react'
export default function Header() {
const [isOpen, setIsOpen] = useState(false)
return (
<header className="fixed w-full bg-white shadow-md z-50">
<div className="container-custom flex items-center justify-between py-4">
{/* Logo */}
<Link href="/" className="flex items-center gap-2">
<div className="w-8 h-8 bg-primary rounded"></div>
<div>
<h1 className="font-bold text-lg">Diraw Enterprise</h1>
<p className="text-xs text-primary font-semibold">SOFTWARE ENGINEERING</p>
</div>
</Link>
{/* Desktop Navigation */}
<nav className="hidden md:flex items-center gap-8">
<Link href="#services" className="text-gray-600 hover:text-primary transition">Services</Link>
<Link href="#portfolio" className="text-gray-600 hover:text-primary transition">Our Work</Link>
<Link href="#portfolio" className="text-gray-600 hover:text-primary transition">Portfolio</Link>
<Link href="#about" className="text-gray-600 hover:text-primary transition">About</Link>
<Link href="#contact" className="text-gray-600 hover:text-primary transition">Contact</Link>
</nav>
{/* CTA Button */}
<div className="hidden md:block">
<button className="btn-primary">
Get a Quote
</button>
</div>
{/* Mobile Menu Button */}
<button
className="md:hidden"
onClick={() => setIsOpen(!isOpen)}
>
{isOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
{/* Mobile Menu */}
{isOpen && (
<div className="md:hidden bg-white border-t">
<nav className="flex flex-col gap-4 container-custom py-4">
<Link href="#services" className="text-gray-600 hover:text-primary">Services</Link>
<Link href="#portfolio" className="text-gray-600 hover:text-primary">Our Work</Link>
<Link href="#contact" className="text-gray-600 hover:text-primary">Contact</Link>
<button className="btn-primary w-full text-center">
Get a Quote
</button>
</nav>
</div>
)}
</header>
)
}
[05/26, 09:58] Mo Lefatsheng🌍: 'use client'
export default function Hero() {
return (
<section className="pt-32 pb-20 bg-gradient-to-br from-lightGray to-white">
<div className="container-custom text-center">
<h1 className="text-5xl md:text-6xl font-bold text-dark mb-6 leading-tight">
Building Digital Solutions That Last
</h1>
<p className="text-xl text-gray-600 mb-10 max-w-2xl mx-auto">
South Africa's trusted software engineering firm. We create websites, mobile apps, and custom software solutions that drive your business forward.
</p>
<div className="flex flex-col md:flex-row gap-4 justify-center">
<button className="btn-primary">
Get a Quote
</button>
<button className="btn-secondary">
View Our Work
</button>
</div>
</div>
</section>
)
}
[05/26, 09:58] Mo Lefatsheng🌍: 'use client'
import { Globe, Smartphone, Code, Mail, Wrench, Lightbulb } from 'lucide-react'
const services = [
{
icon: Globe,
title: 'Website Development',
description: 'Professional, responsive websites built with modern technologies.',
},
{
icon: Smartphone,
title: 'Mobile Apps',
description: 'Cross-platform mobile applications for iOS and Android.',
},
{
icon: Code,
title: 'Custom Software',
description: 'Tailored software solutions designed for your specific business needs.',
},
{
icon: Mail,
title: 'Email Hosting',
description: 'Professional branded email hosting with full spam protection.',
},
{
icon: Wrench,
title: 'IT Support & Maintenance',
description: 'Ongoing technical support and maintenance for your systems.',
},
{
icon: Lightbulb,
title: 'Tech Consulting',
description: 'Strategic technology consulting to transform your business.',
},
]
export default function Services() {
return (
<section id="services" className="section-padding bg-white">
<div className="container-custom">
<div className="text-center mb-16">
<span className="text-primary font-semibold text-sm uppercase tracking-wide">SERVICES</span>
<h2 className="text-4xl font-bold text-dark mt-2">What We Offer</h2>
<p className="text-gray-600 mt-4 max-w-2xl mx-auto">
Comprehensive technology solutions to power your business growth.
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{services.map((service, index) => {
const Icon = service.icon
return (
<div
key={index}
className="bg-lightGray p-8 rounded-lg hover:shadow-lg transition duration-300 hover:-translate-y-2"
>
<div className="bg-primary w-14 h-14 rounded-lg flex items-center justify-center mb-4">
<Icon className="text-white" size={28} />
</div>
<h3 className="text-xl font-bold text-dark mb-3">{service.title}</h3>
<p className="text-gray-600">{service.description}</p>
</div>
)
})}
</div>
</div>
</section>
)
}
[05/26, 09:58] Mo Lefatsheng🌍: 'use client'
const projects = [
{
id: 1,
title: 'ISB Web — Skills Marketplace',
category: 'Web + Mobile App',
description: 'A platform connecting businesses, skilled professionals, and individuals in one place — a skills marketplace for South Africa.',
techs: ['React', 'Mobile App', 'TypeScript', 'Node.js'],
image: '🌐',
},
{
id: 2,
title: 'Custom CRM Platform',
category: 'Custom Software',
description: 'A bespoke customer relationship management system built for a South African service business to manage clients and follow-ups.',
techs: ['Node.js', 'PostgreSQL', 'React'],
image: '📊',
},
{
id: 3,
title: 'Mobile Field Service App',
category: 'Mobile App',
description: 'A cross-platform mobile app allowing field technicians to log jobs, capture signatures, and sync data in real time.',
techs: ['React Native', 'Node.js', 'PostgreSQL'],
image: '📱',
},
{
id: 4,
title: 'Corporate Email & Hosting',
category: 'Email Hosting',
description: 'Migrated a 40-person organisation to professional branded email hosting with zero downtime and full spam protection.',
techs: ['cPanel', 'SMTP', 'DNS Management'],
image: '✉️',
},
]
export default function Portfolio() {
return (
<section id="portfolio" className="section-padding bg-lightGray">
<div className="container-custom">
<div className="text-center mb-16">
<span className="text-primary font-semibold text-sm uppercase tracking-wide">OUR WORK</span>
<h2 className="text-4xl font-bold text-dark mt-2">Projects We're Proud Of</h2>
<p className="text-gray-600 mt-4 max-w-2xl mx-auto">
Real solutions delivered for real businesses — here's a sample of what we've built.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
{projects.map((project) => (
<div
key={project.id}
className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"
>
<div className="bg-gradient-to-br from-primary to-orange-600 h-48 flex items-center justify-center text-6xl">
{project.image}
</div>
<div className="p-6">
<span className="inline-block bg-primary text-white px-3 py-1 rounded-full text-xs font-semibold mb-3">
{project.category}
</span>
<h3 className="text-2xl font-bold text-dark mb-2">{project.title}</h3>
<p className="text-gray-600 mb-4">{project.description}</p>
<div className="flex flex-wrap gap-2">
{project.techs.map((tech, index) => (
<span
key={index}
className="bg-lightGray text-dark px-3 py-1 rounded text-sm font-medium"
>
{tech}
</span>
))}
</div>
</div>
</div>
))}
</div>
<div className="text-center mt-16">
<p className="text-gray-600 mb-6">Ready to add your project to this list?</p>
<button className="btn-primary">
Request a Quote
</button>
</div>
</div>
</section>
)
}
[05/26, 09:58] Mo Lefatsheng🌍: 'use client'
import { useState } from 'react'
import { MapPin, Phone, Mail, Globe } from 'lucide-react'
export default function Contact() {
const [formData, setFormData] = useState({
fullName: '',
phone: '',
email: '',
message: '',
})
const handleChange = (e) => {
const { name, value } = e.target
setFormData(prev => ({
...prev,
[name]: value
}))
}
const handleSubmit = (e) => {
e.preventDefault()
// Handle form submission here
console.log('Form submitted:', formData)
alert('Thank you for your message! We\'ll get back to you soon.')
setFormData({ fullName: '', phone: '', email: '', message: '' })
}
return (
<section id="contact" className="section-padding bg-white">
<div className="container-custom">
<div className="grid md:grid-cols-2 gap-12">
{/* Left Column - Contact Info */}
<div>
<span className="text-primary font-semibold text-sm uppercase tracking-wide">GET IN TOUCH</span>
<h2 className="text-4xl font-bold text-dark mt-2 mb-8">
Let's build something great together.
</h2>
<p className="text-gray-600 mb-8">
Whether you need a new website, a mobile app, or ongoing IT support — we are ready to help. Reach out and let's talk.
</p>
{/* Contact Details */}
<div className="space-y-6">
<div className="flex gap-4">
<div className="bg-lightGray w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0">
<MapPin className="text-primary" size={24} />
</div>
<div>
<h4 className="font-bold text-dark">Address</h4>
<p className="text-gray-600">Stand no 64 Mothotlung, 0268</p>
<p className="text-gray-600">South Africa</p>
</div>
</div>
<div className="flex gap-4">
<div className="bg-lightGray w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0">
<Phone className="text-primary" size={24} />
</div>
<div>
<h4 className="font-bold text-dark">Phone</h4>
<p className="text-gray-600">069 793 6631</p>
</div>
</div>
<div className="flex gap-4">
<div className="bg-lightGray w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0">
<Mail className="text-primary" size={24} />
</div>
<div>
<h4 className="font-bold text-dark">Email</h4>
<p className="text-gray-600">diraw@gmail.com</p>
</div>
</div>
<div className="flex gap-4">
<div className="bg-lightGray w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0">
<Globe className="text-primary" size={24} />
</div>
<div>
<h4 className="font-bold text-dark">Website</h4>
<p className="text-gray-600">dirawenterprise.co.za</p>
</div>
</div>
</div>
{/* WhatsApp Button */}
<div className="mt-8">
<a
href="https://wa.me/27697936631"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 bg-green-500 text-white px-6 py-3 rounded-lg font-semibold hover:bg-green-600 transition"
>
<span>💬</span> WhatsApp Us
</a>
</div>