ImAlpha/kevos-attire
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

carousel completel, starting categories

Browse Source
This commit is contained in:
Jacob Delgado 2024-10-29 22:47:55 -07:00
parent 353f716f53
commit 7c0418321b
11 changed files with 120 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/bun.lockb
View File

Binary file not shown.

1
frontend/package.json
View File

@ -26,6 +26,7 @@
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-icons": "^5.3.0", "react-icons": "^5.3.0",
"resend": "^3.5.0", "resend": "^3.5.0",
"sass": "^1.80.5",
"sharp": "^0.33.5", "sharp": "^0.33.5",
"tailwind-merge": "^2.5.2", "tailwind-merge": "^2.5.2",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",

BIN
frontend/public/payment.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 44 KiB

2
frontend/src/app/layout.tsx
View File

@ -19,7 +19,7 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<body className={`${inter.className} bg-slate-700`}> <body className={`${inter.className} bg-slate-700 w-full max-h-screen text-white`}>
<Navbar /> <Navbar />
{children} {children}
<Footer /> <Footer />

21
frontend/src/app/page.tsx
View File

@ -10,11 +10,11 @@ import styles from "@/styles/Home.module.css";
import { Poppins } from "next/font/google"; import { Poppins } from "next/font/google";
import { sendEmail } from "./actions/sendEmail"; import { sendEmail } from "./actions/sendEmail";
import { sendEmails } from "@/lib/mail.utils"; import { sendEmails } from "@/lib/mail.utils";
import ProductCarousel from '@/components/ProductCarousel/ProductCarousel'; import ProductCarousel from "@/components/ProductCarousel/ProductCarousel";
import Categories from "@/components/Categories/Categories";
const Popp = Poppins({ weight: "400", subsets: ["latin"] }); const Popp = Poppins({ weight: "400", subsets: ["latin"] });
// improve to drag & drop side cart for more fun // improve to drag & drop side cart for more fun
export default function Home() { export default function Home() {
@ -26,9 +26,7 @@ export default function Home() {
orders: "", orders: "",
}); });
function newItem(){ function newItem() {}
}
async function newOrder(event: React.FormEvent<HTMLFormElement>) { async function newOrder(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault(); event.preventDefault();
@ -76,13 +74,16 @@ export default function Home() {
} }
return ( return (
<main className="flex min-h-screen flex-col px-20 gap-y-6"> <main className="flex max-h-screen flex-col px-20 gap-y-6">
<div className="sm:max-w-max md:w-full"> <div className="sm:max-w-max md:w-full">
<ProductCarousel /> <ProductCarousel />
</div> </div>
<Categories />
{/* Body */} {/* Body */}
<div className="w-full h-content"> {/* <div className="w-full h-content">
<MenuCard Menu={Product} /> <MenuCard Menu={Product} />
</div> </div>
@ -139,11 +140,11 @@ export default function Home() {
> >
Submit Submit
</button> </button>
</form> </form> */}
{/* Add that we will send a paypal invoice to confirm the order and items */} {/* Add that we will send a paypal invoice to confirm the order and items */}
{/* Footer */} {/* Footer */}
<div className="flex w-full h-[250px] items-center text-gray-400"> {/* <div className="flex w-full h-[250px] items-center text-gray-400">
<div className="font-bold "> <div className="font-bold ">
Email us at&nbsp; Email us at&nbsp;
<a href="mailto:kevosattire@gmail.com" className="text-emerald-500"> <a href="mailto:kevosattire@gmail.com" className="text-emerald-500">
@ -152,7 +153,7 @@ export default function Home() {
&nbsp;for any questions! &nbsp;for any questions!
</div> </div>
<div></div> <div></div>
</div> </div> */}
</main> </main>
); );
} }

13
frontend/src/app/products/page.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from 'react'
import MenuCard from '@/components/ui/MenuCard/MenuCard'
import Product from "@/../public/batch1/files_list.json";
const Products = () => {
return (
<div>
<MenuCard Menu={Product}/>
</div>
)
}
export default Products

