Skip to content
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

frontend tasks completed #3

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

frontend tasks completed #3

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
c4e3149
frontend tasks completed
BearerOP Jan 19, 2025
83eba6b
Add Footer component and integrate it into the main application layout
BearerOP Jan 19, 2025
08060d3
Merge branch 'main' into main
BearerOP Jan 28, 2025
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
25 changes: 25 additions & 0 deletions apps/excelidraw-frontend/app/(auth)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { Button } from "@repo/ui/button";
import { ChevronLeft } from "lucide-react";
import Link from "next/link";
import React from "react";

interface AuthLayoutProps {
children: React.ReactNode;
}

const AuthLayout: React.FC<AuthLayoutProps> = ({ children }) => {
return (
<div className="flex flex-col items-center justify-center h-screen relative">
<Link className="absolute top-0 left-0 m-4 " href="/">
{/* @ts-ignore */}
<Button variant={"link"} className="text-gray-300 hover:text-custom-green-text transition-colors duration-500">
<ChevronLeft />
Go back to Home
</Button>
</Link>
{children}
</div>
);
};

export default AuthLayout;
0 apps/excelidraw-frontend/app/signin/page.tsx → ...idraw-frontend/app/(auth)/signin/page.tsx
View file
Open in desktop
File renamed without changes.
0 apps/excelidraw-frontend/app/signup/page.tsx → ...idraw-frontend/app/(auth)/signup/page.tsx
View file
Open in desktop
File renamed without changes.
Binary file removed apps/excelidraw-frontend/app/favicon.ico
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions apps/excelidraw-frontend/app/favicon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 0 additions & 50 deletions apps/excelidraw-frontend/app/globals.css
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions apps/excelidraw-frontend/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import "../styles/globals.css";

const geistSans = Geist({
variable: "--font-geist-sans",
Expand All @@ -25,10 +25,10 @@ export default function RootLayout({
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
className={`${geistSans.variable} ${geistMono.variable} antialiased bg-[#020a08] text-white`}
>
{children}
</body>
</html>
);
}
}
135 changes: 10 additions & 125 deletions apps/excelidraw-frontend/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,128 +1,13 @@
import { Button } from "@repo/ui/button";
import { Card } from "@repo/ui/card";
import { Pencil, Share2, Users2, Sparkles, Github, Download } from "lucide-react";
import Link from "next/link";
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import Hero from "@/components/Hero";

function App() {
export default function App() {
return (
<div className="min-h-screen bg-background">
{/* Hero Section */}
<header className="relative overflow-hidden">
<div className="container mx-auto px-4 py-16 sm:px-6 lg:px-8">
<div className="text-center">
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl text-foreground">
Collaborative Whiteboarding
<span className="text-primary block">Made Simple</span>
</h1>
<p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">
Create, collaborate, and share beautiful diagrams and sketches with our intuitive drawing tool.
No sign-up required.
</p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<Link href={"/signin"}>
<Button variant={"primary"} size="lg" className="h-12 px-6">
Sign in
<Pencil className="ml-2 h-4 w-4" />
</Button>
</Link>
<Link href="/signup">
<Button variant="outline" size="lg" className="h-12 px-6">
Sign up
</Button>
</Link>
</div>
</div>
</div>
</header>

{/* Features Section */}
<section className="py-24 bg-muted/50">
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
<Card className="p-6 border-2 hover:border-primary transition-colors">
<div className="flex items-center gap-4">
<div className="p-2 rounded-lg bg-primary/10">
<Share2 className="h-6 w-6 text-primary" />
</div>
<h3 className="text-xl font-semibold">Real-time Collaboration</h3>
</div>
<p className="mt-4 text-muted-foreground">
Work together with your team in real-time. Share your drawings instantly with a simple link.
</p>
</Card>

<Card className="p-6 border-2 hover:border-primary transition-colors">
<div className="flex items-center gap-4">
<div className="p-2 rounded-lg bg-primary/10">
<Users2 className="h-6 w-6 text-primary" />
</div>
<h3 className="text-xl font-semibold">Multiplayer Editing</h3>
</div>
<p className="mt-4 text-muted-foreground">
Multiple users can edit the same canvas simultaneously. See who's drawing what in real-time.
</p>
</Card>

<Card className="p-6 border-2 hover:border-primary transition-colors">
<div className="flex items-center gap-4">
<div className="p-2 rounded-lg bg-primary/10">
<Sparkles className="h-6 w-6 text-primary" />
</div>
<h3 className="text-xl font-semibold">Smart Drawing</h3>
</div>
<p className="mt-4 text-muted-foreground">
Intelligent shape recognition and drawing assistance helps you create perfect diagrams.
</p>
</Card>
</div>
</div>
</section>

{/* CTA Section */}
<section className="py-24">
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
<div className="bg-primary rounded-3xl p-8 sm:p-16">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl font-bold tracking-tight text-primary-foreground sm:text-4xl">
Ready to start creating?
</h2>
<p className="mx-auto mt-6 max-w-xl text-lg text-primary-foreground/80">
Join thousands of users who are already creating amazing diagrams and sketches.
</p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<Button size="lg" variant="secondary" className="h-12 px-6">
Open Canvas
<Pencil className="ml-2 h-4 w-4" />
</Button>
<Button variant="outline" size="lg" className="h-12 px-6 bg-transparent text-primary-foreground border-primary-foreground hover:bg-primary-foreground hover:text-primary">
View Gallery
</Button>
</div>
</div>
</div>
</div>
</section>

{/* Footer */}
<footer className="border-t">
<div className="container mx-auto px-4 py-12 sm:px-6 lg:px-8">
<div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
<p className="text-sm text-muted-foreground">
© 2024 Excalidraw Clone. All rights reserved.
</p>
<div className="flex space-x-6">
<a href="https://github.com" className="text-muted-foreground hover:text-primary">
<Github className="h-5 w-5" />
</a>
<a href="#" className="text-muted-foreground hover:text-primary">
<Download className="h-5 w-5" />
</a>
</div>
</div>
</div>
</footer>
</div>
<main className="min-h-screen">
<Header />
<Hero />
<Footer />
</main>
);
}

export default App;
}
21 changes: 21 additions & 0 deletions apps/excelidraw-frontend/components.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}
32 changes: 11 additions & 21 deletions apps/excelidraw-frontend/components/AuthPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,13 @@
"use client";

