jtpmcdevitt/web_next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial commit

Browse source
This commit is contained in:
Juthatip McDevitt 2024-05-06 16:59:45 -05:00
parent ecccf3439f
commit 7fbc420a1a
16 changed files with 5096 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
donutshop_ecommerce/.eslintrc.json Normal file
View file

@ -0,0 +1,3 @@
{
"extends": ["next/babel","next/core-web-vitals"]
}

36
donutshop_ecommerce/.gitignore vendored Normal file
View file

@ -0,0 +1,36 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

1
donutshop_ecommerce/README.md Normal file
View file

@ -0,0 +1 @@

7
donutshop_ecommerce/jsconfig.json Normal file
View file

@ -0,0 +1,7 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
}
}

6
donutshop_ecommerce/next.config.mjs Normal file
View file

@ -0,0 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
};
export default nextConfig;

4813
donutshop_ecommerce/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

24
donutshop_ecommerce/package.json Normal file
View file

@ -0,0 +1,24 @@
{
"name": "donutshop_ecommerce",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"framer-motion": "^11.1.8",
"next": "14.2.3",
"react": "^18",
"react-dom": "^18",
"react-icons": "^5.2.0"
},
"devDependencies": {
"eslint": "^8",
"eslint-config-next": "14.2.3",
"postcss": "^8",
"tailwindcss": "^3.4.1"
}
}

8
donutshop_ecommerce/postcss.config.mjs Normal file
View file

@ -0,0 +1,8 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
};
export default config;

BIN
donutshop_ecommerce/public/donut.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 719 KiB

BIN
donutshop_ecommerce/public/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 42 KiB

30
donutshop_ecommerce/src/app/globals.css Normal file
View file

@ -0,0 +1,30 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body{
background-color: #FDE2DE;
overflow-x: hidden;
}
/*== logo ==*/
.circle{
animation: animate 17.5s linear infinite;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.letter {
transform-origin: 0 50px;
}
@media (min-width: 765px){
.letter {
transform-origin: 0 70px;
}
}

17
donutshop_ecommerce/src/app/layout.js Normal file
View file

@ -0,0 +1,17 @@
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className} suppressHydrationWarning={true}>{children}</body>
</html>
);
}

14
donutshop_ecommerce/src/app/page.js Normal file
View file

@ -0,0 +1,14 @@
import Header from '@/components/layout/Header'
import Hero from '@/components/layout/Hero'
import React from 'react'
const page = () => {
return (
<>
<Header/>
<Hero/>
</>
)
}
export default page

77
donutshop_ecommerce/src/components/layout/Header.js Normal file
View file

@ -0,0 +1,77 @@
"use client"
import React, { useState } from "react";
import Image from 'next/image';
import Link from 'next/link';
import { IoCloseOutline } from "react-icons/io5";
import { HiBars2 } from "react-icons/hi2";
const Header = () => {
const text = "Donut worry about things";
const Letter = text.split("");
const [nav, setNav] = useState(false);
const links = [
{
id: 1,
link: "home",
},
{
id: 2,
link: "menu",
},
{
id: 3,
link: "about",
},
{
id: 4,
link: "contact",
},
{
id: 5,
link: "login",
},
];
return (
<div className='w-full h-full bg-[#FDE2DE]'>
<div className='flex flex-row justify-between md:flex-col gap-14 items-center py-5 md:py-10 px-5 md:px-8 lg:px-10'>
<div className='flex justify-center relative px-4'>
<div className='mt-5 md:mt3 flex flex-col items-center'>
<Image src='/logo.png' width={120} height={120} alt='' className='w-[100px]'/>
</div>
<div className='circle absolute mt-10'>
{Letter.map((item, index) => {
return (
<span key={index} className="letter inline-block absolute -top-[50px] md:-top-[70px] text-xs text-[#95743D]" style={{transform: `rotate(${index * 14.5}deg)`}}>{item}</span>
);
})}
</div>
</div>
<div className="flex justify-end md:justify-center items-center w-full text-white nav">
<ul className="hidden md:flex border border-[#E78895] rounded-full">
{links.map(({ id, link }) => (
<li key={id} className="px-6 py-3 cursor-pointer text-xs font-semibold uppercase text-[#95743D] relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">
<Link href={link}>{link}</Link>
</li>
))}
</ul>
<div onClick={() => setNav(!nav)} className="cursor-pointer pr-4 z-10 text-[#95743D] md:hidden"> {nav ? <IoCloseOutline size={30} /> : <HiBars2 size={30} />}</div>
{nav && (
<ul className="flex flex-col justify-center items-center absolute top-0 left-0 w-full h-screen bg-gradient-to-b from-[#f8cdc6] to-[#FDE2DE] text-[#95743D]">
{links.map(({ id, link }) => (
<li key={id} className="px-4 cursor-pointer capitalize py-6 text-4xl">
<Link onClick={() => setNav(!nav)} href={link}>{link}</Link>
</li>
))}
</ul>
)}
</div>
</div>
</div>
)
}
export default Header

42
donutshop_ecommerce/src/components/layout/Hero.js Normal file
View file

@ -0,0 +1,42 @@
"use client"
import React from 'react'
import {motion} from "framer-motion"
import Image from 'next/image';
const Hero = () => {
const textAnimation = {
animate: {x: [0, -1000], transition: {x: {repeat: Infinity, repeatType: "loop", duration: 5, ease: "linear",},},},
};
const textAnimation1 = {
animate: {x: [-1000, 0], transition: {x: {repeat: Infinity, repeatType: "loop", duration: 5, ease: "linear",},},},
};
return (
<div className='flex flex-col gap-10 md:gap-20'>
<div className='mt-10 -z-20'>
<motion.div className='absolute whitespace-nowrap' variants={textAnimation } animate="animate">
<p className='mt-[30px] text-7xl md:text-9xl text-white font-bold tracking-wider uppercase'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
</motion.div>
</div>
<div className='mt-10 -z-20'>
<motion.div className='absolute whitespace-nowrap' variants={textAnimation1} animate="animate">
<p className='mt-[30px] text-7xl md:text-9xl text-white font-bold tracking-wider uppercase'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
</motion.div>
</div>
<div className='mt-10 -z-20'>
<motion.div className='absolute whitespace-nowrap' variants={textAnimation } animate="animate">
<p className='mt-[30px] text-7xl md:text-9xl text-white font-bold tracking-wider uppercase'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
</motion.div>
</div>
<div className='w-full h-[80%] flex flex-col justify-center items-center absolute -z-10'>
<Image src='/donut.png' width={1000} height={1000} alt='home_donut' className='drop-shadow-2xl w-[750px] -mt-20 md:mt-0 '/>
<p>Puffy Donut</p>
<p>Why do our donuts so good?</p>
</div>
</div>
)
}
export default Hero

18
donutshop_ecommerce/tailwind.config.js Normal file
View file

@ -0,0 +1,18 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
},
plugins: [],
};