15
frontend/src/components/Categories/Categories.scss Normal file
View File

@ -0,0 +1,15 @@
.col{
flex:1;
display: flex;
flex-direction: column;
gap: 10px;
}
.col-l{
flex:2;
}
.row{
flex:1;
display:flex;
gap: 10px;
}

29
frontend/src/components/Categories/Categories.tsx Normal file
View File

@ -0,0 +1,29 @@
import React from "react";
import "./Categories.scss"
const Categories = () => {
return (
<div className="flex h-[80svh] gap-[10px] mx-[10px] w-full">
<div className="col">
<div className="row">r1</div>
<div className="row">r2</div>
</div>
<div className="col">
<div className="row">r3</div>
</div>
<div className="col-l">
<div className="row">
<div className="col">
<div className="row">r4</div>
</div>
<div className="col">
<div className="row">r5</div>
</div>
</div>
<div className="row">r6</div>
</div>
</div>
);
};
export default Categories;

18
frontend/src/components/Footer/Footer.tsx
View File

@ -6,12 +6,12 @@ import Image from "next/image";
const Footer = () => { const Footer = () => {
return ( return (
<div className="footer text-white mb-[20px] mt-[100px] mx-[200px]"> <div className="footer text-white pb-[20px] pt-[80px] px-[200px] bg-slate-800 w-full">
<div className="top flex gap-[50px]"> <div className="top flex w-full">
<div className="item flex-1 flex flex-col gap-[10px] text-justify text-sm text-gray-400"> <div className="item flex-1 flex flex-col gap-[10px] text-justify text-sm text-gray-400">
<h1 className="text-xl font-bold text-gray-200">Categories</h1> <h1 className="text-xl font-bold text-gray-200">Categories</h1>
<span>Women</span>
<span>Men</span> <span>Men</span>
<span>Women</span>
<span>Shoes</span> <span>Shoes</span>
<span>Accessories</span> <span>Accessories</span>
<span>New Arrivals</span> <span>New Arrivals</span>
@ -24,18 +24,18 @@ const Footer = () => {
<span>Compare</span> <span>Compare</span>
<span>Cookies</span> <span>Cookies</span>
</div> </div>
<div className="item"></div>
<div className="item"></div>
</div> </div>
<div className="Socials flex gap-4 text-xl"> <div className="Socials flex gap-4 text-xl mt-[30px] text-gray-300">
<FaFacebookF /> <FaFacebookF />
<FaInstagram /> <FaInstagram />
<FaTiktok /> <FaTiktok />
</div> </div>
<div className="bottom text-xs flex gap-4 items-center justify-between mt-[50px]">
{/* copyright */}
<div className="bottom text-xs flex gap-4 items-center justify-between mt-[30px]">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<span className="flex max-w-[320px]"> <span className="flex max-w-[320px]">
All items are sold under the beleif that they are original works and All items are sold under the belief that they are original works and
not copyrighted under another company. not copyrighted under another company.
</span> </span>
<span>© 2024 - Kevos Attire LLC. All rights reserved. </span> <span>© 2024 - Kevos Attire LLC. All rights reserved. </span>
@ -45,7 +45,7 @@ const Footer = () => {
src="/payment.png" src="/payment.png"
fill fill
style={{ objectFit: "cover", objectPosition: "center" }} style={{ objectFit: "cover", objectPosition: "center" }}
className="hidden md:block" className="hidden md:block bg-slate-300"
alt="payment systems" alt="payment systems"
/> />
</div> </div>

53
frontend/src/components/ProductCarousel/ProductCarousel.tsx
View File

@ -1,20 +1,18 @@
import * as React from "react" import * as React from "react";
import Autoplay from "embla-carousel-autoplay" import Autoplay from "embla-carousel-autoplay";
import { import {
Carousel, Carousel,
CarouselContent, CarouselContent,
CarouselItem, CarouselItem,
CarouselNext, CarouselNext,
CarouselPrevious, CarouselPrevious,
} from "@/components/ui/carousel" } from "@/components/ui/carousel";
import Image from 'next/image'; import Image from "next/image";
const ProductCarousel = () => { const ProductCarousel = () => {
const plugin = React.useRef( const plugin = React.useRef(
Autoplay({ delay: 3000, stopOnInteraction: true }) Autoplay({ delay: 3000, stopOnInteraction: true })
) );
return ( return (
<Carousel <Carousel
plugins={[plugin.current]} plugins={[plugin.current]}
@ -22,77 +20,92 @@ const ProductCarousel = () => {
onMouseEnter={plugin.current.stop} onMouseEnter={plugin.current.stop}
onMouseLeave={plugin.current.reset} onMouseLeave={plugin.current.reset}
> >
<CarouselContent className='-ml-4'> <CarouselContent className="-ml-4">
<CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4"> <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 hover:scale-125 relative">
<Image <Image
src="/batch1/Mockup 126.png" src="/batch1/Mockup 126.png"
width={300} width={300}
height={300} height={300}
alt="shirt 3" alt="shirt 3"
quality={100}
/> />
<div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
</CarouselItem> </CarouselItem>
<CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4"> <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
<Image <Image
src="/batch1/Mockup 18.png" src="/batch1/Mockup 18.png"
width={300} width={300}
height={300} height={300}
alt="shirt 6" alt="shirt 6"
quality={100}
/> />
<div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
</CarouselItem> </CarouselItem>
<CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4"> <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
<Image <Image
src="/batch1/Mockup 73.png" src="/batch1/Mockup 73.png"
width={300} width={300}
height={300} height={300}
alt="shirt 10" alt="shirt 10"
quality={100}
/> />
<div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
</CarouselItem> </CarouselItem>
<CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4"> <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
<Image <Image
src="/batch1/Mockup 112.png" src="/batch1/Mockup 112.png"
width={300} width={300}
height={300} height={300}
alt="shirt 3" alt="shirt 3"
quality={100}
/> />
<div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
</CarouselItem> </CarouselItem>
<CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4"> <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
<Image <Image
src="/batch1/Mockup 4.png" src="/batch1/Mockup 4.png"
width={300} width={300}
height={300} height={300}
alt="shirt 6" alt="shirt 6"
quality={100}
/> />
<div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
</CarouselItem> </CarouselItem>
<CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4"> <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
<Image <Image
src="/batch1/Mockup 97.png" src="/batch1/Mockup 97.png"
width={300} width={300}
height={300} height={300}
alt="shirt 10" alt="shirt 10"
quality={100}
/> />
<div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
</CarouselItem> </CarouselItem>
<CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4"> <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
<Image <Image
src="/batch1/Mockup 132.png" src="/batch1/Mockup 132.png"
width={300} width={300}
height={300} height={300}
alt="shirt 10" alt="shirt 10"
quality={100}
/> />
<div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
</CarouselItem> </CarouselItem>
<CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4"> <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
<Image <Image
src="/batch1/Mockup 133.png" src="/batch1/Mockup 133.png"
width={300} width={300}
height={300} height={300}
alt="shirt 10" alt="shirt 10"
quality={100}
/> />
<div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
</CarouselItem> </CarouselItem>
</CarouselContent> </CarouselContent>
<CarouselPrevious /> <CarouselPrevious />
<CarouselNext /> <CarouselNext />
</Carousel> </Carousel>
);
};
) export default ProductCarousel;
}
export default ProductCarousel

3
frontend/src/components/ui/carousel.tsx
View File

@ -157,7 +157,8 @@ const CarouselContent = React.forwardRef<
const { carouselRef, orientation } = useCarousel() const { carouselRef, orientation } = useCarousel()
return ( return (
<div ref={carouselRef} className="overflow-hidden"> // <div ref={carouselRef} className="overflow-hidden">
<div ref={carouselRef} className=" overflow-x-clip">
<div <div
ref={ref} ref={ref}
className={cn( className={cn(