diff --git a/client/app/page.tsx b/client/app/page.tsx index 5c87672..c1393e1 100644 --- a/client/app/page.tsx +++ b/client/app/page.tsx @@ -1,10 +1,28 @@ +import Hero from "@/components/Homepage/Hero"; +import Navbar from "@/components/Homepage/Navbar"; import Image from "next/image"; +import SectionTitle from "@/components/Homepage/SectionTitle";import Benifit from "@/components/Homepage/Benifit"; +import Deliverable from "@/components/Homepage/Deliverables"; +import Teamintro from "@/components/Homepage/Teamintro"; +; export default function Home() { return ( -
-

Welcome to EcoSync

- EcoSync +
+ + + + Our dashboard empowers Dhaka South City Corporation to allocate resources more effectively, + optimizing manpower and equipment utilization for waste management tasks, thus fostering operational efficiency, reducing operational costs, + and ultimately leading to a cleaner, more sustainable urban environment. + + + + +
); } +// /EcoSync \ No newline at end of file diff --git a/client/components/Homepage/Benifit.tsx b/client/components/Homepage/Benifit.tsx new file mode 100644 index 0000000..5efe8a1 --- /dev/null +++ b/client/components/Homepage/Benifit.tsx @@ -0,0 +1,96 @@ +import React from 'react' +import Image from "next/image"; +const Benifit = () => { + return ( +
+ +
+ +
+ +
+ {/* Hero Illustration */} + N +
+
+
+
Key Features
+
+
+
+ + + +
+

Centralized Administration

+
+
+ +

Empower system administrators to efficiently manage all aspects of waste management, including user creation, role assignment, and permissions. With a user-friendly interface, administrators can streamline operations and ensure accountability across the organization.

+ +
+
+
+
+
+ + + + + + +
+

Efficient Resource Allocation and Billing System

+
+
+ +

Facilitate efficient resource allocation by providing tools for managing vehicle entry and release at STS and landfill sites. STS managers can oversee vehicle entry and release processes, while landfill managers can track vehicle entries, manage billing, and monitor STS status in real-time.

+ +
+
+
+
+
+ + + + + +
+

Real-time Vehicle Tracking and Fleet Optimizations

+
+
+ +

Enable STS and landfill managers to monitor vehicle movements in real-time using live Google Maps integration. With accurate vehicle location data, managers can optimize routes, track vehicle status, and ensure timely waste transfer between STS and landfills.

