'use client';

import { ArrowRight, ChevronRight, Menu, MapPin, Phone, Mail, Facebook, Twitter, Linkedin, Instagram, Trophy, Store, Factory, ShieldCheck, Snowflake, TrendingUp, Lightbulb, Globe, Handshake, Settings, Leaf, CheckCircle2 } from 'lucide-react';

import Link from 'next/link';

import Image from 'next/image';

import { useForm, ValidationError } from '@formspree/react';

function HeroSlider() {

return (

{/* Background Image */}

<div

className="absolute inset-0 bg-cover bg-center z-0"

style={{ backgroundImage: `url('https://i.ibb.co/8DVVb6Ld/Remove-card-with-202604011303.jpg')` }}

{/* Content */}

Scaling the Future of African Convenience Foods.

</h1>

Browns Foods® is Africa’s premier manufacturer of frozen corn dogs and innovative snacks. Discover Browns Foods®, where South African culinary heritage meets uncompromising quality in every delicious bite.

</p>

<Link

href="#our-range"

className="inline-flex items-center justify-center px-8 py-3.5 border border-transparent text-base font-bold rounded-none text-brand-burgundy bg-brand-gold hover:bg-[#c5951c] transition-all shadow-lg"

Explore Range

</Link>

<Link

href="#about-us"

className="inline-flex items-center justify-center px-8 py-3.5 border-2 border-brand-gold text-base font-bold rounded-none text-brand-gold bg-transparent hover:bg-brand-gold/20 transition-all shadow-lg backdrop-blur-sm"

Our Story

</Link>

</div>

</section>

);

}

function ContactForm() {

const [state, handleSubmit] = useForm('xpqoozag');

if (state.succeeded) {

return (

<h4 className="font-bold text-lg mb-2">Thank you!</h4>

<p>Your message has been sent successfully. We will get back to you soon.</p>

</div>

);

}

return (

<div>

</div>

<div>

<label htmlFor="contactEmail" className="block text-sm font-medium text-brand-burgundy mb-1">Email</label>

</div>

<div>

<label htmlFor="contactSubject" className="block text-sm font-medium text-brand-burgundy mb-1">Subject</label>

<option>Retail Partnership</option>

<option>Distribution Enquiry</option>

<option>Operational Collaboration</option>

<option>General Enquiry</option>

</select>

</div>

<div>

<label htmlFor="contactMessage" className="block text-sm font-medium text-brand-burgundy mb-1">Message</label>

</div>

{state.submitting ? 'Sending...' : 'Send Message'}

</button>

</form>

);

}

function InvestorForm() {

const [state, handleSubmit] = useForm('xpqoozag');

if (state.succeeded) {

return (

<h4 className="font-bold text-lg mb-2">Request Received</h4>

<p>Thank you for your interest. We will review your request and send the investor deck shortly.</p>

</div>

);

}

return (

<div>

</div>

<div>

<label htmlFor="phone" className="block text-sm font-medium text-brand-burgundy mb-1">Phone Number</label>

</div>

<div>

<label htmlFor="email" className="block text-sm font-medium text-brand-burgundy mb-1">Email Address</label>

</div>

<div>

<label htmlFor="companyName" className="block text-sm font-medium text-brand-burgundy mb-1">Company / Investment Firm <span className="text-brand-dark/50 font-normal">(Optional)</span></label>

</div>

<div>

<label htmlFor="investmentInterest" className="block text-sm font-medium text-brand-burgundy mb-1">Investment Interest</label>

<option value="" disabled>Select an option</option>

<option value="angel">Angel</option>

<option value="strategic">Strategic Partner</option>

<option value="other">Other</option>

</select>

</div>

<div>

<label htmlFor="message" className="block text-sm font-medium text-brand-burgundy mb-1">Message <span className="text-brand-dark/50 font-normal">(Optional)</span></label>

</div>

I confirm I am interested in investment opportunities

</label>

</div>

{state.submitting ? 'Submitting...' : 'Request Investor Deck'}

</button>

</form>

);

}

