Commit c22823f2 authored by Gimhan A.H.L.D.K's avatar Gimhan A.H.L.D.K

Merge branch 'IT20094218' into 'master'

add website

See merge request !5
parents 37d1e552 640163fc
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "first-tailwindcsss",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.7.1",
"react-router-dom": "^6.18.0",
"react-scripts": "5.0.1",
"react-scroll": "^1.9.0",
"react-scroll-to-top": "^3.0.0",
"react-typed": "^1.2.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"tailwindcss": "^3.2.4"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/fav.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Pomegra</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
import './App.css';
import Aboutus from './components/Aboutus';
import Achivements from './components/Achivements';
import Contactus from './components/Contactus';
import Documents from './components/Documents';
import Footer from './components/Footer';
import Hero from './components/Hero';
import Methodology from './components/Methodology';
import Milestones from './components/Milestones';
import Navbar from './components/Navbar';
import ScrollToTop from "react-scroll-to-top";
import Objectives from './components/Objectives';
import Gap from './components/Gap';
import Problem from './components/Problem';
import Newsletter from './components/Newsletter';
import Litriture from './components/Litriture';
function App() {
return (
<div className='scroll-smooth' >
<Navbar/>
<Hero/>
<Litriture/>
<Gap/>
<Problem/>
<Objectives/>
<Newsletter/>
<Methodology/>
<Milestones/>
<Documents/>
<Aboutus/>
<Achivements/>
<Contactus/>
<Footer/>
<ScrollToTop smooth color='red' className='w-10 h-10 p-2 font-bold' />
</div>
);
}
export default App;
This image diff could not be displayed because it is too large. You can view the blob instead.
import React from 'react'
export default function Button({ name }) {
return (
<div className='px-4 py-2 text-lg text-white border-2 rounded-md cursor-pointer bg-primary border-primary hover:border:primary hover:bg-transparent md:max-w-[250px] w-[150px]'>
<button>{name}</button>
</div>
)
}
import React from 'react'
const Feature = ({ name, url, text }) => {
return (
<div className='w-auto h-auto p-4 bg-white rounded-lg shadow-xl'>
<img src={url} alt="" className='w-[100%] h-[35%]'/>
<h2 className='text-2xl text-center text-primary'>{name}</h2>
<p className='text-center'>{text}</p>
</div>
)
}
export default Feature
\ No newline at end of file
import React from 'react'
const Topic = ({topic}) => {
return (
<div>
<h2 className='px-6 py-2 mx-auto text-3xl font-bold text-center text-primary'>{topic}</h2>
</div>
)
}
export default Topic
\ No newline at end of file
import React from 'react'
import Topic from '../common/Topic'
import Supervisor from '../assets/supervisor.jpeg'
import coSupervisor from '../assets/co-supervisor.png'
import raveen from '../assets/jayarathna.jpeg'
import dewmi from '../assets/dewmini.jpeg'
import dilsha from '../assets/dilsha.jpeg'
import gimhan from '../assets/gimha.jpg'
import { AiFillLinkedin } from 'react-icons/ai'
import { SiGooglescholar } from 'react-icons/si'
const Aboutus = () => {
return (
<div id="about" className='w-screen'>
<div className='max-w-[1300px] h-auto mx-auto items-center mb-6'>
<Topic topic="About Us" />
<div className='grid items-center justify-start grid-cols-1 gap-4 p-4 lg:grid-cols-3 md:grid-cols-2'>
<div className='flex-col items-center justify-center w-[100%] px-2 mx-auto text-center text-gray-600 bg-gray-100 rounded-lg hover:shadow-2xl py-6'>
<img src={Supervisor} alt="supervisor image" className='w-[200px] h-[200px] rounded-[50%] shadow-xl mx-auto' />
<p className='m-2 text-white bg-gray-500 shadow-md rounded-xl w-[50%] mx-auto'>Supervisor</p>
<p className='text-lg font-bold'>Ms. Dinithi Pandithage</p>
<p>Lecturer</p>
<p>Sri Lanka Institute of Information Technology</p>
<p>Department of Computer Systems Engineering</p>
<p className='cursor-pointer font-italic hover:underline'>dinithi.p@sliit.lk</p>
<div className='flex justify-center gap-4 p-4 text-center '>
<a href="https://scholar.google.com/citations?hl=en&authuser=1&user=0mU-YUkAAAAJ">
<SiGooglescholar size={30} className='p-1 shadow-md hover:bg-red-200 rounded-xl' />
</a>
<a href="https://www.linkedin.com/in/dinithi-pandithage-8a1163160/">
<AiFillLinkedin size={30} className='p-1 shadow-md hover:bg-red-200 rounded-xl' />
</a>
</div>
</div>
<div className='flex-col items-center justify-center w-[100%] px-2 mx-auto text-center text-gray-600 bg-gray-100 rounded-lg hover:shadow-2xl py-6'>
<img src={coSupervisor} alt="supervisor image" className='w-[200px] h-[200px] rounded-[50%] shadow-xl mx-auto' />
<p className='m-2 text-white bg-gray-500 shadow-md rounded-xl w-[50%] mx-auto'>Co-Supervisor</p>
<p className='text-lg font-bold'>Ms. Shalini Rupasinghe</p>
<p>Assistant Lecturer</p>
<p>Sri Lanka Institute of Information Technology</p>
<p>Department of Information Technology</p>
<p className='cursor-pointer font-italic hover:underline'>shalini.r@sliit.lk</p>
<div className='flex justify-center gap-4 p-4 text-center '>
<a href="https://scholar.google.com/citations?hl=en&user=P-IK-XAAAAAJ">
<SiGooglescholar size={30} className='p-1 shadow-md hover:bg-red-200 rounded-xl' />
</a>
<a href="https://www.linkedin.com/in/shalini-rupasinghe/">
<AiFillLinkedin size={30} className='p-1 shadow-md hover:bg-red-200 rounded-xl' />
</a>
</div>
</div>
<div className='flex-col items-center justify-center w-[100%] px-2 mx-auto text-center text-gray-600 bg-gray-100 rounded-lg hover:shadow-2xl py-6'>
<img src={raveen} alt="supervisor image" className='w-[200px] h-[200px] rounded-[50%] shadow-xl mx-auto' />
<p className='m-2 text-white bg-gray-500 shadow-md rounded-xl w-[50%] mx-auto'>Team-Leader</p>
<p className='text-lg font-bold'>Raveen Jayarathna</p>
<p>Undergraduate</p>
<p>Sri Lanka Institute of Information Technology</p>
<p>Department of Information Technology</p>
<p className='cursor-pointer font-italic hover:underline'>raveenjayarathne6@gmail.com</p>
<div className='flex justify-center gap-4 p-4 text-center '>
<a href="https://www.linkedin.com/in/raveen-jayarathne-74a78b219/">
<AiFillLinkedin size={30} className='p-1 shadow-md hover:bg-red-200 rounded-xl' />
</a>
</div>
</div>
<div className='flex-col items-center justify-center w-[100%] px-2 mx-auto text-center text-gray-600 bg-gray-100 rounded-lg hover:shadow-2xl py-6'>
<img src={gimhan} alt="supervisor image" className='w-[200px] h-[200px] rounded-[50%] shadow-xl mx-auto' />
<p className='m-2 text-white bg-gray-500 shadow-md rounded-xl w-[50%] mx-auto'>Team-Member</p>
<p className='text-lg font-bold'>Kavishka Gimhan</p>
<p>Undergraduate</p>
<p>Sri Lanka Institute of Information Technology</p>
<p>Department of Information Technology</p>
<p className='cursor-pointer font-italic hover:underline'>kavishkagimhan23@gmail.com</p>
<div className='flex justify-center gap-4 p-4 text-center '>
<a href="https://www.linkedin.com/in/kavishka-gimhan-6b7153230/">
<AiFillLinkedin size={30} className='p-1 shadow-md hover:bg-red-200 rounded-xl' />
</a>
</div>
</div>
<div className='flex-col items-center justify-center w-[100%] px-2 mx-auto text-center text-gray-600 bg-gray-100 rounded-lg hover:shadow-2xl py-6'>
<img src={dewmi} alt="supervisor image" className='w-[200px] h-[200px] rounded-[50%] shadow-xl mx-auto' />
<p className='m-2 text-white bg-gray-500 shadow-md rounded-xl w-[50%] mx-auto'>Team-Member</p>
<p className='text-lg font-bold'>Dewmini Vidanapathirana</p>
<p>Undergraduate</p>
<p>Sri Lanka Institute of Information Technology</p>
<p>Department of Information Technology</p>
<p className='cursor-pointer font-italic hover:underline'>dewminivihangika9@gmail.com</p>
<div className='flex justify-center gap-4 p-4 text-center '>
<a href="https://www.linkedin.com/in/dewmini-vidanapathirana-54858a21a/">
<AiFillLinkedin size={30} className='p-1 shadow-md hover:bg-red-200 rounded-xl' />
</a>
</div>
</div>
<div className='flex-col items-center justify-center w-[100%] px-2 mx-auto text-center text-gray-600 bg-gray-100 rounded-lg hover:shadow-2xl py-6'>
<img src={dilsha} alt="supervisor image" className='w-[200px] h-[200px] rounded-[50%] shadow-xl mx-auto' />
<p className='m-2 text-white bg-gray-500 shadow-md rounded-xl w-[50%] mx-auto'>Team-Member</p>
<p className='text-lg font-bold'>Dilsha Chithmi</p>
<p>Undergraduate</p>
<p>Sri Lanka Institute of Information Technology</p>
<p>Department of Information Technology</p>
<p className='cursor-pointer font-italic hover:underline'>dilshachithmi@gmail.com</p>
<div className='flex justify-center gap-4 p-4 text-center '>
<a href="">
<AiFillLinkedin size={30} className='p-1 shadow-md hover:bg-red-200 rounded-xl' />
</a></div>
</div>
</div>
</div>
</div>
)
}
export default Aboutus
\ No newline at end of file
import React from 'react'
import Topic from '../common/Topic'
import Logo from "../assets/ijresm.png"
const Achivements = () => {
return (
<div className='w-screen text-black' id='Achivements'>
<div className='msx-w-[1200px] mx-auto p-4 md:p-12 bg-gray-200 justify-center flex-col items-start'>
<Topic topic="Achivements"/>
<div className='items-center p-4 mx-auto'>
<img src={Logo} alt="logo" className='items-center p-2 mx-auto mt-6' />
<p className='px-6 py-6 font-serif text-lg text-center text-gray-700'>Our research has been accepted for presentation at the International
Journal of Research in Engineering and Smart Manufacturing (IJRESM) conference.
The conference serves as an important platform to share our research findings
in the fields of engineering and smart manufacturing with a global audience.
Through our participation in this conference, Engineering and Smart Manufacturing
We hope to contribute to knowledge and development in the field of manufacturing. </p>
</div>
</div>
</div>
)
}
export default Achivements
\ No newline at end of file
import React from 'react'
import { AiOutlineMail } from 'react-icons/ai'
import Topic from '../common/Topic'
const Contactus = () => {
return (
<div className='w-screen p-8' id='Contact'>
<Topic topic="Contact Us"/>
<div className='grid grid-cols-1 md:grid-cols-2 max-w-[1000px] mx-auto items-center p-6 gap-4 md:gap-1 border-2 border-red-50 rounded-lg shadow-lg'>
<div className='flex flex-col gap-1 md:gap-4'>
<h2 className='py-2 text-2xl font-bold text-left md:text-3xl text-primary'>Let's Chat, Tell us About Your Project</h2>
<p className='font-serif text-left font-md'>let's chat something together</p>
<div className='flex items-center gap-4'>
<AiOutlineMail size={30} className='p-2 font-bold bg-red-200 rounded-md cursor-pointer text-primary' />
<div className='flex gap-4 md:flex-col md:gap-0'>
<p>Mail Us</p>
<p className='text-sm font-bold cursor-pointer hover:underline text-primary'>pomegra@imfo.com</p>
</div>
</div>
</div>
<div>
<h3 className='text-xl font-bold'>Sent Us A Message</h3>
<div className='flex flex-col gap-2'>
<input className='px-6 py-3 bg-gray-100 rounded-lg outline-none' type="text" placeholder='enter your name' />
<input className='px-6 py-3 bg-gray-100 rounded-lg outline-none' type="email" placeholder='enter your email address' />
<input className='px-6 py-3 bg-gray-100 rounded-lg outline-none' type="text" placeholder='subject' />
<p className='font-bold'>Tell us more about your project</p>
<textarea className='px-6 py-3 bg-gray-100 rounded-lg outline-none' name="" id="" cols="30" rows="5"></textarea>
<button className="px-4 py-2 text-lg text-white hover:text-black border-2 rounded-md cursor-pointer bg-primary border-primary hover:border:primary hover:bg-transparent md:max-w-[250px] mx-auto w-[150px]">Submit</button>
</div>
</div>
</div>
</div>
)
}
export default Contactus
\ No newline at end of file
import React from 'react'
import Topic from '../common/Topic'
const Documents = () => {
return (
<div className='w-screen h-auto bg-gray-200' id='Documents'>
<div className='max-w-[1000px] mx-auto flex-col items-center justify-center md:p-12 p-2'>
<Topic topic="Documents and Presentations" />
<div className='grid items-center grid-cols-1 gap-4 p-4 md:grid-cols-2'>
<div className='p-2 md:p-6 border-2 rounded-lg border-primary min-h-[550px] shadow-lg bg-white'>
<h1 className='p-4 text-3xl font-bold text-center'>Documents</h1>
<div className='flex-col items-center justify-center py-4 w-[100%] md:px-12 px-2'>
<a href="https://drive.google.com/file/d/13FpAF2ZwdkPSVgwxgw9Apq3_HmKE_Ici/view?usp=drive_link"><p className='transition-all px-6 py-2 text-lg border rounded-md hover:bg-primary text-primary hover-text-white border-primary hover:text-white w-[100%] text-center cursor-pointer my-4'>Project Charter</p></a>
<a href="https://drive.google.com/drive/folders/1ap4E2NOWjYilvY5bNtfjxZPUuyXtS4Df?usp=drive_link"><p className='transition-all px-6 py-2 text-lg border rounded-md hover:bg-primary text-primary hover-text-white border-primary hover:text-white w-[100%] text-center cursor-pointer my-4'>Project Proposal</p></a>
<a href="https://drive.google.com/drive/folders/1G0OA9By5dFQCnxPLTqbE_7q9_GVVU3yF?usp=drive_link"><p className='transition-all px-6 py-2 text-lg border rounded-md hover:bg-primary text-primary hover-text-white border-primary hover:text-white w-[100%] text-center cursor-pointer my-4'>Research Log Book</p></a>
<a href="https://drive.google.com/drive/folders/1JHQfPK3PY9UD-tPtAYOa7qdOgIs7sD2S?usp=drive_link"><p className='transition-all px-6 py-2 text-lg border rounded-md hover:bg-primary text-primary hover-text-white border-primary hover:text-white w-[100%] text-center cursor-pointer my-4'>Status Document</p></a>
<a href="https://drive.google.com/drive/folders/1NoFXJZX8PHIr8lKc29w58Yp5YF62pfxG?usp=drive_link"><p className='transition-all px-6 py-2 text-lg border rounded-md hover:bg-primary text-primary hover-text-white border-primary hover:text-white w-[100%] text-center cursor-pointer my-4'>Final Document</p></a>
<a href="https://drive.google.com/drive/folders/13HfsoBKAUfwESeMie_399czv5OUOl3ET?usp=drive_link"><p className='transition-all px-6 py-2 text-lg border rounded-md hover:bg-primary text-primary hover-text-white border-primary hover:text-white w-[100%] text-center cursor-pointer my-4'>Research Paper</p></a>
</div>
</div>
<div className='p-2 md:p-6 border-2 rounded-lg border-primary min-h-[550px] shadow-lg bg-white'>
<h1 className='p-4 text-3xl font-bold text-center'>Presentations</h1>
<div className='flex-col items-center justify-center py-4 w-[100%] md:px-12 px-2'>
<a href="https://docs.google.com/presentation/d/1d6WUMcorrkqbueep8pt7ukUVG4RInG9W/edit?usp=sharing&ouid=108158351823633942379&rtpof=true&sd=true"><p className='transition-all px-6 py-2 text-lg border rounded-md hover:bg-green-600 text-green-600 hover-text-white border-green-600 hover:text-white w-[100%] text-center cursor-pointer my-4'>Proposal Presentation</p></a>
<a href="https://docs.google.com/presentation/d/1CueGDY5vHsMbVf0i-RdmkgUK4gGjruxd/edit?usp=drive_link&ouid=108158351823633942379&rtpof=true&sd=true"><p className='transition-all px-6 py-2 text-lg border rounded-md hover:bg-green-600 text-green-600 hover-text-white border-green-600 hover:text-white w-[100%] text-center cursor-pointer my-4'>Progress Presentation 1</p></a>
<a href="https://docs.google.com/presentation/d/1OkZTjyrBWNjI1RUHeDPaFHwjfM5gSsDr/edit?usp=drive_link&ouid=108158351823633942379&rtpof=true&sd=true"><p className='transition-all px-6 py-2 text-lg border rounded-md hover:bg-green-600 text-green-600 hover-text-white border-green-600 hover:text-white w-[100%] text-center cursor-pointer my-4'>Progress Presentation 2</p></a>
<a href="https://docs.google.com/presentation/d/1P4Cuf7mFB86out9EFFWKBBLRp_EZYgbw/edit?usp=drive_link&ouid=108158351823633942379&rtpof=true&sd=true"><p className='transition-all px-6 py-2 text-lg border rounded-md hover:bg-green-600 text-green-600 hover-text-white border-green-600 hover:text-white w-[100%] text-center cursor-pointer my-4'>Final Presentation</p></a>
</div>
</div>
</div>
</div>
</div>
)
}
export default Documents
\ No newline at end of file
import React from 'react';
import {
AiFillDribbbleSquare,
AiFillFacebook,
AiFillGithub,
AiFillInstagram,
AiFillTwitterSquare
} from 'react-icons/ai';
function Footer() {
return (
<div className='w-screen bg-black'>
<div className=' bg-black max-w-[1240px] mx-auto py-6 m-4 mb-0'>
<p className='text-lg text-center cursor-pointer text-primary'>Copyright @ 2023 | Group 2023-229</p>
</div>
</div>
)
}
export default Footer
\ No newline at end of file
import React from 'react'
import Topic from '../common/Topic'
const Gap = () => {
return (
<div className='w-screen p-4 bg-white' id='Gap'>
<div className='max-w-[1200px] mx-auto'>
<Topic topic="Research Gap"/>
<div className='py-6'>
<div className='p-4 text-justify text-gray-700'>
<p>The research landscape in pomegranate cultivation and disease management is
marked by critical gaps that demand attention for the betterment of the industry.
Notably, there is a need to acknowledge and address regional disparities,
recognizing that pomegranate cultivation takes place in various countries
with unique environmental conditions. Understanding how soil nutrient effects
differ across regions is essential for tailoring cultivation practices to suit
local conditions. Moreover, research often focuses on short-term effects, while
the long-term implications of factors like climate change and topographical
alterations on pomegranate production have been relatively understudied.
Investigating these long-term effects is crucial for sustainable planning
and adaptation.</p>
<p>The economic impact of pomegranate cultivation on farmers is another area that
deserves more attention. Comprehensive assessments of fertilizer applications,
economic implications, and educating farmers about available opportunities and
government programs can significantly contribute to the well-being of pomegranate farmers.</p>
</div>
</div>
</div>
</div>
)
}
export default Gap
\ No newline at end of file
import React from 'react';
import BgImage from '../assets/bg.jpg';
import Button from '../common/Button';
import { Link } from 'react-router-dom';
function Hero() {
return (
<div id='Home' className='w-screen h-[100vh] text-black bg-center bg-no-repeat bg-cover relative z-10 items-center justify-center flex' style={{ backgroundImage: `url("https://www.healthline.com/hlcmsresource/images/AN_images/AN90-Pomegranate-1296x728-header_0.jpg")` }}>
<div className='absolute top-0 left-0 opacity-60 w-screen h-[100vh] bg-gradient-to-l from-black to-black '></div>
<div className='relative max-w-[1250px] mx-auto text-center p-4 items-center justify-center flex flex-col '>
<h1 className='text-3xl font-bold text-white md:text-5xl'>Your Trusted Pomegranate Farming Helper</h1>
<p className='p-4 text-sm text-white md:text-lg'>Cultivate Prosperity with Our Pomegranate Farming Companion: Your Trusted Source for Expert Guidance and Insights!</p>
<Button name="Get Start" />
</div>
</div>
);
}
export default Hero;
import React from 'react'
import Topic from '../common/Topic'
const Litriture = () => {
return (
<div className='w-screen p-8 bg-gray-200' id='Litriture'>
<div className='max-w-[1300px] mx-auto text-justify'>
<Topic topic="Literature Review"/>
<div className='grid grid-cols-1 gap-6 md:grid-cols-4 sm:grid-cols-2'>
<div>
<p>
Raghupathi H.B., Bhargava B.S.(India- 1998), a survey of pomegranate
orchards in the Bijapur district of North Karnataka was conducted and
diagnostic criteria for plants and soil were developed using the Diagnostic
and Recommendation Integrated System (DRIS). A level-1 pomegranate yield of
15.5 to 18.8 ha has been reported for optimum ranges of nutrients. Norms,
evaluations, and classifications for other nutrients have been reported and discussed.
</p>
</div>
<div>
<p>Carlos F. Gaitán's illuminating chapter titled "Machine Learning Applications
for Agricultural Impacts under Extreme Events" in the book "Climate
Extremes and Their Implications for Impact and Risk Assessment" is a
remarkable exploration of the intersection between machine learning and
agriculture. Published in 2020 by Benchmark Labs in San Francisco, CA,
United States, this chapter spans pages 119 to 138, delving into the
transformative potential of machine learning in addressing the challenges
posed by extreme climate events on agricultural systems.</p>
</div>
<div>
<p>Sa'ed Abed et al. determined the chance of the existence of recognized
diseases by using a Support Vector Machine (SVM) as a classifier. The main
goal of the suggested system was to discriminate between two distinct
bean-related problem types. The utilisation of photographs from a public
database could be used for training and exams. To categorize the diseases
that have been uncovered by the SVM classifier, it will make use of the
characteristics of the testing photographs. This method always yields
accurate results one hundred and one percent of the time.</p>
</div>
<div>
<p>Dang, Song, and Guo developed a "Fruit Size Detecting and Grading System Based
on Image Processing" in 2010. Their system employed image processing techniques
to capture side-view images of the fruit and extract relevant fruit
characteristics using detection algorithms. Another study by Jain et al.
(2021) proposed a non-destructive method for quality inspection of pomegranate
fruit using image processing. The study employed color-based segmentation,
morphological operations, and texture analysis to extract features.</p>
</div>
</div>
</div>
</div>
)
}
export default Litriture
\ No newline at end of file
import React from 'react'
import Topic from '../common/Topic'
import system from '../assets/system dia.png'
const Methodology = () => {
return (
<div id='Methodology' className='w-screen px-6 py-12 bg-gray-100'>
<div className='max-w-[1300px] mx-auto'>
<Topic topic="Methodology" />
<div className='grid items-center grid-cols-1 gap-4 md:grid-cols-2' >
<div>
<h2 className='p-4 text-xl font-bold text-gray-600 text-start'>System diagram</h2>
<img className='w-[500px] h-[400px]' src={system} alt="system diagram" />
</div>
<div className='text-gray-600'>
<p className='text-justify'>The holistic system designed to bridge technological gaps in Sri Lankan
pomegranate cultivation is a multifaceted solution encompassing four
essential components. Firstly, disease detection employs cutting-edge
technology, including machine learning and image analysis, to swiftly
identify and diagnose diseases affecting pomegranate plants.
This capability enables farmers to take timely measures to curb
the spread of diseases and protect their crops. Second, quality
prediction is vital for optimizing harvest timing. By utilizing
sensors and image analysis, the system can accurately assess the
ripeness and quality of pomegranate fruits, ensuring that they are
harvested at their peak, which, in turn, increases their market value.
Third, the soil nutrient detection and prediction component is
indispensable for maintaining soil health. Soil sensors and data
analysis tools continuously monitor nutrient levels, offering
farmers tailored recommendations on when and how to apply fertilizers
or soil amendments to maintain ideal soil conditions. Lastly, insect
damage and disease outbreak prediction, relying on climate and
environmental data, allows for early warnings and mitigation
strategies against pests and diseases. Integrating a mobile
application into the system streamlines the communication of
these insights to farmers. This mobile interface serves as a
user-friendly platform through which real-time information,
alerts, and recommendations are delivered, equipping farmers
with the tools they need to make informed decisions and
optimize their pomegranate cultivation practices,
ultimately increasing productivity and profitability
in the sector.</p>
</div>
</div>
</div>
</div>
)
}
export default Methodology
\ No newline at end of file
import React from 'react';
import Topic from '../common/Topic';
const Milestones = () => (
<div className='w-screen px-6 py-12' id='Milestones'>
<Topic topic="Milestones" />
<div className="min-h-screen p-4 bg-white">
<div class="max-w-7xl mx-auto w-full grid grid-cols-9 px-2">
<div class="col-span-4 w-full h-full ">
<div class="w-full h-full bg-gray-100 rounded-md p-2 md:pl-4">
<h1 class=" text-xl py-2 font-bold text-gray-600">Proposal (12 Marks)</h1>
<p class="text-gray-600 sm:text-lg text-sm">The project including its objectives and methodology was initially proposed to the panel.</p>
<p className='font-bold text-primary'>27th March 2023 - 31th March 2023</p>
</div>
</div>
<div class="relative col-span-1 w-full h-full flex justify-center items-center">
<div class="h-full w-1 bg-primary"></div>
<div class="absolute w-6 h-6 rounded-full bg-primary z-10 text-white text-center">1</div>
</div>
<div class="col-span-4 w-full h-full"></div>
<div class="col-span-4 w-full h-full"></div>
<div class="relative col-span-1 w-full h-full flex justify-center items-center">
<div class="h-full w-1 bg-primary"></div>
<div class="absolute w-6 h-6 rounded-full bg-primary z-10 text-white text-center">2</div>
</div>
<div class="col-span-4 w-full h-full ">
<div class="w-full h-full bg-gray-100 rounded-md p-2 md:pl-4">
<h1 class=" text-xl py-2 font-bold text-gray-600">Progress Presentation 1 (15 Marks)</h1>
<p class="text-gray-600 sm:text-lg text-sm">50% of the proposed project was completed and demonstrated in this stage.</p>
<p className='font-bold text-primary'>22th May 2023 - 26th May 2023</p>
</div>
</div>
<div class="col-span-4 w-full h-full ">
<div class="w-full h-full bg-gray-100 rounded-md p-2 md:pl-4">
<h1 class=" text-xl py-2 font-bold text-gray-600">Progress Presentation 2 (18 Marks)</h1>
<p class="text-gray-600 sm:text-lg text-sm">90% of the proposed project was completed and demonstrated in this stage.</p>
<p className='font-bold text-primary'>4th September 2023 - 7th September 2023</p>
</div>
</div>
<div class="relative col-span-1 w-full h-full flex justify-center items-center">
<div class="h-full w-1 bg-primary"></div>
<div class="absolute w-6 h-6 rounded-full bg-primary z-10 text-white text-center">3</div>
</div>
<div class="col-span-4 w-full h-full"></div>
<div class="col-span-4 w-full h-full"></div>
<div class="relative col-span-1 w-full h-full flex justify-center items-center">
<div class="h-full w-1 bg-primary"></div>
<div class="absolute w-6 h-6 rounded-full bg-primary z-10 text-white text-center">4</div>
</div>
<div class="col-span-4 w-full h-full ">
<div class="w-full h-full bg-gray-100 rounded-md p-2 md:pl-4">
<h1 class=" text-xl py-2 font-bold text-gray-600">Demonstration & Poster</h1>
<p class="text-gray-600 sm:text-lg text-sm">90% of the proposed project was completed and demonstrated in this stage.</p>
<p className='font-bold text-primary'>9th October 2023 </p>
</div>
</div>
<div class="col-span-4 w-full h-full ">
<div class="w-full h-full bg-gray-100 rounded-md p-2 md:pl-4">
<h1 class=" text-xl py-2 font-bold text-gray-600">Final Presentation and Viva (20 Marks)</h1>
<p class="text-gray-600 sm:text-lg text-sm">Final presentation to demonstrate the fully functional mobile application and its methodology was done.</p>
<p className='font-bold text-primary'>30th October 2023 - 3th November 2023</p>
</div>
</div>
<div class="relative col-span-1 w-full h-full flex justify-center items-center">
<div class="h-full w-1 bg-primary"></div>
<div class="absolute w-6 h-6 rounded-full bg-primary z-10 text-white text-center">5</div>
</div>
<div class="col-span-4 w-full h-full"></div>
</div>
</div>
</div>
);
export default Milestones;
import React, { useState } from 'react';
import { AiOutlineMenu, AiOutlineClose } from 'react-icons/ai';
import { Link } from 'react-scroll';
function Navbar() {
const [nav, setNav] = useState(true);
const handleNav = () => {
setNav(!nav);
}
return (
<div className='fixed z-50 w-screen shadow-xl'>
<div className="fixed z-50 flex items-center justify-between w-screen h-20 px-8 mx-auto text-gray-500 bg-gray-100 shadow-xl z-90">
<Link to="Home" spy={true} smooth={true} duration={500} offset={-70}><h1 className='w-full text-2xl font-extrabold cursor-pointer text-primary font-body'>POMEGRA</h1></Link>
<ul className='hidden font-semibold md:flex'>
<Link to="Home" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 cursor-pointer hover:text-primary'>Home</li></Link>
<Link to="Litriture" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 cursor-pointer hover:text-primary'>Review</li></Link>
<Link to="Gap" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 cursor-pointer hover:text-primary'>Gap</li></Link>
<Link to="Objectives" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 cursor-pointer hover:text-primary'>Objectives</li></Link>
<Link to="Methodology" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 cursor-pointer hover:text-primary'>Methodology</li></Link>
<Link to="Milestones" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 cursor-pointer hover:text-primary'>Milestones</li></Link>
<Link to="Documents" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 cursor-pointer hover:text-primary'>Documents</li></Link>
<Link to="about" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 cursor-pointer hover:text-primary'>AboutUs</li></Link>
<Link to="Achivements" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 cursor-pointer hover:text-primary'>Achivements</li></Link>
<Link to="Contact" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 cursor-pointer hover:text-primary'>Contact</li></Link>
</ul>
<div onClick={handleNav} className='block md:hidden'>
{!nav ? <AiOutlineClose size={25} className='text-primary' /> : <AiOutlineMenu size={25} className='text-primary' />}
</div>
<div className={!nav ? 'fixed top-0 left-0 w-[70%] h-full border-r-gray-900 bg-light ease-in-out duration-500 z-50' : 'fixed left-[-100%] ease-end-out duration-500'}>
<h1 className='w-full mx-4 my-6 text-2xl font-bold text-primary font-body'>POMEGRA</h1>
<ul className='p-4 pt-12 uppercase '>
<Link onClick={() => setNav(true)} to="Home" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 border-b border-gray-600 cursor-pointer'>Home</li></Link>
<Link onClick={() => setNav(true)} to="Litriture" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 border-b border-gray-600 cursor-pointer'>Review</li></Link>
<Link onClick={() => setNav(true)} to="Gap" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 border-b border-gray-600 cursor-pointer'>Gap</li></Link>
<Link onClick={() => setNav(true)} to="Objectives" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 border-b border-gray-600 cursor-pointer'>Objectives</li></Link>
<Link onClick={() => setNav(true)} to="Methodology" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 border-b border-gray-600 cursor-pointer'>Methodology</li></Link>
<Link onClick={() => setNav(true)} to="Milestones" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 border-b border-gray-600 cursor-pointer'>Milestones</li></Link>
<Link onClick={() => setNav(true)} to="Documents" spy={true} smooth={true} duration={500} offset={-70}> <li className='p-4 border-b border-gray-600 cursor-pointer'>Documents</li></Link>
<Link onClick={() => setNav(true)} to="about" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 border-b border-gray-600 cursor-pointer'>Aboutus</li></Link>
<Link onClick={() => setNav(true)} to="Achivements" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 border-b border-gray-600 cursor-pointer'>Achivements</li></Link>
<Link onClick={() => setNav(true)} to="Contact" spy={true} smooth={true} duration={500} offset={-70}><li className='p-4 border-b border-gray-600 cursor-pointer'>Contact</li></Link>
</ul>
</div>
</div>
</div>
)
}
export default Navbar
\ No newline at end of file
import React from 'react'
import bg from '../assets/letter.png'
const Newsletter = () => {
return (
<div className='w-screen h-[40vh] bg-cover bg-center bg-no-repeat' style={{
backgroundImage: `url(${bg})`
}}>
</div>
)
}
export default Newsletter
\ No newline at end of file
import React from 'react'
import Topic from '../common/Topic'
import Feature from '../common/Feature'
const Objectives = () => {
return (
<div className='w-screen'>
<div id='Objectives' className='max-w-[1350px] mx-auto'>
<Topic topic="Objectives" />
<div className='grid grid-cols-1 gap-4 p-4 sm:grid-cols-2 lg:grid-cols-4 '>
<Feature
name="Soil Nureient Detection"
url={'https://gardening.usask.ca/images/how-to/soilhandistock-1325198451.jpg'}
text="The first set of subobjectives revolves around optimizing soil health. This includes
systematically collecting and analyzing soil samples to identify nutrient deficiencies specific to pomegranate growth. The subsequent step involves suggesting tailored solutions,
such as precise fertilization and soil amendments, to address the identified deficiencies."
/>
<Feature
name="Climate Based Pest And Disease Outbreak Prediction"
url={'https://gardenerspath.com/wp-content/uploads/2021/10/Aphids-Infesting-a-Pomegranate-Bud.jpg'}
text="Another crucial set of subobjectives focuses on leveraging technology to predict and manage pest
and disease outbreaks. This includes collecting real-time climate data through IoT devices, effective
integration of IoT technology, developing accurate machine learning models for forecasting pest and
disease outbreaks, creating user-friendly data visualizations."
/>
<Feature
name="Leaf Disease Detection"
url={'https://edis.ifas.ufl.edu/LyraEDISServlet?command=getScreenImage&oid=2577156'}
text="In this subobjective category, the creation of a database of leaf images representing various
pomegranate diseases is essential. Using deep learning models, such as convolutional neural
networks, accurate disease classification is achieved. The system also provides treatment
recommendations based on disease diagnosis, thereby aiding pomegranate growers in addressing
diseases effectively."
/>
<Feature
name="Fruit Quality Prediction"
url={'https://images.herzindagi.info/image/2023/Feb/pomegranate-seeds-recipes-how-to-add-to-diet.jpg'}
text="The final set of subobjectives introduces an innovative image-based system for assessing the quality of
pomegranate fruit. Users can quickly capture fruit images and receive detailed quality assessments
and recommendations, ensuring consistent high-quality fruit production. Field tests further validate
the system's real-world performance."
/>
</div>
</div>
</div>
)
}
export default Objectives
\ No newline at end of file
import React from 'react'
import Topic from '../common/Topic'
import problem from '../assets/problem.jpg'
const Problem = () => {
return (
<div id='Problem' className='w-screen p-6 bg-gray-100'>
<div className='max-w-[1200px] mx-auto'>
<Topic topic="Research Problem" />
<div className='grid grid-cols-1 gap-4 p-4 md:grid-cols-2'>
<div>
<img src={problem} alt="" />
</div>
<div className='text-justify'>
<p>The comprehensive research problem encompasses multiple critical facets of
pomegranate cultivation and management, aiming to revolutionize the industry
for both farmers and consumers. It begins with the precise determination of
nutrient requirements tailored to various pomegranate varieties, accounting
for regional differences in climate and soil. The focus then shifts to pest
and disease management, where specialized predictive models, driven by machine
learning and historical weather data integration, target the pervasive threats
of anthracnose, bacterial blight, aphids, and whiteflies. This approach enables
timely and accurate disease diagnosis and enhances crop protection.</p>
<p>Simultaneously, the study addresses another significant challenge by utilizing
deep learning and convolutional neural networks (CNNs) to streamline the diagnosis
of foliar diseases. This innovation ensures the sustainability of pomegranate farming
practices by equipping growers with the knowledge to safeguard their crops effectively.</p>
<p>Furthermore, the research extends its impact to fruit quality assessment through an
automated, image-processing-based system. This technology enables pomegranate farmers
to rapidly evaluate fruit quality, identifying any inconsistencies or faults in
appearance. This contributes to the consistent production of high-quality fruits,
thereby increasing growers' earnings and enhancing the overall industry's reputation.</p>
</div>
</div>
</div>
</div>
)
}
export default Problem
\ No newline at end of file
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300&display=swap');
\ No newline at end of file
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
fontFamily: {
// Add your custom font name here
body1: ['Roboto Slab', 'serif'],
logo: ['Pacifico', 'cursive'],
body: ['Roboto', 'sans-serif'],// The 'sans' fallback font will be used if YourCustomFont is unavailable
},
colors: {
// Add your primary color here
primary: '#DE1B55',
secondary: '#F67A92',
pink: '#B5678E',
light: '#EEC6E0' // Replace '#ff0000' with your desired primary color value
},
},
},
plugins: [],
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment