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

Jump to bottom

added the features section on the home page #32

Merged
merged 2 commits into from
Oct 5, 2024
Merged

added the features section on the home page #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
77fe4a9
added the features section on the home page
unknown91tech Oct 4, 2024
56d9e29
Update App.tsx
unknown91tech Oct 5, 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
144 changes: 87 additions & 57 deletions app/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
"use client";
import React, { useEffect, useState } from "react";
import {Navbar, NavbarBrand, NavbarMenuToggle, NavbarMenuItem, NavbarMenu, NavbarContent, NavbarItem, Link, Button, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, slider} from "@nextui-org/react";
import {Navbar, NavbarBrand, NavbarMenuToggle, NavbarMenuItem, NavbarMenu, NavbarContent, NavbarItem, Link, Button, Dropdown,Image, DropdownTrigger, DropdownMenu, DropdownItem, slider, Card, CardFooter} from "@nextui-org/react";
import { ChevronDown } from "@/public/assets/ChevronDown";
import { ImDeviantart, ImDownload, ImHammer, ImNewspaper } from "react-icons/im";
import Image from "next/image";
// import Image from "next/image";
import Footer from "@/components/ui/footer";
import { useTheme } from "next-themes";
import ThemeSwitcher from "@/components/ui/ThemeSwitcher";
Expand All @@ -17,7 +17,6 @@ export default function App() {
dev: <ImDeviantart />,
slide: <ImNewspaper />,
download: <ImDownload />

}