export default function Home() {

return (

{/* Header */}

{/* Logo */}

</div>

{/* Desktop Navigation */}

{['Home', 'About Us', 'Our Range', 'Media', 'Investors', 'Contact'].map((item) => (

<Link

key={item}

href={`#${item.toLowerCase().replace(' ', '-')}`}

className="text-sm font-bold text-brand-burgundy hover:text-brand-gold transition-colors uppercase tracking-wide"

{item}

</Link>

))}

</nav>

{/* Inquire Button */}

<Link

href="#contact"

className="inline-flex items-center justify-center px-6 py-2.5 border border-transparent text-sm font-bold rounded-none text-brand-burgundy bg-brand-gold hover:bg-[#c5951c] shadow-sm transition-all"

Inquire Now

</Link>

</div>

{/* Mobile menu button */}

</button>

</div>

</header>

{/* About Us, Vision & Mission Section */}

{/* About Us */}

About Us

</h2>

The Architecture of Taste.<br/>

<span className="text-brand-gold">The Engine of Scale.</span>

</h3>

What began in 2019 as a small kitchen operation has grown into a category-leading food manufacturing business. Under the leadership of Mabel and Wale, with over 35 years of combined experience in broadcasting, business development, and international trade, Browns Foods has built a strong capability for creating products that are truly retail-ready.

</p>

</div>

{/* Vision */}

Our Vision

</h2>

"To be Africa's leading convenience food brand, recognised for uncompromising quality, industrial scale, and relentless innovation."

</p>

</div>

{/* Mission */}

Our Mission

</h2>

"To deliver premium, accessible, and consistent food solutions that meet the demands of the modern global consumer."

</p>

</div>

</section>

{/* Power Stats Section */}

{/* Stat 1 */}

</div>

<h3 className="font-heading text-xl font-bold text-brand-burgundy mb-3">First-to-Market</h3>

Only industrial manufacturer of frozen corn dogs in Africa.

</p>

</div>

{/* Stat 2 */}

</div>

<h3 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Retail Reach</h3>

National distribution across Shoprite, Checkers, Pick n Pay, Food Lover’s Market, Walmart Africa, Makro, and selected SPAR stores.

</p>

</div>

{/* Stat 3 */}

</div>

<h3 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Award Winning</h3>

Shoprite Checkers SMME of the Year (Regional & National).<br/>Presidential Awards, 2022.

</p>

</div>

</section>

{/* Our Advantage */}

<span className="text-sm font-bold uppercase tracking-widest text-brand-gold block mb-2">Industrial Capability</span>

Our Advantage

</h2>

</div>

{/* Advantage 1 */}

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">First Mover Advantage</h4>

We are the first and only industrial scale manufacturer of frozen corn dogs in Africa. This positions us as a clear category leader with a strong first mover advantage.

</p>

</div>

{/* Advantage 2 */}

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Scalability</h4>

Our custom built production systems are designed for high volume output, fast turnaround times, and consistent product quality across every batch.

</p>

</div>

{/* Advantage 3 */}

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Strategic Marketing</h4>

Powered by Axon Media, we combine AI driven advertising with high quality brand storytelling to increase product visibility and drive strong retail sell through.

</p>

</div>

{/* Advantage 4 */}

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Retail Ready Execution</h4>

We have a deep understanding of retail requirements, from product development to packaging and distribution. This ensures smooth integration into major retail chains.

</p>

</div>

</section>

{/* What We Do: Manufacturing Excellence */}

<span className="text-sm font-bold uppercase tracking-widest text-brand-gold block mb-2">Manufacturing Excellence</span>

What We Do

</h2>

We develop and manufacture premium frozen convenience products at scale for:

</p>

<span className="font-bold text-brand-dark text-lg">Tier-1 retail chains</span>

</div>

<span className="font-bold text-brand-dark text-lg">National distributors</span>

</div>

<span className="font-bold text-brand-dark text-lg">Large-scale food service</span>

</div>

Our strength lies at the intersection of product innovation and high-efficiency manufacturing. We scale without compromising the artisanal quality that defined our beginnings.

</p>

</div>

</section>

{/* Quality, Safety and Scale */}

<span className="text-sm font-bold uppercase tracking-widest text-brand-gold block mb-2">Hexagon of Excellence</span>

Quality, Safety and Scale

</h2>

Quality is not an afterthought. It is embedded in the Browns Foods® Hexagon of Excellence:

</p>

</div>

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Compliance</h4>

Strict adherence to international hygiene and food safety standards.

</p>

</div>

</div>

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Cold Chain Integrity</h4>

Advanced packaging and logistics management ensure product freshness from factory to freezer.

</p>

</div>

</div>

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Volume Ready</h4>

A manufacturing model designed for efficient turnaround times and rapid entry into new markets.

</p>

</div>

</section>

{/* Key Focus Areas for Future Growth */}

<span className="text-sm font-bold uppercase tracking-widest text-brand-gold block mb-2">Strategic Expansion Map</span>

Key Focus Areas for Future Growth

</h2>

</div>

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Product Innovation</h4>

We continuously develop new and exciting frozen food products to meet evolving consumer preferences.

</p>

</div>

</div>

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Market Expansion</h4>

We are strengthening our presence in existing markets while exploring new opportunities across Africa and globally.

</p>

</div>

</div>

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Strategic Partnerships</h4>

We build long term relationships with leading retailers, distributors, and foodservice providers.

</p>

</div>

</div>

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Operational Excellence</h4>

We invest in advanced equipment and processes to improve production efficiency and maintain high product quality.

</p>

</div>

</div>

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Sustainability</h4>

We are committed to environmentally responsible practices and sustainable sourcing in line with global standards.

</p>

</div>

</section>

{/* Our Range */}

<span className="text-sm font-bold uppercase tracking-widest text-brand-gold block mb-2">Our Range</span>

The Gold Standard of Frozen Snacks

</h2>

At Browns Foods, we are setting the benchmark for frozen convenience. Our product range is built on quality, consistency, and strong consumer appeal, designed to perform exceptionally well across retail and food service environments.

</p>

</div>

{/* The Corn Dog Collection */}

The Corn Dog Collection®

</h3>

Our signature range and category defining product line. Crafted for flavour, consistency, and strong shelf appeal.

</p>

</div>

{[

{ title: "Original Flavour", desc: "A timeless classic made with quality meat and a perfectly balanced, golden coating. Simple, satisfying, and always a favourite.", img: "https://i.ibb.co/9kD6vjL6/Range-Corndogs-Original.jpg" },

{ title: "Jalapeño Cheese", desc: "A bold combination of mild heat and rich, melted cheese, delivering a more indulgent and flavour packed experience.", img: "https://i.ibb.co/V03LrW1x/Range-Corndogs-Jalapeno.jpg" },

{ title: "Creamy Cheese", desc: "Smooth, indulgent cheese wrapped in a crisp, golden outer layer. Comforting, rich, and highly satisfying.", img: "https://i.ibb.co/mp8TjSB/Range-Corndogs-Cheese.jpg" },

{ title: "Mini Corn Dogs", desc: "Perfect for school lunch boxes and on the go snacking. These cocktail sized corn dogs are bite sized, fun, and easy to enjoy, with a crispy outside and juicy, flavourful centre that kids love and parents trust.", img: "https://i.ibb.co/FkJT6vX7/Range-Corndogs-Mini-1.jpg" }

].map((item, idx) => (

<img

src={item.img}

alt={item.title}

className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"

</div>

<h3 className="font-heading text-base font-bold text-brand-burgundy mb-2 uppercase tracking-wide">{item.title}</h3>

</div>

))}

</div>

{/* Snack Pockets & French Toast */}

Snack Pockets & French Toast

</h3>

From savoury pockets to sweet french toast, our snacks are designed for convenience and delicious flavour for quick meals and everyday enjoyment.

</p>

</div>

{[

{ title: "BBQ Chicken", desc: "Tender chicken in a rich, smoky barbecue sauce, wrapped in a soft, golden crust. A hearty and satisfying option packed with bold flavour.", img: "https://i.ibb.co/ynsWT321/Range-BBQ-Chicken.jpg" },

{ title: "Cheeseburger", desc: "All the classic cheeseburger taste in a convenient pocket. Savoury beef, melted cheese, and signature flavour in every bite, making it a familiar favourite for all ages.", img: "https://i.ibb.co/PvKhyr01/Range-Cheeseburger.jpg" },

{ title: "Cinnamon French Toast", desc: "Soft, golden slices infused with warm cinnamon flavour. A comforting classic that delivers a homemade taste with convenience.", img: "https://i.ibb.co/rR50SkgL/Range-French-Slice.jpg" },

{ title: "French Toast Sticks", desc: "Perfectly portioned for dipping and sharing. Lightly crisp on the outside, soft on the inside, and coated with a delicious cinnamon finish, ideal for both kids and adults.", img: "https://i.ibb.co/YF0FxR0C/Range-French-Toast.jpg" }

].map((item, idx) => (

<img

src={item.img}

alt={item.title}

className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"

</div>

<h3 className="font-heading text-base font-bold text-brand-burgundy mb-2 uppercase tracking-wide">{item.title}</h3>

</div>

))}

</div>

{/* Browns Crunch Co. */}

Browns Crunch Co.™

</h3>

<p className="text-brand-gold font-bold text-base mb-2">Bold flavour. Clean ingredients. Smarter snacking.</p>

A New Standard in Everyday Snacking. Browns Crunch Co.™ is built for modern consumers who want more from their snacks. From indulgent crunch to clean, functional options, every product is designed for quality, simplicity, and strong shelf appeal.

</p>

</div>

{[

{ title: "Sweet Potato Crisps", desc: "Naturally sweet, thin cut crisps made from real sweet potatoes, lightly seasoned and perfectly crisped. A simple, clean label snack that delivers satisfying crunch and natural flavour.", img: "https://i.ibb.co/tPCGKdRK/Pouch-with-sweet-202603232150.jpg" },

{ title: "Vegetable Mix", desc: "A colourful blend of beetroot, carrot, and sweet potato, baked to preserve natural taste and texture. Light, crisp, and visually striking, offering a better for you snacking alternative.", img: "https://i.ibb.co/KpnWmsBk/Baked-Vegetable-Crisps-202603232201.jpg" },

{ title: "Chickpea Protein Crunch", desc: "A plant based, high protein snack made from chickpea and grain blends. Boldly seasoned and perfectly crunchy, ideal for health conscious consumers looking for functional snacks.", img: "https://i.ibb.co/Fkx7BwKx/Chickpea-snacks-in-202603232216.jpg" },

{ title: "Peri-Peri Plantain Chips", desc: "Crispy plantain chips infused with a rich peri peri flavour. A bold balance of heat and savoury taste, inspired by global snacking trends.", img: "https://i.ibb.co/fVrn2LXG/Spicy-Plantain-Chips-202603232216.jpg" },

{ title: "Potato Sticks", desc: "Light, crunchy potato sticks with a classic flavour and satisfying texture. A familiar favourite made with consistent quality and scalable production.", img: "https://i.ibb.co/TMYSC4QK/Upcycled-sweet-potato-202603232226.jpg" },

{ title: "Freeze-Dried Fruit", desc: "Pure fruit, nothing added. Gently freeze dried to lock in natural sweetness, nutrients, and crunch. A clean, wholesome snack ideal for kids and health focused consumers.", img: "https://i.ibb.co/DPD3vsB0/Freeze-dried-fruit-spilling-202603232225.jpg" }

].map((item, idx) => (

<img

src={item.img}

alt={item.title}

className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"

</div>

<h3 className="font-heading text-base font-bold text-brand-burgundy mb-2 uppercase tracking-wide">{item.title}</h3>

</div>

))}

</div>

</section>

{/* Our Partners */}

<span className="text-sm font-bold uppercase tracking-widest text-brand-gold block mb-2">Trusted By</span>

Our Partners

</h2>

</div>

{[

{ name: 'Shoprite', url: 'https://www.shoprite.co.za', img: 'https://i.ibb.co/VWmdFpt5/Shoprite-Logo.png' },

{ name: 'Checkers', url: 'https://www.checkers.co.za', img: 'https://i.ibb.co/HTVV2nmc/Partner-2.jpg' },

{ name: 'Food Lovers Market', url: 'https://foodloversmarket.co.za', img: 'https://i.ibb.co/YFctdJGS/Partner-3.jpg' },

{ name: 'Walmart', url: 'https://www.walmart.com', img: 'https://i.ibb.co/Y7X3CYtj/Partner-5.jpg' },

{ name: 'Spar', url: 'https://www.spar.co.za', img: 'https://i.ibb.co/B2BFrdnq/Partner-6.jpg' },

{ name: 'Axon Media', url: 'https://axonmedia.co.za', img: 'https://i.ibb.co/vxfg3ZW7/AM-logo-on-202604011401-copy.jpg', subtitle: 'Official Media Partner' },

].map((partner) => (

key={partner.name}

href={partner.url}

target="_blank"

rel="noopener noreferrer"

className="group flex flex-col items-center justify-center p-2 bg-gray-50/50 backdrop-blur-md border border-brand-burgundy/10 shadow-sm cursor-pointer transition-all duration-300 hover:border-brand-gold/30 hover:shadow-md w-24 sm:w-28 md:w-36"

{partner.img ? (

) : (

<span className="font-heading font-bold text-sm text-brand-dark/60 group-hover:text-brand-burgundy transition-colors">{partner.name}</span>

)}

</div>

{partner.subtitle && (

{partner.subtitle}

</span>

)}

</a>

))}

</div>

</section>

{/* Why Browns Foods */}

<span className="text-sm font-bold uppercase tracking-widest text-brand-gold block mb-2">Investor Relations</span>

Why Browns Foods®

</h2>

An unparalleled investment opportunity in African convenience foods.

</p>

</div>

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Proven Product-Market Fit</h4>

Sustained success across Africa's largest retail tiers.

</p>

</div>

</div>

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Category Leadership</h4>

The undisputed pioneer of the frozen corn dog niche in Africa.

</p>

</div>

</div>

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Scalable Infrastructure</h4>

Built for high-volume manufacturing and rapid market expansion.

</p>

</div>

</div>

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Retail-Ready Portfolio</h4>

Products engineered for immediate shelf-impact and consumer pull-through.

</p>

</div>

</div>

<h4 className="font-heading text-xl font-bold text-brand-burgundy mb-3">Local Insight</h4>

Deep-rooted understanding of African consumer preferences and purchasing habits.

</p>

</div>

{/* Invest in Browns Form */}

Invest in Browns Foods

</h2>

</div>

{/* Left Column: Investment Case */}

Why Invest in Browns Foods?

</h3>

Browns Foods represents a unique opportunity to invest in the rapidly expanding African convenience food sector. As the first and only industrial-scale manufacturer of frozen corn dogs on the continent, we have established a dominant first-mover advantage and a proven product-market fit across all major retail tiers.

</p>

Our scalable infrastructure, strategic partnerships, and commitment to operational excellence position us for significant growth both domestically and internationally.

</p>

<span>Category Leadership & First-Mover Advantage</span>

</li>

<span>Proven Retail Success & Distribution Network</span>

</li>

<span>Scalable, High-Volume Manufacturing</span>

</li>

</ul>

</div>

{/* Right Column: Investor Inquiry Form */}

Investor Inquiry

</h3>

<p className="text-brand-dark/60 text-sm mb-6">Request our Confidential Corporate Portfolio</p>

</div>

</section>

{/* Media & Press */}

<span className="text-sm font-bold uppercase tracking-widest text-brand-gold block mb-2">Watch Our Content</span>

Media

</h2>

Explore our latest videos, campaigns, and behind-the-scenes content.

</p>

{[

'soSMImWnp2U',

'Ui1BQKlJWUI',

'AZ901ZfOqh0',

'9hD-GzgWgqM',

'd7dWauKKtUQ',

'EWm1vxOA2RE'

].map((videoId) => (

<iframe

src={`https://www.youtube.com/embed/${videoId}`}

title="YouTube video player"

frameBorder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

referrerPolicy="strict-origin-when-cross-origin"

allowFullScreen

className="absolute inset-0 w-full h-full"

></iframe>

</div>

))}

</div>

</section>

{/* Contact Section */}

<span className="text-sm font-bold uppercase tracking-widest text-brand-gold block mb-2">Get In Touch</span>

Contact Our HQ

</h2>

Connect with our team for retail partnerships, distribution enquiries, or operational collaboration.

</p>

</div>

{/* Contact Information */}

<h3 className="font-heading text-2xl font-bold text-brand-burgundy mb-6 text-center">Contact Information</h3>

</div>

<div>

<h4 className="font-bold text-brand-burgundy mb-1">Office</h4>

<p className="text-brand-dark/80">Sandton, Johannesburg<br />South Africa</p>

</div>

</div>

<div>

<h4 className="font-bold text-brand-burgundy mb-1">Enquiries</h4>

<a href="mailto:mabel@brownsfoods.co.za" className="hover:text-brand-gold transition-colors">mabel@brownsfoods.co.za</a><br />

<a href="mailto:wale@brownsfoods.co.za" className="hover:text-brand-gold transition-colors">wale@brownsfoods.co.za</a>

</p>

</div>

</div>

<div>

<h4 className="font-bold text-brand-burgundy mb-1">Phone & WhatsApp</h4>

</p>

</div>

{/* Contact Form */}

<h3 className="font-heading text-2xl font-bold text-brand-burgundy mb-6 text-center">Send a Message</h3>

</div>

</section>

</main>

{/* Footer */}

{/* Brand Column */}

</div>

<span className="font-heading font-bold text-2xl tracking-tight text-white">Browns Foods</span>

</div>

Scaling the future of African convenience foods. Delivering premium, accessible, and consistent food solutions globally.

</p>

<span className="sr-only">Facebook</span>

</a>

<span className="sr-only">Twitter</span>

</a>

<span className="sr-only">LinkedIn</span>

</a>

<span className="sr-only">Instagram</span>

</a>

</div>

{/* Quick Links */}

<h4 className="font-heading font-bold text-lg mb-4 text-brand-gold">Company</h4>

{['About Us', 'Our Range', 'Media', 'Investors', 'Contact'].map((link) => (

{link}

</Link>

</li>

))}

</ul>

</div>

{/* Legal */}

<h4 className="font-heading font-bold text-lg mb-4 text-brand-gold">Legal</h4>

{['Privacy Policy', 'Terms of Service', 'Cookie Policy', 'Compliance'].map((link) => (

{link}

</Link>

</li>

))}

</ul>

</div>

{/* Contact */}

<h4 className="font-heading font-bold text-lg mb-4 text-brand-gold">Contact Us</h4>

<span className="text-white/80 text-sm">123 Industrial Park Ave,<br />Johannesburg, South Africa</span>

</li>

</li>

<span className="text-white/80 text-sm">inquiries@brownsfoods.co.za</span>

</li>

</ul>

</div>

</p>

Designed with uncompromising quality. Powered by <a href="https://axonmedia.co.za" target="_blank" rel="noopener noreferrer" className="hover:underline ml-1"><span className="text-white">Axon</span><span className="text-blue-500">Media</span></a>.

</p>

</div>

</footer>

</div>

);

}