Skip to content

Homepage #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 31, 2024
Merged

Homepage #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8c79e49
navbar and hero section done
nafi-ullah Mar 30, 2024
dffdc28
homepage layout done
nafi-ullah Mar 31, 2024
ec14148
home page done
nafi-ullah Mar 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 21 additions & 3 deletions client/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<main>
<h1>Welcome to EcoSync</h1>
<Image src="/logo.png" alt="EcoSync" width={200} height={200} />
<main className="bg-[#EEF7FC]">
<Navbar/>
<Hero />
<SectionTitle
pretitle="EcoSync Benefits"
title=" Why should you use this EcoSync Software">
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.
</SectionTitle>
<Benifit/>
<Deliverable/>
<Teamintro/>

</main>
);
}
// /<Image src="/logo.png" alt="EcoSync" width={200} height={200} />
96 changes: 96 additions & 0 deletions client/components/Homepage/Benifit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import React from 'react'
import Image from "next/image";
const Benifit = () => {
return (
<section className="text-gray-600 body-font">

<div className="container px-5 py-24 mx-auto flex flex-wrap">

<div className="lg:w-1/2 w-full mb-10 lg:mb-0 rounded-lg overflow-hidden">

<div className="w-[616px] h-[616px]">
{/* <Image
src="/hero.png"
width="616"
height="617"
className={"object-cover"}
alt="Hero Illustration"
loading="eager"
placeholder="blur"
/> */}
<Image
src="/benifits.png"
alt="N"
width="616"
height="616"

/>
</div>
</div>
<div className="flex flex-col flex-wrap lg:py-6 -mb-10 lg:w-1/2 lg:pl-12 lg:text-left text-center">
<div className='text-4xl font-bold mb-12 text-black'>Key Features</div>
<div className="flex flex-col mb-10 lg:items-start items-center">
<div className='flex'>
<div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-black mb-5 mr-5">
<svg fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-6 h-6" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<div className='mt-2'><h2 className="text-gray-900 text-lg title-font font-medium mb-3">Centralized Administration</h2></div>
</div>
<div className="flex-grow">

<p className="leading-relaxed text-base">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.</p>

</div>
</div>
<div className="flex flex-col mb-10 lg:items-start items-center">
<div className='flex'>
<div className="w-12 h-12 p-2 inline-flex items-center justify-center rounded-full bg-indigo-100 mb-5">


<svg fill="#000000" xmlns="http://www.w3.org/2000/svg"
width="800px" height="800px" viewBox="0 0 52 52" enable-background="new 0 0 52 52" >
<path d="M41.4,39.7l-0.9,0.9c-1,1-2.3,1.5-3.7,1.5h-2.6c-2.4,0-5-1.9-5-5.2v-2.5c0-2,0.9-3.2,1.4-3.9l10.8-11
c0.3-0.3,0.6-1,0.6-1.4V9.8C42,7.2,39.8,5,37.2,5H11.6C9,5,6.8,7.4,6.8,9.8H5.2C3.4,9.8,2,11.3,2,13.1s1.4,3.2,3.2,3.2h1.6v6.5H5.2
C3.4,22.8,2,24.2,2,26s1.4,3.2,3.2,3.2h1.6v6.5H5.2c-1.8,0-3.2,1.5-3.2,3.2c0,1.8,1.4,3.2,3.2,3.2h1.6c0,3.2,2.2,4.8,4.8,4.8H30h7.2
c2.6,0,4.8-2.2,4.8-4.8V40C42,39.5,41.8,39.4,41.4,39.7z M33.2,17.1c0,0.9-0.7,1.6-1.6,1.6h-16c-0.9,0-1.6-0.7-1.6-1.6v-1.6
c0-0.9,0.7-1.6,1.6-1.6h16c0.9,0,1.6,0.7,1.6,1.6V17.1z M26,36.5c0,0.9-0.7,1.6-1.6,1.6h-8.8c-0.9,0-1.6-0.7-1.6-1.6v-1.6
c0-0.9,0.7-1.6,1.6-1.6h8.8c0.9,0,1.6,0.7,1.6,1.6V36.5z M28.4,26.8c0,0.9-0.7,1.6-1.6,1.6H15.6c-0.9,0-1.6-0.7-1.6-1.6v-1.6
c0-0.9,0.7-1.6,1.6-1.6h11.2c0.9,0,1.6,0.7,1.6,1.6V26.8z"/>
<path d="M49.5,22.4l-1-1c-0.6-0.6-1.6-0.6-2.2,0L34.1,34C34,34,34,34.2,34,34.2v2.7c0,0.2,0,0.4,0.2,0.4h2.6
c0.1,0,0.2-0.1,0.3-0.1l12.3-12.4C50.2,24.1,50.2,23.1,49.5,22.4z"/>
</svg>
</div>
<div> <h2 className="text-gray-900 text-lg title-font font-medium mb-3 mt-2 ml-5">Efficient Resource Allocation and Billing System</h2></div>
</div>
<div className="flex-grow">

<p className="leading-relaxed text-base">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.</p>

</div>
</div>
<div className="flex flex-col mb-10 lg:items-start items-center">
<div className='flex'>
<div className="w-12 h-12 p-2 inline-flex items-center justify-center rounded-full bg-indigo-100 mb-5">
<svg width="800px" height="800px" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 10C11.3807 10 12.5 8.88071 12.5 7.5C12.5 6.11929 11.3807 5 10 5C8.61929 5 7.5 6.11929 7.5 7.5C7.5 8.88071 8.61929 10 10 10ZM10 7C10.2761 7 10.5 7.22386 10.5 7.5C10.5 7.77614 10.2761 8 10 8C9.72386 8 9.5 7.77614 9.5 7.5C9.5 7.22386 9.72386 7 10 7Z" fill="#000000"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 7.28555C5 10.1987 7.80453 15 10 15C12.1955 15 15 10.1987 15 7.28555C15 4.38124 12.7774 2 10 2C7.22258 2 5 4.38124 5 7.28555ZM13 7.28555C13 9.2396 10.8035 13 10 13C9.19652 13 7 9.2396 7 7.28555C7 5.45617 8.35914 4 10 4C11.6409 4 13 5.45617 13 7.28555Z" fill="#000000"/>
<path d="M13.7298 10C13.1775 10 12.7298 9.55228 12.7298 9C12.7298 8.44772 13.1775 8 13.7298 8C15.0774 8 16.2597 8.89861 16.6204 10.1971L18.0093 15.1971C18.4527 16.7935 17.5181 18.4471 15.9216 18.8906C15.6602 18.9632 15.3901 19 15.1187 19H4.88128C3.22442 19 1.88128 17.6569 1.88128 16C1.88128 15.7286 1.9181 15.4585 1.99073 15.1971L3.37961 10.1971C3.7403 8.89861 4.92254 8 6.27017 8C6.82245 8 7.27017 8.44772 7.27017 9C7.27017 9.55228 6.82245 10 6.27017 10C5.82096 10 5.42688 10.2995 5.30665 10.7324L3.91776 15.7324C3.89355 15.8195 3.88128 15.9095 3.88128 16C3.88128 16.5523 4.32899 17 4.88128 17H15.1187C15.2092 17 15.2992 16.9877 15.3864 16.9635C15.9185 16.8157 16.23 16.2645 16.0822 15.7324L14.6933 10.7324C14.5731 10.2995 14.179 10 13.7298 10Z" fill="#000000"/>
</svg>
</div>
<div><h2 className="text-gray-900 text-lg title-font font-medium mb-3 ml-5 mt-2">Real-time Vehicle Tracking and Fleet Optimizations</h2></div>
</div>
<div className="flex-grow">

<p className="leading-relaxed text-base">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.</p>

</div>
</div>
</div>
</div>
</section>
)
}

