From d90200c204a481cd0b5afbcf4817324df033b4b6 Mon Sep 17 00:00:00 2001 From: shishiro Date: Thu, 6 Mar 2025 15:36:48 +0530 Subject: [PATCH] added home page --- package.json | 2 +- src/App.tsx | 14 +- src/components/shared/Footer.tsx | 118 ++++++++++++++ .../shared/election/create-election.tsx | 2 + src/components/shared/how-it-works.tsx | 75 +++++++++ src/components/shared/recent-elections.tsx | 127 +++++++++++++++ src/components/ui/badge.tsx | 46 ++++++ src/components/ui/card.tsx | 68 ++++++++ src/pages/Home.tsx | 150 ++++++++++++++++++ src/pages/layout.tsx | 2 + 10 files changed, 597 insertions(+), 7 deletions(-) create mode 100644 src/components/shared/Footer.tsx create mode 100644 src/components/shared/how-it-works.tsx create mode 100644 src/components/shared/recent-elections.tsx create mode 100644 src/components/ui/badge.tsx create mode 100644 src/components/ui/card.tsx create mode 100644 src/pages/Home.tsx diff --git a/package.json b/package.json index 4be0cd8..1da26c5 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite", + "dev": "vite --host", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview", diff --git a/src/App.tsx b/src/App.tsx index ff5fff1..9eb80d1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,12 @@ import { Route, Routes } from 'react-router'; -import LoginPage from './pages/LoginPage'; +import LoginPage from '@/pages/LoginPage'; import React from 'react'; -import AuthContext from './context/AuthContext'; -import connectToBlockchain from './config'; +import AuthContext from '@/context/AuthContext'; +import connectToBlockchain from '@/config'; import Layout from '@/pages/layout'; -import CandidatePage from './pages/AddCandidatePage'; -import CreateElection from './pages/CreateElection'; +import CandidatePage from '@/pages/AddCandidatePage'; +import CreateElection from '@/pages/CreateElection'; +import HomePage from '@/pages/Home'; function App() { const auth = React.useContext(AuthContext); @@ -27,6 +28,7 @@ function App() { let is_voter = true; try { + console.log('admin', account); is_admin = await contractInstance.isAdmin(account); } catch (error) { console.error('Error while fetching user data:', error); @@ -60,7 +62,7 @@ function App() { return ( }> - home} /> + } /> } /> election} /> diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx new file mode 100644 index 0000000..a96743c --- /dev/null +++ b/src/components/shared/Footer.tsx @@ -0,0 +1,118 @@ +import { Link } from 'react-router'; +import { Vote } from 'lucide-react'; + +export default function Footer() { + return ( +
+
+
+
+ + + VoteChain + +

+ Secure, transparent, and tamper-proof voting powered by blockchain technology. +

+
+
+

Platform

+
    +
  • + + How It Works + +
    • +
  • + + Active Elections + +
    • +
  • + + Upcoming Elections + +
    • +
  • + + Create Election + +
    • +
+
+
+

Resources

+
    +
  • + + Documentation + +
    • +
  • + + FAQ + +
    • +
  • + + Security + +
    • +
  • + + Blog + +
    • +
+
+
+

Company

+
    +
  • + + About + +
    • +
  • + + Contact + +
    • +
  • + + Privacy Policy + +
    • +
  • + + Terms of Service + +
    • +
+
+
+
+
+

+ © {new Date().getFullYear()} VoteChain. All rights reserved. +

+
+ + GitHub + +
+
+
+
+
+ ); +} diff --git a/src/components/shared/election/create-election.tsx b/src/components/shared/election/create-election.tsx index 82f4bba..d494e0d 100644 --- a/src/components/shared/election/create-election.tsx +++ b/src/components/shared/election/create-election.tsx @@ -43,6 +43,8 @@ export function CreateElectionForm() { if (state.instance !== null) { const totalElections = await state.instance.methods.noOfElections().call(); + console.log('instance', state.instance); + console.log('TotalElections', totalElections); for (let i = 1; i <= totalElections; i++) { const electionData = await state.instance.methods .getElection(i) diff --git a/src/components/shared/how-it-works.tsx b/src/components/shared/how-it-works.tsx new file mode 100644 index 0000000..5d76732 --- /dev/null +++ b/src/components/shared/how-it-works.tsx @@ -0,0 +1,75 @@ +export function HowItWorks() { + return ( +
+
+
+

+ How VoteChain Works +

+

+ Our blockchain voting platform ensures security, transparency, and ease of use at every + step. +

+
+ +
+
+ +
+
+
+
+

Create an Election

+

+ Set up your election with candidates, voting rules, and duration. Customize + authentication methods to ensure only eligible voters participate. +

+
+
+
+
+ +
+
+
+
+

Secure Voter Authentication

+

+ Voters verify their identity through secure methods like email verification, + wallet connection, or custom authentication systems. +

+
+
+
+ +
+
+
+

Cast Secure Votes

+

+ Voters make their selections through an intuitive interface. Each vote is + encrypted and securely recorded on the blockchain. +

+
+
+
+
+ +
+
+
+
+

Transparent Results

+

+ Results are tallied automatically and can be independently verified through the + blockchain, ensuring complete transparency while maintaining voter privacy. +

+
+
+
+
+
+
+
+ ); +} diff --git a/src/components/shared/recent-elections.tsx b/src/components/shared/recent-elections.tsx new file mode 100644 index 0000000..62d0b4b --- /dev/null +++ b/src/components/shared/recent-elections.tsx @@ -0,0 +1,127 @@ +import { Link } from 'react-router'; +import { ArrowRight, Calendar, Vote } from 'lucide-react'; + +import { Button } from '@/components/ui/button'; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from '@/components/ui/card'; +import { Badge } from '@/components/ui/badge'; + +const recentElections = [ + { + id: 1, + title: 'Community Board Election', + description: 'Vote for the new community board members', + status: 'active', + votes: 156, + candidates: 5, + endDate: '2023-12-15', + category: 'Community', + }, + { + id: 2, + title: 'Student Council President', + description: 'Annual election for the student council president', + status: 'upcoming', + votes: 0, + candidates: 3, + endDate: '2023-12-10', + category: 'Education', + }, + { + id: 3, + title: 'Tech Startup Board of Directors', + description: 'Elect the new board of directors', + status: 'active', + votes: 87, + candidates: 7, + endDate: '2024-01-05', + category: 'Corporate', + }, +]; + +export function RecentElections() { + return ( +
+
+
+
+

Recent Elections

+

+ Browse through active and upcoming elections on our platform. +

+
+ +
+ +
+ {recentElections.map((election) => ( + + +
+ + {election.status === 'active' ? 'Active' : 'Upcoming'} + + + {election.category} + +
+ {election.title} + {election.description} + + +
+
+ Candidates + {election.candidates} +
+
+ Votes Cast + {election.votes} +
+
+ End Date + + {new Date(election.endDate).toLocaleDateString()} + +
+
+ + + + + + ))} +
+
+
+ ); +} diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx new file mode 100644 index 0000000..37e088a --- /dev/null +++ b/src/components/ui/badge.tsx @@ -0,0 +1,46 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", + secondary: + "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", + destructive: + "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40", + outline: + "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +function Badge({ + className, + variant, + asChild = false, + ...props +}: React.ComponentProps<"span"> & + VariantProps & { asChild?: boolean }) { + const Comp = asChild ? Slot : "span" + + return ( + + ) +} + +export { Badge, badgeVariants } diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx new file mode 100644 index 0000000..5e960a6 --- /dev/null +++ b/src/components/ui/card.tsx @@ -0,0 +1,68 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +function Card({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardTitle({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardDescription({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardContent({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardFooter({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..0b3514c --- /dev/null +++ b/src/pages/Home.tsx @@ -0,0 +1,150 @@ +import { Link } from 'react-router'; +import { ArrowRight, CheckCircle, Lock, ShieldCheck, Vote } from 'lucide-react'; + +import { Button } from '@/components/ui/button'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { HowItWorks } from '@/components/shared/how-it-works'; +import { RecentElections } from '@/components/shared/recent-elections'; +import { useContext } from 'react'; +import AuthContext from '@/context/AuthContext'; + +export default function HomePage() { + const { state } = useContext(AuthContext); + return ( +
+
+ {/* Hero Section */} +
+
+
+
+
+
+ + Secure Blockchain Voting +
+

+ Transparent & Secure Voting Platform +

+

+ VoteChain leverages blockchain technology to provide a secure, transparent, and + tamper-proof voting experience for organizations and communities. +

+
+ + {state.is_admin && ( + + )} +
+
+
+
+
+ Secure Online Voting +
+
+
+
+
+ + {/* Features Section */} +
+
+
+

+ Why Choose VoteChain? +

+

+ Our blockchain-based voting platform offers unparalleled security and transparency + for all types of elections. +

+
+
+ + +
+ +
+ Secure & Immutable + + +

+ Votes are securely recorded on the blockchain, making them tamper-proof and + immutable once cast. +

+ + + + +
+ +
+ Transparent Verification + + +

+ Anyone can verify the election results while maintaining voter privacy through + cryptographic techniques. +

+ + + + +
+ +
+ Easy to Use + + +

+ Simple and intuitive interface makes voting accessible to everyone, regardless + of technical expertise. +

+ + +
+
+
+ + {/* How It Works Section */} + + + {/* Recent Elections Section */} + + + {/* CTA Section */} +
+
+
+

+ Ready to Transform Your Voting Process? +

+

+ Join thousands of organizations that have made their voting process secure, + transparent, and efficient with VoteChain. +

+
+ + +
+
+
+
+
+
+ ); +} diff --git a/src/pages/layout.tsx b/src/pages/layout.tsx index 1f3de8d..d81d85e 100644 --- a/src/pages/layout.tsx +++ b/src/pages/layout.tsx @@ -1,5 +1,6 @@ import { Outlet } from 'react-router'; import Navbar from '@/components/shared/Navbar'; +import Footer from '@/components/shared/Footer'; const Layout = () => { return ( @@ -8,6 +9,7 @@ const Layout = () => {
+