+ +
+
+
+
+
+ ) +} + +export default Benifit \ No newline at end of file diff --git a/client/components/Homepage/Container.tsx b/client/components/Homepage/Container.tsx new file mode 100644 index 0000000..9e41a64 --- /dev/null +++ b/client/components/Homepage/Container.tsx @@ -0,0 +1,17 @@ +import React, { ReactNode } from "react"; + +interface ContainerProps { + className?: string; + children: ReactNode; +} + +const Container = ({ className, children }: ContainerProps) => { + return ( +
+ {children} +
+ ); +} + +export default Container; diff --git a/client/components/Homepage/DarkSwitch.tsx b/client/components/Homepage/DarkSwitch.tsx new file mode 100644 index 0000000..0f17c59 --- /dev/null +++ b/client/components/Homepage/DarkSwitch.tsx @@ -0,0 +1,53 @@ +import React, { useState, useEffect } from "react"; +import { useTheme } from "next-themes"; + +const ThemeChanger = () => { + const [mounted, setMounted] = useState(false); + const { theme, setTheme } = useTheme(); + + // When mounted on client, now we can show the UI + useEffect(() => setMounted(true), []); + + if (!mounted) return null; + + return ( +
+ {theme === "dark" ? ( + + ) : ( + + )} +
+ ); +}; + +export default ThemeChanger; diff --git a/client/components/Homepage/Data.ts b/client/components/Homepage/Data.ts new file mode 100644 index 0000000..a4f404e --- /dev/null +++ b/client/components/Homepage/Data.ts @@ -0,0 +1,62 @@ +import { ReactNode } from "react"; + +interface Bullet { + title: string; + desc: string; + icon: string; // Image URL +} + +interface Benefit { + title: string; + desc: string; + image: string; // Image URL + bullets: Bullet[]; +} + +const benefitOne: Benefit = { + title: "Highlight your benefits", + desc: "You can use this space to highlight your first benefit or a feature of your product. It can also contain an image or Illustration like in the example along with some bullet points.", + image: "url_to_image.png", // Replace with URL of the image + bullets: [ + { + title: "Enhanced Operational Efficiency", + desc: "Then explain the first point briefly in one or two lines.", + icon: "url_to_image1.png", // Replace with URL of the first image + }, + { + title: "Improve acquisition", + desc: "Here you can add the next benefit point.", + icon: "url_to_image2.png", // Replace with URL of the second image + }, + { + title: "Drive customer retention", + desc: "This will be your last bullet point in this section.", + icon: "url_to_image3.png", // Replace with URL of the third image + }, + ], +}; + +const benefitTwo: Benefit = { + title: "Offer more benefits here", + desc: "You can use this same layout with a flip image to highlight your rest of the benefits of your product. It can also contain an image or Illustration as above section along with some bullet points.", + image: "url_to_image.png", // Replace with URL of the image + bullets: [ + { + title: "Mobile Responsive Template", + desc: "Nextly is designed as a mobile first responsive template.", + icon: "url_to_image4.png", // Replace with URL of the fourth image + }, + { + title: "Powered by Next.js & TailwindCSS", + desc: "This template is powered by latest technologies and tools.", + icon: "url_to_image5.png", // Replace with URL of the fifth image + }, + { + title: "Dark & Light Mode", + desc: "Nextly comes with a zero-config light & dark mode. ", + icon: "url_to_image6.png", // Replace with URL of the sixth image + }, + ], +}; + +export { benefitOne, benefitTwo }; diff --git a/client/components/Homepage/Deliverables.tsx b/client/components/Homepage/Deliverables.tsx new file mode 100644 index 0000000..8a72b10 --- /dev/null +++ b/client/components/Homepage/Deliverables.tsx @@ -0,0 +1,125 @@ +import React from 'react' +import Image from "next/image"; +const Deliverable = () => { + return ( +
+
+
+

Deliverable Project Resources +

+

A collection of downloadable assets essential for project development and understanding including API documentation, diagrams, UI prototype, and Powerpoint presentation.

+
+
+
+
+
+ +
+

+ API Documentation + +

+

Detailed API documentation structured in an Excel file for easy reference and organization.

+
+
+
+
+
+ + + + + + + +
+

Entity Relationship Diagram

+

Visualization of entity relationships to depict the connections between data entities.

+
+
+
+
+
+ + + + +
+

End to End Activity Diagram

+

Visual representation illustrating the sequential flow of activities from start to finish.

+
+
+
+
+
+ + + +
+

Backend Workflow Diagram

+

Diagram outlining the step-by-step process and interactions of the backend system.

+
+
+
+
+
+ + + +
+

UI Prototype

+

UI prototype (made with Figma) presented for design evaluation and feedback.

+
+
+
+
+
+ + + +
+

Powerpoint presentation

+

PowerPoint presentation showcasing app screens with titles, offering a comprehensive overview.

+
+
+
+
+
+ ) +} + +export default Deliverable \ No newline at end of file diff --git a/client/components/Homepage/Hero.tsx b/client/components/Homepage/Hero.tsx new file mode 100644 index 0000000..09325ab --- /dev/null +++ b/client/components/Homepage/Hero.tsx @@ -0,0 +1,205 @@ +"use client"; + +import Image from "next/image"; +import Container from "./Container"; + + +const Hero = () => { + return ( + <> + +
+
+

+ Revolutionizing Waste Management with Dhaka South City Corporation +

+

+ Join us in Building a Cleaner, Greener Dhaka - Innovating Solutions for Sustainable Waste Management, Enhancing Public Health, + and Preserving Our Environment for Generations to Come +

+ +
+ + Project Zip File + + + + GitHub + + + View on Github + +
+
+
+
+
+ {/* Hero Illustration */} + N +
+
+ + {/* +
+
+ Trusted by 2000+{" "} + customers worldwide +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ */} + + ); +} + +function AmazonLogo() { + return ( + + + + + + + + + + + + + ); +} + +function MicrosoftLogo() { + return ( + + + + + ); +} + +function NetflixLogo() { + return ( + + + + + + ); +} + +function SonyLogo() { + return ( + + + + + + + + + ); +} + +function VerizonLogo() { + return ( + + + + + + + + + ); +} + +export default Hero; \ No newline at end of file diff --git a/client/components/Homepage/Navbar.tsx b/client/components/Homepage/Navbar.tsx new file mode 100644 index 0000000..dd75a2b --- /dev/null +++ b/client/components/Homepage/Navbar.tsx @@ -0,0 +1,104 @@ +"use client"; +import Link from "next/link"; +import ThemeChanger from "./DarkSwitch"; +import Image from "next/image" +import { Disclosure } from "@headlessui/react"; + +const Navbar = () => { + const navigation = [ + "Product", + "Features", + "Pricing", + "Company", + "Blog", + ]; + + return ( +
+ +
+ ); +} + +export default Navbar; diff --git a/client/components/Homepage/SectionTitle.tsx b/client/components/Homepage/SectionTitle.tsx new file mode 100644 index 0000000..1e68e0a --- /dev/null +++ b/client/components/Homepage/SectionTitle.tsx @@ -0,0 +1,39 @@ +import React, { ReactNode } from "react"; +import Container from "./Container"; + +interface SectionTitleProps { + align?: "left" | "center"; // Align can be left or center + pretitle?: string; + title?: string; + children?: ReactNode; +} + +const SectionTitle = ({ align = "center", pretitle, title, children }: SectionTitleProps) => { + return ( + + {pretitle && ( +
+ {pretitle} +
+ )} + + {title && ( +

+ {title} +

+ )} + + {children && ( +

+ {children} +

+ )} + + ); +} + +export default SectionTitle; diff --git a/client/components/Homepage/Teamintro.tsx b/client/components/Homepage/Teamintro.tsx new file mode 100644 index 0000000..248a9ea --- /dev/null +++ b/client/components/Homepage/Teamintro.tsx @@ -0,0 +1,49 @@ +import React from 'react' +import Image from 'next/image' +import mehrajvai from './assets/mehrajvai.jpeg'; +import shawonvai from './assets/shawonvai.jpeg'; +import nafi from './assets/nafi.jpeg'; + + +const Teamintro = () => { + return ( +
+
+ Our Team +
+
+
+
+
+ testimonial +

I'm a student currently studying Software Engineering at Shahjalal University of Science & Technology. I really enjoy learning data structures and algorithms. And I love doing Competitive Programming. I'm also interested in exploring core Object Oriented Programming concepts.

+ +

Shawon Majid

+

Backend Developer

+
+
+
+
+ testimonial +

A highly motivated and hardworking individual, who is seeking an apprenticeship in the IT industry to build upon a keen scientific interest and start a career as an IT Expert and a critical problem solver. The eventual career goal is to become a fully-qualified and experienced Software Developer.

+ +

Md Mehrajul Islam

+

MERN Develeoper

+
+
+
+
+ testimonial +

I am a dedicated and energetic software developer with a diverse skill set. My expertise covers a range of areas, including Cloud Technology, mobile app and web development. In the realm of web development, I've successfully executed projects using Next.js, React.js, and JavaScript.

+ +

Nafi Ullah Shafin

+

Frontend Developer

+
+
+
+
+
+ ) +} + +export default Teamintro \ No newline at end of file diff --git a/client/package-lock.json b/client/package-lock.json index 02ed085..70db341 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -12,6 +12,8 @@ "@chakra-ui/react": "^2.8.2", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.0", + "@headlessui/react": "^1.7.18", + "@heroicons/react": "^2.1.3", "@mantine/charts": "^7.7.1", "@mantine/core": "^7.7.1", "@mantine/hooks": "^7.7.1", @@ -1681,6 +1683,30 @@ "supercluster": "^8.0.1" } }, + "node_modules/@headlessui/react": { + "version": "1.7.18", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz", + "integrity": "sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==", + "dependencies": { + "@tanstack/react-virtual": "^3.0.0-beta.60", + "client-only": "^0.0.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, + "node_modules/@heroicons/react": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.3.tgz", + "integrity": "sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==", + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@hookform/resolvers": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.4.tgz", @@ -2990,6 +3016,22 @@ "react-dom": ">=16.8" } }, + "node_modules/@tanstack/react-virtual": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.2.0.tgz", + "integrity": "sha512-OEdMByf2hEfDa6XDbGlZN8qO6bTjlNKqjM3im9JG+u3mCL8jALy0T/67oDI001raUUPh1Bdmfn4ZvPOV5knpcg==", + "dependencies": { + "@tanstack/virtual-core": "3.2.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@tanstack/table-core": { "version": "8.14.0", "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.14.0.tgz", @@ -3002,6 +3044,15 @@ "url": "https://github.com/sponsors/tannerlinsley" } }, + "node_modules/@tanstack/virtual-core": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.2.0.tgz", + "integrity": "sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@types/d3-array": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz", diff --git a/client/package.json b/client/package.json index e9b8b98..dd08477 100644 --- a/client/package.json +++ b/client/package.json @@ -13,6 +13,8 @@ "@chakra-ui/react": "^2.8.2", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.0", + "@headlessui/react": "^1.7.18", + "@heroicons/react": "^2.1.3", "@mantine/charts": "^7.7.1", "@mantine/core": "^7.7.1", "@mantine/hooks": "^7.7.1", diff --git a/client/public/benifits.png b/client/public/benifits.png new file mode 100644 index 0000000..3afb86e Binary files /dev/null and b/client/public/benifits.png differ diff --git a/client/public/deliverables.png b/client/public/deliverables.png new file mode 100644 index 0000000..77b41f7 Binary files /dev/null and b/client/public/deliverables.png differ diff --git a/client/public/features.png b/client/public/features.png new file mode 100644 index 0000000..0888419 Binary files /dev/null and b/client/public/features.png differ diff --git a/client/public/hero.png b/client/public/hero.png new file mode 100644 index 0000000..e1e97a1 Binary files /dev/null and b/client/public/hero.png differ diff --git a/client/public/mehrajvai.jpeg b/client/public/mehrajvai.jpeg new file mode 100644 index 0000000..24345a8 Binary files /dev/null and b/client/public/mehrajvai.jpeg differ diff --git a/client/public/nafi.jpeg b/client/public/nafi.jpeg new file mode 100644 index 0000000..e77edba Binary files /dev/null and b/client/public/nafi.jpeg differ diff --git a/client/public/result.xlsx b/client/public/result.xlsx new file mode 100644 index 0000000..f32afed Binary files /dev/null and b/client/public/result.xlsx differ diff --git a/client/public/shawonvai.jpeg b/client/public/shawonvai.jpeg new file mode 100644 index 0000000..b164b43 Binary files /dev/null and b/client/public/shawonvai.jpeg differ