From 241e939360b3177ba6923acdf112f61b17fbc64f Mon Sep 17 00:00:00 2001 From: JahidHasanPintu Date: Mon, 29 Sep 2025 13:29:39 +0600 Subject: [PATCH] photo gallery added --- next.config.ts | 8 +- src/app/page.tsx | 2 + src/components/GallerySection.tsx | 191 ++++++++++++++++++++++++++++++ 3 files changed, 200 insertions(+), 1 deletion(-) create mode 100644 src/components/GallerySection.tsx diff --git a/next.config.ts b/next.config.ts index c500721..1a9b34b 100644 --- a/next.config.ts +++ b/next.config.ts @@ -6,7 +6,7 @@ const nextConfig: NextConfig = { remotePatterns: [ { protocol: "https", - hostname: "api.dicebear.com", + hostname: "supabase-db.planpostai.com", port: "", pathname: "/**", }, @@ -16,6 +16,12 @@ const nextConfig: NextConfig = { port: "", pathname: "/**", }, + { + protocol: "https", + hostname: "images.unsplash.com", + port: "", + pathname: "/**", + }, ], }, }; diff --git a/src/app/page.tsx b/src/app/page.tsx index a017dc0..f5f752b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,7 @@ import FAQSection from "@/components/FaqSection"; import FeatureCardSection from "@/components/FeatureCardSection"; import FeatureSection from "@/components/FeatureSection"; +import GallerySection from "@/components/GallerySection"; import HeroSection from "@/components/HeroSection"; import PricingSection from "@/components/PricingSection"; import SocialSection from "@/components/SocialSection"; @@ -239,6 +240,7 @@ const Home = () => { + diff --git a/src/components/GallerySection.tsx b/src/components/GallerySection.tsx new file mode 100644 index 0000000..706ee4c --- /dev/null +++ b/src/components/GallerySection.tsx @@ -0,0 +1,191 @@ +"use client"; + +import { X, Maximize2 } from "lucide-react"; +import * as React from "react"; +import { motion, AnimatePresence } from "framer-motion"; + +interface GalleryItem { + id: string; + image: string; + prompt: string; + category: string; +} + +const galleryItems: GalleryItem[] = [ + { + id: "1", + image: + "https://supabase-db.planpostai.com/storage/v1/object/public/image-gen/generated_1759050858509.png", + prompt: + "Create an advertisement for this container. Highlight its smooth taste and rich heritage, capturing its essence against a dramatic background of rocky textures. Emphasize quality craftsmanship and the iconic label design.", + category: "Commercial", + }, + { + id: "2", + image: + "https://supabase-db.planpostai.com/storage/v1/object/public/image-gen/generated_1759056864060.png", + prompt: + "I need luxurious design & premium look poster for this product Creating a luxurious and premium look for your poster can be achieved by focusing on design elements, color schemes, and typography. Here's a guide to help you:Color Palette- Deep Reds and Metallics: Use shades like burgundy or wine paired with gold or silver accents to convey luxury.- Neutral Background: A soft cream or light beige can enhance the elegant appeal.Typography- Elegant Fonts: Opt for serif fonts for the product name (“Glycool”) to give a classic look. Use a modern sans-serif for supporting text to maintain clarity.- Hierarchy: Make the product name prominent. Secondary information should be smaller but legible.Layout Ideas- Center the Product: Place the bottle at the center of the poster. Consider an angled view for added depth.- Text Placement: Position the product name directly below or above the bottle. Include a brief tagline or benefits in a smaller font.- Highlight Key Ingredients: Use icons or small graphics for “Glycolic Acid” and “Peppermint Oil” to draw attention.Visual Elements- Textures: Incorporate subtle textures in the background (like silk or marble) to add richness.- Shadows and Highlights: Use soft shadows around the bottle for a three-dimensional effect.Call-to-Action- Incorporate a Stylish CTA: Phrases like Experience The Luxury or Elevate Your Care Routine in an elegant script can encourage action", + category: "Product Ad", + }, + { + id: "3", + image: + "https://supabase-db.planpostai.com/storage/v1/object/public/image-gen/generated_1759049845391.png", + prompt: + "Capture the essence of a joyful cooking moment in a modern kitchen. In the foreground, a woman is skillfully chopping a vibrant red bell pepper on a wooden cutting board, wearing a pink print saree. To the side, there’s a colorful assortment of fresh vegetables in a bowl, and a sleek countertop with a stylish kitchen appliance this product prominently displayed. The backdrop features a warm, inviting atmosphere with soft lighting and a tastefully designed kitchen. Emphasize the harmony of cooking and the role of your product in enhancing the culinary experience.", + category: "Product Ad", + }, + { + id: "4", + image: + "https://supabase-db.planpostai.com/storage/v1/object/public/image-gen/generated_1759049616791.png", + prompt: + "Imagine a striking bottle of these containers, elegantly showcased against a backdrop of shimmering black and gold. The containers, with its smooth curves and a polished finish, captures the eye, reflecting the soft glow of surrounding lights. The label stands out prominently, boasting the special edition designation and an inviting name: Flavia Infused with the rich essence of these container, it hints at the unique flavor profile waiting within. Above the containers, tiny golden stars and confetti rain down, creating an atmosphere of celebration and festivity. Below, a layer of sparkling gold adds a touch of extravagance, inviting onlookers to envision the perfect occasion for this delightful spirit. This image captures not just a containers, but the essence of indulgence and joy, evoking a sensory experience of warmth, flavor, and the magic of special moments shared over a glass. The image will be landscape and high quality.", + category: "Product Commercial", + }, + { + id: "5", + image: + "https://supabase-db.planpostai.com/storage/v1/object/public/image-gen/generated_1758985411195.png", + prompt: + "Create an elegant mockup for a wedding invitation card featuring a white background adorned with vibrant, hand-painted floral elements such as zinnias and lavender. The invitation text should be prominently displayed in an artistic, romantic font, with two intertwined red hearts framing the names 'Alex' and 'Jasi'. For the background, use a soft pastel gradient blending hues of lavender, mint green, and soft peach to create a dreamy ambiance. Incorporate subtle decorative elements like delicate lace or a light bokeh effect for added elegance. Ensure the overall composition is eye-catching and invites viewers to envision this invitation for their own special day, enhancing its clickbait appeal.", + category: "Card", + }, + { + id: "6", + image: + "https://supabase-db.planpostai.com/storage/v1/object/public/image-gen/generated_1758978282321.png", + prompt: + "I want a background that used pink and light yellow. Also product showing on dressing table", + category: "Product Background", + }, + { + id: "7", + image: + "https://supabase-db.planpostai.com/storage/v1/object/public/image-gen/generated_1758912444519.png", + prompt: + "Remove the existing background from the image of the combo product consisting of a jar of orange paste, a coconut, and a bowl of white flour. Replace it with a vibrant and inviting kitchen backdrop that enhances the freshness and appeal of the ingredients. The new background should feature soft, warm colors with subtle kitchen elements like herbs, utensils, and a wooden countertop to create a cozy and homely atmosphere. ", + category: "Product Background", + }, + { + id: "8", + image: + "https://supabase-db.planpostai.com/storage/v1/object/public/image-gen/generated_1758570239324.png", + prompt: + "A Bangladeshi woman aged 25 to 30 wearing a traditional salwar kameez. The kameez (top) must look exactly like the first reference image: soft grey color with white floral printed patterns, long sleeves with lace on the edges, and detailed turquoise-blue and golden embroidery around the neckline. The pajama (bottom) design must follow the second reference image: loose fit with elastic on the waist and ankles, same printed floral pattern style as shown. But the pajama color must match the soft grey color of the kameez (first image) instead of red. The full outfit should look graceful, elegant, and culturally authentic. The model should have natural light makeup, small earrings, and simple hairstyle (either open or softly tied). Background should be softly lit—indoor or natural daylight outdoor—so that the outfit's design and colors are clearly visible for fashion promotion.", + category: "Clothing", + }, +]; + +export default function GallerySection() { + const [selectedImage, setSelectedImage] = React.useState( + null + ); + + return ( +
+
+
+

+ Clients Generation +

+

+ Explore stunning images created with our AI image generation tool. + Our user just created from their normal product image to + advertisement, see whats possible. +

+
+ +
+ {galleryItems.map((item, index) => ( + setSelectedImage(item)} + > + {item.prompt} + +
+
+ + {item.category} + +

+ {item.prompt} +

+
+
+ +
+
+ + ))} +
+ + + {selectedImage && ( + setSelectedImage(null)} + > + setSelectedImage(null)} + > + + + + e.stopPropagation()} + > +
+ {selectedImage.prompt} +
+ +
+
+ + {selectedImage.category} + +
+
+

+ Prompt Used: +

+

+ {selectedImage.prompt} +

+
+
+ + + )} + +
+
+ ); +}