AgriPro Agriculture Ecommerce React Frontend

20+ Premium Pre-Built Pages Included

AgriPro comes packed with a wide variety of meticulously designed, conversion-optimized pages to suit any agricultural business, farm, or seed seller.

Home & Landing Pages

• Home 1 (Main Demo) — A high-converting landing page featuring a stunning hero banner, featured products, category grid, a dynamic "Who We Are" section, testimonials, and a newsletter sign-up.
• Home 2 (Alternative Layout) — A grid-focused variation with a different promotional banner style and a distinct product showcase layout.
• Home 3 (Alternative Layout) — A clean, minimalist approach focused on storytelling, eco-friendly visuals, and customer trust signals.

E-Commerce & Shop Pages

• Products Catalog — A cleanly designed shop page with category filtering, real-time search, and aesthetic product cards with quick Add-to-Cart actions.
• Product Detail (Single Product) — A highly detailed product page with image galleries, rich descriptions, yield and germination stats, a How-to-Use accordion guide, and suggested products.
• Cart Drawer — A sleek slide-out shopping cart accessible from anywhere on the site, allowing users to review items without leaving their current page.
• Checkout — A beautifully structured checkout interface for capturing billing, shipping, and payment details.

Company & Information Pages

• About Us — Tell your farm's story with immersive visuals, mission statements, and company highlights.
• Contact Us — A full-featured contact page with an integrated Google Maps display, operational hours, direct contact details, and a user inquiry form.
• FAQ — A well-organized, accordion-style knowledge base to answer common customer queries on shipping, planting, and orders.
• Careers — Attract top talent with an expandable job board, company values section, and direct application links.

Content & Community Pages

• Blog Listing — A beautiful grid layout to share farming tips, company news, and industry articles.
• Single Blog Post — A distraction-free reading experience with rich text formatting, author details, and social sharing.
• Support Forum — A community hub with a live search bar, categorized discussion threads, Solved status badges, and a quick FAQ accordion.
• Affiliates / Partners — A dedicated landing page to recruit partners, outlining commission rates, benefits, and a step-by-step How It Works guide.

Legal & Utility Pages

• Privacy Policy — A clean, readable layout covering data collection, security, cookies, and user rights.
• Terms & Conditions — Standardized, easy-to-read terms of service page.
• Return & Refund Policy — Clear guidelines on return windows, refund processing times, and defective item handling.
• EULA (End User License Agreement) — A built-in software and product license agreement template.
• 404 Error Page — A creative, theme-consistent page-not-found screen that guides lost visitors back to the homepage.

Features

Key Features

Design & Layout

• 3 Unique Home Page Variations — Choose from three distinct homepage layouts to best suit your brand style.
• Fully Responsive Design — Pixel-perfect on all screen sizes: desktop, tablet, and mobile.
• Modern UI with Glassmorphism & Gradient Accents — Premium look and feel with carefully crafted color palettes and typography.
• Smooth Page Transitions & Micro-Animations — Powered by Framer Motion for fluid, professional animations throughout.
• Dynamic Hero Banner with Auto-Sliding Images — Full-screen hero with multiple background images that transition automatically.
• Sticky Navigation Bar — Smart navbar that adapts on scroll for a clean browsing experience.

E-Commerce Functionality

• Product Catalog with Category Filtering — Filter products by category with URL-based state, fully bookmarkable and shareable.
• Real-Time Product Search — Instant search filtering without page reloads.
• Slide-Out Cart Drawer — A smooth, animated cart that opens without navigating away from the current page.
• Single Product Detail Page — Rich product pages with image galleries, specifications, how-to-use guides, and related products.
• Checkout Page — Complete checkout interface with billing, shipping, and order summary sections.
• Spin-the-Wheel Discount Popup — An interactive discount wheel popup to boost conversions and capture leads.
• Global Currency Symbol — Easily configurable from a single config file; one change updates the whole site.

Pages & Content

• 20+ Pre-Built Pages — Every page a real business needs, designed and ready to customize.
• Blog with Full Article View — A complete blogging system with a listing page and individual post pages.
• Support Forum Page — Community-style support forum with live search, category filtering, and a FAQ accordion.
• Careers Page with Job Accordion — Expandable job listings with department, location, and type tags.
• Affiliates / Partner Program Page — A high-converting page to recruit affiliates with commission details and a How It Works section.
• Full Legal Page Set — Privacy Policy, Terms & Conditions, Return & Refund Policy, and EULA all included.
• Custom 404 Error Page — Branded not-found page that guides visitors back to the homepage.

SEO & Performance

• SEO-Ready Architecture — Dynamic page titles, meta descriptions, Open Graph, and Twitter Card tags on every page.
• React Helmet Async Integration — Proper head tag management per route for optimal search engine indexing.
• Semantic HTML Structure — Proper use of heading hierarchy, landmark elements, and alt attributes throughout.
• Optimized Asset Loading — Images use lazy loading and error fallback handlers to prevent broken layouts.
• URL-Based Filter State — Category and search filters are reflected in the URL, supporting browser history and sharing.

