diff --git a/src/assets/image/art.png b/src/assets/image/art.png new file mode 100644 index 0000000..ed548d0 Binary files /dev/null and b/src/assets/image/art.png differ diff --git a/src/assets/image/designingart.png b/src/assets/image/designingart.png new file mode 100644 index 0000000..1fd7584 Binary files /dev/null and b/src/assets/image/designingart.png differ diff --git a/src/assets/image/explorecommunity.png b/src/assets/image/explorecommunity.png new file mode 100644 index 0000000..81b650c Binary files /dev/null and b/src/assets/image/explorecommunity.png differ diff --git a/src/assets/image/ff3d.png b/src/assets/image/ff3d.png new file mode 100644 index 0000000..3bd72d0 Binary files /dev/null and b/src/assets/image/ff3d.png differ diff --git a/src/assets/image/minus.png b/src/assets/image/minus.png new file mode 100644 index 0000000..9836887 Binary files /dev/null and b/src/assets/image/minus.png differ diff --git a/src/assets/index.js b/src/assets/index.js index b5bd4c4..aae9ab8 100644 --- a/src/assets/index.js +++ b/src/assets/index.js @@ -41,7 +41,17 @@ import started from "../assets/image/started.png"; import setting from "../assets/image/setting.png"; import email from "../assets/image/email.png"; import tshirt from "../assets/image/tshirt.gif"; +import explorecommunity from "../assets/image/explorecommunity.png"; +import minus from "../assets/image/minus.png"; +import art from "../assets/image/art.png"; +import ff3d from "../assets/image/ff3d.png"; +import designingart from "../assets/image/designingart.png"; export { + designingart, + art, + ff3d, + minus, + explorecommunity, tshirt, email, tutorial, diff --git a/src/components/ExploreCommunity/index.jsx b/src/components/ExploreCommunity/index.jsx new file mode 100644 index 0000000..385409e --- /dev/null +++ b/src/components/ExploreCommunity/index.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const ExploreCommunity = () => { + return
index
; +}; + +export default ExploreCommunity; diff --git a/src/components/ExploreCustomized/index.jsx b/src/components/ExploreCustomized/index.jsx new file mode 100644 index 0000000..e2ef1fe --- /dev/null +++ b/src/components/ExploreCustomized/index.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const ExploreCustomized = () => { + return
index
; +}; + +export default ExploreCustomized; diff --git a/src/components/ExploreWork/index.jsx b/src/components/ExploreWork/index.jsx new file mode 100644 index 0000000..8815afa --- /dev/null +++ b/src/components/ExploreWork/index.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const ExploreWork = () => { + return
index
; +}; + +export default ExploreWork; diff --git a/src/index.css b/src/index.css index 7b52718..5a7b9b0 100644 --- a/src/index.css +++ b/src/index.css @@ -18,6 +18,18 @@ background-repeat: no-repeat; animation: bg-spin 3s linear infinite; } +.art { + --border-size: 3px; + --border-angle: 0turn; + background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), + conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03); + background-size: calc(100% - (var(--border-size) * 2)) + calc(100% - (var(--border-size) * 2)), + cover; + background-position: center center; + background-repeat: no-repeat; + animation: bg-spin 3s linear infinite; +} .helpbox { background-color: white; box-shadow: 0px 0px 10px rgba(179, 0, 255, 0.5); diff --git a/src/pages/Explore/Explore.jsx b/src/pages/Explore/Explore.jsx index 00a2790..64a9ede 100644 --- a/src/pages/Explore/Explore.jsx +++ b/src/pages/Explore/Explore.jsx @@ -1,123 +1,40 @@ import React from "react"; +import { tshirt } from "../../assets"; const Explore = () => { - const featuredDesigns = [ - { - id: 1, - imageSrc: "designs/design1.jpg", - title: "Design 1", - description: - "Check out this amazing design with vibrant colors and eye-catching graphics.", - }, - // Add more featured designs as needed... - ]; - - // Sample data for trending designs - const trendingDesigns = [ - { - id: 1, - imageSrc: "designs/trending1.jpg", - title: "Trending Design 1", - }, - // Add more trending designs as needed... - ]; - - // Sample data for user-submitted designs - const userDesigns = [ - { - id: 1, - imageSrc: "designs/userdesign1.jpg", - title: "Design 1", - submittedBy: "JohnDoe", - }, - // Add more user-submitted designs as needed... - ]; - return ( -
-
- {/* Section to showcase featured designs */} -
-

Featured Designs

- {/* Display a grid of featured t-shirt designs */} -
- {/* Map through the featured designs and display each design card */} - {featuredDesigns.map((design) => ( -
- {/* Display the t-shirt design image */} - {design.title} - {/* Show the name or title of the design */} -

{design.title}

- {/* Provide a brief description of the design */} -

{design.description}

- {/* Add a link to view more details about the design */} - - View Details - -
- ))} -
-
- - {/* Section to display trending designs */} -
-

Trending Designs

- {/* Display a carousel or slideshow of trending t-shirt designs */} -
- {/* Map through the trending designs and display each design slide */} - {trendingDesigns.map((design) => ( -
- {/* Display the t-shirt design image */} - {design.title} - {/* Show the name or title of the design */} -

{design.title}

-
- ))} +
+
+
+
+

+ + Explore Our + {" "} +
+

+ High Quality +

+ + Collections + + + +

Over 400+ members

-
- - {/* Section for user-submitted designs */} -
-

User-Submitted Designs

- {/* Display a grid of user-submitted t-shirt designs */} -
- {/* Map through the user-submitted designs and display each design card */} - {userDesigns.map((design) => ( -
- {/* Display the t-shirt design image */} - {design.title} - {/* Show the name or title of the design and the name of the user who submitted it */} -

{design.title}

-

- Submitted by: {design.submittedBy} -

- {/* Add a link to view more details about the design */} - - View Details - -
- ))} +
+
+ +
-
+
); };