const menuItems = [
Expand Down Expand Up @@ -46,7 +45,7 @@ export default function App() {

return (
<><div>
<div className="fixed top-0 left-0 right-0 z-50 bg-background/70 backdrop-blur-lg">
<div className="fixed top-0 left-0 right-0 z-50 bg-background/70 backdrop-blur-lg scroll-smooth scrollbar-hide">
<Navbar
isBordered
isMenuOpen={isMenuOpen}
Expand Down Expand Up @@ -108,8 +107,6 @@ export default function App() {
</NavbarItem>
</NavbarContent>



<NavbarContent justify="end">
<NavbarItem className="hidden lg:flex">
<Link href="#">Login</Link>
Expand Down Expand Up @@ -142,7 +139,7 @@ export default function App() {
</div>

</div>
<div className={`min-h-screen ${darkMode ? "bg-black text-white " : "bg-white text-black"} `} >
<div className={`min-h-screen ${darkMode ? "bg-black text-white " : "bg-white text-black"} font-sans`} >
<div className="flex flex-col lg:flex-row items-center justify-between px-20 py-20 my-40 ">
<div className="max-w-xl mb-10 lg:mb-0">
<h1 className="text-7xl font-medium leading-tight mb-6">
Expand All @@ -166,62 +163,95 @@ export default function App() {
</div>
</div>

<div className={` ${darkMode ? "bg-black text-white " : "bg-white text-black"} py-20 `}>
<div className={` ${darkMode ? " text-white " : " text-black"} py-20 mx-10 `}>
<div className="flex justify-center text-2xl m-4 pb-14">
Contributions
Features
</div>
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">

<div className={` ${darkMode ? "bg-neutral-900 text-white " : "bg-white text-neutral-900"} shadow-2xl rounded-lg p-6 text-center `}>
<h3 className="text-xl font-semibold mb-4">Hi Chef</h3>
<div className="flex justify-center">
{/* <div className=" h-6 w-6 rounded-full bg-gradient-to-r from-green-400 to-yellow-400 p-8 my-6">
</div> */}
<Image
src="/profile-1.webp"
alt="Prototype 1"
width={300}
height={300}
className="mx-auto mb-4 w-24 h-24 object-cover rounded-full"
/>
</div>
<div className="max-w-8xl max-h-full mx-auto grid grid-cols-1 md:grid-cols-3 gap-10 ">
<div className={` ${darkMode ? " text-white " : " text-neutral-900"} bg-none shadow-2xl rounded-lg text-center`}>

<div>Your friends are cooking</div>
<Card
isFooterBlurred
radius="lg"
className="border-none"
>
<Image
alt="Woman listing to music"
className=" object-fill w-full h-full"
height={370}
src="five.webp"
width={500}
/>
<CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10 transition-all duration-300 ease-in-out hover:bg-black/50 hover:scale-105 ">

<p className="font-medium text-justify text-black " >Live Collaboration</p>
<Button className="text-tiny text-white bg-black/60" variant="flat" color="default" radius="lg" size="sm">
Notify me
</Button>
</CardFooter>
</Card>
</div>
<div className={` ${darkMode ? "bg-neutral-900 text-white " : "bg-white text-neutral-900"} shadow-2xl rounded-lg p-6 text-center`}>
<h3 className="text-xl font-semibold mb-4">Yasmin</h3>
{/* <div className="h-6 w-6 rounded-full bg-gradient-to-r from-green-400 to-yellow-400 p-8 m-3">
</div> */}
<div className="flex justify-center">
{/* <div className=" h-6 w-6 rounded-full bg-gradient-to-r from-green-400 to-yellow-400 p-8 my-6">
</div> */}
<Image
src="/profile-2.webp"
alt="Prototype 1"
width={300}
height={300}
className="mx-auto mb-4 w-24 h-24 object-cover rounded-full"
/>
</div>
<div>Tomato Habanero Salsa</div>
<div className={` bg-none shadow-2xl rounded-lg text-center`}>

<Card
isFooterBlurred
radius="lg"
className="border-none"
>
<Image
alt="Woman listing to music"
className="object-cover w-full h-full"
height={370}
src="four.webp"
width={500}
/>
<CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10 transition-all duration-300 ease-in-out hover:bg-black/50 hover:scale-105">

<p className=" font-light text-white text-justify">Real-Time Updates</p>
<Button className="text-tiny text-white bg-black/20" variant="flat" color="default" radius="lg" size="sm">
<a href="/workspace">
Notify me
</a>
</Button>
</CardFooter>
</Card>
</div>
<div className={` ${darkMode ? "bg-neutral-900 text-white " : "bg-white text-neutral-900"} shadow-2xl rounded-lg p-6 text-center`}>
<h3 className="text-xl font-semibold mb-4">Francis</h3>
{/* <div className="h-6 w-6 rounded-full bg-gradient-to-r from-green-400 to-yellow-400 p-8 m-3">
</div> */}
<div className="flex justify-center">
{/* <div className=" h-6 w-6 rounded-full bg-gradient-to-r from-green-400 to-yellow-400 p-8 my-6">
</div> */}
<Image
src="/profile-3.webp"
alt="Prototype 1"
width={300}
height={300}
className="mx-auto mb-4 w-24 h-24 object-cover rounded-full"
/>
</div>
<div>In progress...</div>

<div className={` ${darkMode ? " text-white " : " text-neutral-900"} bg-none shadow-2xl rounded-lg text-center`}>

<Card
isFooterBlurred
radius="lg"
className="border-none"
>
<Image
alt="Woman listing to music"
className=" object-cover w-full h-full"
height={370}
src="two.webp"
width={500}
/>
<CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10 transition-all duration-300 ease-in-out hover:bg-black/50 hover:scale-105">


<p className="text-white text-md font-sans">Text Addition</p>
{/* <p className="text-black text-tiny">Add text to designs and adjust font size, weight, and style.</p> */}

<Button color="default" className=" text-tiny font-sans text-white bg-black/60" variant="flat" radius="lg" size="sm">
Notify Me
</Button>
</CardFooter>
{/* <CardFooter className="absolute bg-white/30 bottom-0 border-t-1 border-zinc-100/50 z-10 justify-between">
<div>
<p className="text-black">Text Addition</p>
</div>
<Button radius="full" color="default" className=" shadow-lg text-tiny text-white bg-black/60">
Notify Me
</Button>
</CardFooter> */}
</Card>
</div>

</div>
</div>

Expand Down
Binary file added public/download.png
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.
Binary file added public/download1.png
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.
Binary file added public/download1.webp
View file
Open in desktop
Binary file not shown.
Binary file added public/download2.png
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.
Binary file added public/five.webp
View file
Open in desktop
Binary file not shown.
Binary file added public/four.webp
View file
Open in desktop
Binary file not shown.
Binary file added public/one.webp
View file
Open in desktop
Binary file not shown.
Binary file removed public/profile-1.webp
View file
Open in desktop
Binary file not shown.
Binary file removed public/profile-2.webp
View file
Open in desktop
Binary file not shown.
Binary file removed public/profile-3.webp
View file
Open in desktop
Binary file not shown.
Binary file added public/three.webp
View file
Open in desktop
Binary file not shown.
Binary file added public/two.webp
View file
Open in desktop
Binary file not shown.
1 change: 0 additions & 1 deletion public/vercel.svg
View file
Open in desktop

This file was deleted.