Developer Experience

• Built with React + Vite — Blazing-fast development server and optimized production builds.
• Central Config File — Change site name, contact details, currency, hero content, and more from a single config.js file.
• Clean, Well-Commented Code — Easy to understand, extend, and hand off to clients.
• Component-Based Architecture — Highly reusable components that make customization straightforward.
• Framer Motion Animations — Consistent, performance-conscious animations using an industry-standard library.
• Lucide React Icons — A clean, consistent icon set used throughout the theme.
• React Router v6 — Client-side routing with animated page transitions and protected route structure.

Requirements

Requirements

To Run the Development Environment

• Node.js — Version 18.0 or higher recommended (nodejs.org)
• npm — Version 8.0 or higher (included with Node.js)
• A code editor — Visual Studio Code is recommended
• A modern web browser — Chrome, Firefox, Edge, or Safari (latest version)

Knowledge Requirements

• Basic understanding of React.js (components, props, state)
• Familiarity with JavaScript (ES6+)
• Basic knowledge of HTML & CSS
• CSS Framework: Tailwind CSS v3
• Optional: Familiarity with Tailwind CSS utility classes for layout adjustments

Dependencies Included

• React 18 — Core UI library
• React Router v6 — Client-side routing and navigation
• Framer Motion — Animation and page transition library
• Tailwind CSS v3 — Utility-first CSS framework
• Lucide React — Lightweight, consistent icon set
• React Helmet Async — Dynamic SEO meta tag management
• Vite — Next-generation build tool and development server

Getting Started

1. Unzip the downloaded package
2. Open the project folder in your terminal
3. Run npm install to install all dependencies
4. Run npm run dev to start the local development server
5. Open http://localhost:5173 in your browser
6. To customize branding, edit the src/data/config.js file

Production Build

• Run npm run build to generate a production-ready bundle in the dist/ folder
• The output is a static site that can be hosted on any web server, CDN, Netlify, Vercel, or cPanel

Backend / Database

• This is a frontend-only React template — no backend or database is included
• All product, blog, and testimonial data is stored in src/data/mockData.js and is easily replaceable with API calls
• Payment processing and order management require integration with a third-party service (e.g., Stripe, Razorpay, WooCommerce API)

Instructions

Theme Instructions

Step 1 — Extract & Install

1. Download and unzip the package from your Envato downloads page.
2. Open the extracted folder in your terminal or command prompt.
3. Run the following command to install all required packages: npm install

Step 2 — Start the Development Server

1. After installation, start the local development server: npm run dev
2. Open your browser and go to: http://localhost:5173
3. The browser will auto-reload whenever you save changes.

Step 3 — Customize Your Branding

All global settings are stored in one central file: src/data/config.js

• Site Name & Tagline — Change name and tagline fields
• Currency Symbol — Update currencySymbol (e.g. $, €, ₹) — applies site-wide automatically
• Contact Details — Update email, phone, and address inside the contact object
• Hero Section — Change heading text, description, button label, and background images in the hero object
• About Section — Update about text, main image, and floating accent images in the about object

Step 4 — Update Products, Blog & Testimonials

All demo content is stored in src/data/mockData.js. Simply edit the arrays to replace with your own content:

• Products — Edit the mockProducts array (name, price, category, image, description)
• Categories — Edit the mockCategories array (name, image)
• Blog Posts — Edit the mockBlogPosts array
• Testimonials — Edit the mockTestimonials array (name, role, image, review text)

Step 5 — Replace Images & Logo

• Place your logo file in the public/ folder and update the logo reference in src/components/Navbar.jsx.
• Hero background images can be updated in src/data/config.js under hero.images.
• Product and category images can be swapped via external URLs (e.g. Unsplash, Pexels) or local files inside public/.

Step 6 — SEO Customization

• Each page has its own <SEO /> component at the top with a title and description prop.
• Edit these props per page inside the respective file in src/pages/.
• Update the base meta tags in index.html for the default fallback SEO.

Step 7 — Build for Production

1. When ready to deploy, run: npm run build
2. The optimized output will be placed in the dist/ folder.
3. Upload the contents of dist/ to your web host, Netlify, Vercel, or cPanel public folder.
4. Important: If hosting on Apache or Nginx, configure URL rewriting so that all routes point to index.html (required for React Router to work correctly).

Folder Structure Overview

• public/ — Static assets (images, fonts, icons)
• src/components/ — Reusable UI components (Navbar, Footer, Cards, etc.)
• src/pages/ — Individual route pages
• src/pages/legal/ — Legal pages (Privacy Policy, Terms, EULA, Refund Policy)
• src/data/config.js — Global site configuration
• src/data/mockData.js — Demo content data
• src/App.jsx — Route definitions
• index.html — HTML entry point with base meta tags