export default Benifit
17 changes: 17 additions & 0 deletions client/components/Homepage/Container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React, { ReactNode } from "react";

interface ContainerProps {
className?: string;
children: ReactNode;
}

const Container = ({ className, children }: ContainerProps) => {
return (
<div
className={`container p-8 mx-auto xl:px-0 ${className ?? ""}`}>
{children}
</div>
);
}

export default Container;
53 changes: 53 additions & 0 deletions client/components/Homepage/DarkSwitch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="flex items-center">
{theme === "dark" ? (
<button
onClick={() => setTheme("light")}
className="text-gray-300 rounded-full outline-none focus:outline-none">
<span className="sr-only">Light Mode</span>

<svg
xmlns="http://www.w3.org/2000/svg"
className="w-5 h-5"
viewBox="0 0 20 20"
fill="currentColor">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
</svg>
</button>
) : (
<button
onClick={() => setTheme("dark")}
className="text-gray-500 rounded-full outline-none focus:outline-none focus-visible:ring focus-visible:ring-gray-100 focus:ring-opacity-20">
<span className="sr-only">Dark Mode</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1"
strokeLinecap="round"
strokeLinejoin="round">
<circle cx="12" cy="12" r="5" />
<path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
</svg>
</button>
)}
</div>
);
};

export default ThemeChanger;
62 changes: 62 additions & 0 deletions client/components/Homepage/Data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 };
Loading