diff --git a/donut_ecommerce/package-lock.json b/donut_ecommerce/package-lock.json index 12d0712..148b920 100644 --- a/donut_ecommerce/package-lock.json +++ b/donut_ecommerce/package-lock.json @@ -18,6 +18,7 @@ "react": "^18", "react-dom": "^18", "react-icons": "^5.2.0", + "react-type-animation": "^3.2.0", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7" }, @@ -3964,7 +3965,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -4033,8 +4033,7 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-remove-scroll": { "version": "2.5.5", @@ -4103,6 +4102,16 @@ } } }, + "node_modules/react-type-animation": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-type-animation/-/react-type-animation-3.2.0.tgz", + "integrity": "sha512-WXTe0i3rRNKjmggPvT5ntye1QBt0ATGbijeW6V3cQe2W0jaMABXXlPPEdtofnS9tM7wSRHchEvI9SUw+0kUohw==", + "peerDependencies": { + "prop-types": "^15.5.4", + "react": ">= 15.0.0", + "react-dom": ">= 15.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/donut_ecommerce/package.json b/donut_ecommerce/package.json index ab0b850..bc0ec3d 100644 --- a/donut_ecommerce/package.json +++ b/donut_ecommerce/package.json @@ -19,6 +19,7 @@ "react": "^18", "react-dom": "^18", "react-icons": "^5.2.0", + "react-type-animation": "^3.2.0", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7" }, diff --git a/donut_ecommerce/public/home_donut.png b/donut_ecommerce/public/home_donut.png new file mode 100644 index 0000000..a23e4a8 Binary files /dev/null and b/donut_ecommerce/public/home_donut.png differ diff --git a/donut_ecommerce/src/_component/Hero.js b/donut_ecommerce/src/_component/Hero.js deleted file mode 100644 index f657c1e..0000000 --- a/donut_ecommerce/src/_component/Hero.js +++ /dev/null @@ -1,16 +0,0 @@ -import Image from 'next/image' -import React from 'react' - -const Hero = () => { - return ( - <> -
- - - -
- - ) -} - -export default Hero \ No newline at end of file diff --git a/donut_ecommerce/src/app/globals.css b/donut_ecommerce/src/app/globals.css index c7774c0..ca7c540 100644 --- a/donut_ecommerce/src/app/globals.css +++ b/donut_ecommerce/src/app/globals.css @@ -3,24 +3,7 @@ @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); -} +/*== logo ==*/ .circle{ animation: animate 17.5s linear infinite; } @@ -35,6 +18,21 @@ .letter { transform-origin: 0 50px; } +/*== donut move ==*/ +.donut-move{ + animation: float 6s ease-in-out infinite; +} +@keyframes float { + 0% { + transform: translatey(0px); + } + 50% { + transform: translatey(-10px); + } + 100% { + transform: translatey(0px); + } +} diff --git a/donut_ecommerce/src/app/page.js b/donut_ecommerce/src/app/page.js index f2eae39..c37ace7 100644 --- a/donut_ecommerce/src/app/page.js +++ b/donut_ecommerce/src/app/page.js @@ -1,4 +1,4 @@ -import Header from '@/_component/Header' +import Header from '@/component/layout/Header' import React from 'react' const page = () => { diff --git a/donut_ecommerce/src/_component/Header.js b/donut_ecommerce/src/component/layout/Header.js similarity index 97% rename from donut_ecommerce/src/_component/Header.js rename to donut_ecommerce/src/component/layout/Header.js index 238025e..fddf7ae 100644 --- a/donut_ecommerce/src/_component/Header.js +++ b/donut_ecommerce/src/component/layout/Header.js @@ -26,7 +26,7 @@ const Header = () => { })} -
+
Home Menu About diff --git a/donut_ecommerce/src/component/layout/Hero.js b/donut_ecommerce/src/component/layout/Hero.js new file mode 100644 index 0000000..94d8741 --- /dev/null +++ b/donut_ecommerce/src/component/layout/Hero.js @@ -0,0 +1,56 @@ +"use client" +import Image from 'next/image' +import React from 'react' +import { TypeAnimation } from 'react-type-animation'; +import { GiDonut } from "react-icons/gi"; +import { MdOutlineNewReleases, MdCheckCircleOutline } from "react-icons/md"; + +const Hero = () => { + return ( + <> +
+
+

Donuts over eveything!

+

Homemade donuts with an incredible variety of topping (without artificial additives, colors, and flavors)

+ +
+
+ home-donut + +
+
+
+
+

+

Freshly Baked Donuts

+
+

Our donuts are baked fresh every day using high quality ingredients without artificial ingredients

+
+
+
+

+

Variety of Flavors

+
+

At Puffy Dough, we offer a wide range of flavors including classic glazed as well as unique flavors like matcha pistachio

+
+
+
+

+

Customized Options

+
+

customers can pick their own toppings and fillings to create a personalized donut experience

+
+
+
+ + ) +} + +export default Hero \ No newline at end of file