initial commit

donut_ecommerce/.eslintrc.json

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

donut_ecommerce/.gitignore

@@ -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

donut_ecommerce/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

donut_ecommerce/jsconfig.json

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

donut_ecommerce/next.config.mjs

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

donut_ecommerce/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "donut_ecommerce",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@studio-freight/lenis": "^1.0.42",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.1.7",
+    "lucide-react": "^0.377.0",
+    "next": "14.2.3",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-icons": "^5.2.0",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1"
+  }
+}

donut_ecommerce/postcss.config.mjs

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

donut_ecommerce/src/_component/Header.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, } from "@/components/ui/sheet"
+import { HiOutlineBars2 } from "react-icons/hi2";
+import Image from 'next/image';
+import Link from 'next/link';
+import Hero from './Hero';
+
+
+const Header = () => {
+    const text = "Donut worry about things";
+    const Letter = text.split("");
+
+
+  return (
+    <div className='w-full h-screen 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'>
+                <div className='mt-5 md:mt3 flex flex-col items-center'>
+                <Image src='/logo.png' width={120} height={120} alt='' className='w-[70px] md: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='hidden md:flex uppercase text-sm text-[#95743D] font-semibold tracking-wide border border-[#E78895] rounded-full'>
+                <Link href='' className='relative hover:text-[#FDE2DE] py-2 px-4 hover:bg-[#E78895] rounded-full duration-300'>Home</Link>
+                <Link href='' className='relative hover:text-[#FDE2DE] py-2 px-4 hover:bg-[#E78895] rounded-full duration-300'>Menu</Link>
+                <Link href='' className='relative hover:text-[#FDE2DE] py-2 px-4 hover:bg-[#E78895] rounded-full duration-300'>About</Link>
+                <Link href='' className='relative hover:text-[#FDE2DE] py-2 px-4 hover:bg-[#E78895] rounded-full duration-300'>Contact</Link>
+                <Link href='' className='relative hover:text-[#FDE2DE] py-2 px-4 hover:bg-[#E78895] rounded-full duration-300'>Login</Link>
+            </div>
+            <div className='block md:hidden'>
+                <Sheet>
+                <SheetTrigger>
+                    <HiOutlineBars2 className='text-3xl text-[#95743D]'/>
+                </SheetTrigger>
+                <SheetContent side="top">
+                    <SheetHeader>
+                    <SheetTitle>Are you absolutely sure?</SheetTitle>
+                    <SheetDescription>
+                        This action cannot be undone. This will permanently delete your account
+                        and remove your data from our servers.
+                    </SheetDescription>
+                    </SheetHeader>
+                </SheetContent>
+                </Sheet>
+            </div>
+        </div>
+        <Hero/>
+    </div>
+  )
+}
+
+export default Header

donut_ecommerce/src/_component/Hero.js

@@ -0,0 +1,16 @@
+import Image from 'next/image'
+import React from 'react'
+
+const Hero = () => {
+  return (
+    <>
+    <div className='w-full h-[70%] flex flex-row gap-5 justify-center items-end px-5 overflow-hidden mt-20 md:mt-0'>
+      <Image src="/donut.png" width={500} height={200} alt='' className='hidden md:flex md:w-[300px] lg:w-[350px] xl:w-[450px] mb-5'/>
+      <Image src="/donut2.png" width={500} height={200} alt='' className='flex md:w-[280px] lg:w-[300px] xl:w-[400px] mb-2'/>
+      <Image src="/donut1.png" width={500} height={200} alt='' className='hidden md:flex md:w-[280px] lg:w-[300px] xl:w-[400px]'/>
+    </div>
+    </>
+  )
+}
+
+export default Hero

donut_ecommerce/src/app/globals.css

@@ -0,0 +1,47 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+  
+
+
+
+
+.link::before {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: #A87676;
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+}
+.link:hover::before {
+  transform: scaleX(1);
+}
+.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;
+  }
+}

donut_ecommerce/src/app/layout.js

@@ -0,0 +1,19 @@
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "Puffy Dough - Donuts, Coffee & Drinks",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className} suppressHydrationWarning={true}>{children}</body> 
+    </html>
+  );
+}
+
+//To suppress hydration warnings by setting suppressHydrationWarning to true --> caused by an extension passing extra attributes

donut_ecommerce/src/app/page.js

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

donut_ecommerce/src/components/ui/sheet.jsx

@@ -0,0 +1,109 @@
+"use client";
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref} />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 dark:bg-neutral-950",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+      {children}
+      <SheetPrimitive.Close 
+        className="absolute right-5 md:right-20 top-10 opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-neutral-100 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800">
+        <X className="h-10 w-10" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+    {...props} />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-neutral-950 dark:text-neutral-50", className)}
+    {...props} />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
+    {...props} />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

donut_ecommerce/src/lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}

donut_ecommerce/tailwind.config.js

@@ -0,0 +1,37 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{js,jsx}',
+    './components/**/*.{js,jsx}',
+    './app/**/*.{js,jsx}',
+    './src/**/*.{js,jsx}',
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}