export function AuthPage({isSignin}: {
isSignin: boolean
}) {
return <div className="w-screen h-screen flex justify-center items-center">
<div className="p-6 m-2 bg-white rounded">
<div className="p-2">
<input type="text" placeholder="Email"></input>
</div>
<div className="p-2">

</div>

<div className="pt-2">
<button className="bg-red-200 rounded p-2" onClick={() => {

}}>{isSignin ? "Sign in" : "Sign up"}</button>
</div>
</div>
import { SigninForm } from "./SigninForm";
import { SignUp } from "./SignupForm";

export function AuthPage({ isSignin }: { isSignin: boolean }) {
return (
<div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
<div className="w-full max-w-sm">
{isSignin ? <SigninForm /> : <SignUp />}
</div>
</div>

}
);
}
44 changes: 44 additions & 0 deletions apps/excelidraw-frontend/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { GithubIcon, TwitterIcon } from "lucide-react";
import Link from "next/link";
import React from "react";

export default function Footer() {
return (
<>
<footer className="py-6 fixed bottom-0 w-screen px-4 md:px-6 border-t border-gray-700 bg-white/10 z-10">
<div className=" flex flex-col sm:flex-row justify-between items-center">
<p className="text-sm text-white">
© 2025 100xDraws. All rights reserved.
</p>
<nav className="flex gap-4 sm:gap-6 sm:mt-0">
<Link
className="text-sm hover:underline underline-offset-4"
href="/terms"
>
Terms of Service
</Link>
<Link
className="text-sm hover:underline underline-offset-4"
href="/privacy"
>
Privacy
</Link>
<Link
className="text-sm hover:underline underline-offset-4"
href="https://github.com/100xdevs-cohort-3/week-22-excelidraw"
>
<GithubIcon className="size-4"/>
</Link>
<Link
className="text-sm hover:underline underline-offset-4"
href="https://x.com/kirat_tw"
>
<TwitterIcon className="size-4"/>
</Link>

</nav>
</div>
</footer>
</>
);
}
Loading