Sweb graphic
Suraj SinghAI Website Prompt – Shekhar Creative Studio (SWEB Graphic) Create a premium, modern, dark-themed, fully responsive portfolio website for Shekhar, founder of SWEB Graphic. The design should look world-class with neon blue and purple gradients, glassmorphism effects, smooth animations, glowing buttons, premium typography, and a professional UI/UX. Showcase expertise in Graphic Design, Web Design, UI/UX Design, and 3D Design. Hero Section Headline: Creative Graphic, Website & 3D Designer Subheading: "I create premium graphic designs, modern websites, and stunning 3D visuals that help businesses grow their brand online." Primary Buttons: - Get a Free Quote - View Portfolio About Hi, I'm Shekhar, a professional Graphic Designer, Website Designer, and 3D Designer. I help businesses, startups, and creators build attractive brands through creative designs, responsive websites, and realistic 3D visuals. Services - Logo Design - Brand Identity - Website Design - Landing Page Design - UI/UX Design - Social Media Post Design - YouTube Thumbnail Design - Banner Design - Business Card Design - Flyer & Brochure Design - Poster Design - Packaging Design - E-commerce Website Design - Portfolio Website - Photo Editing - 3D Logo Design - 3D Product Mockups - 3D Product Visualization - 3D Website Elements - 3D Icons & Illustrations - 3D Social Media Graphics - 3D Branding & Advertising Designs Why Choose Me - Premium Quality Designs - Professional 3D Visuals - Fast Delivery - Mobile Responsive Websites - Affordable Pricing - Unlimited Revisions (where applicable) - 24/7 Customer Support - SEO-Friendly Website Design - 100% Client Satisfaction Portfolio Create a modern portfolio with categories: - Graphic Design - Website Design - Branding - UI/UX - 3D Designs Testimonials Include stylish client reviews with profile images and star ratings. Contact Name: Shekhar Call / WhatsApp: +91 8817728508 WhatsApp Button: Chat on WhatsApp Contact Form: - Name - Email - Phone Number - Project Details Footer SWEB Graphic Tagline: Designing Ideas. Building Brands. Creating Stunning 3D Experiences. Include social icons for WhatsApp, Instagram, Facebook, LinkedIn, and YouTube. Extra Features - Smooth scrolling - Loading animation - Sticky navigation - Dark/Light mode - Scroll-to-top button - Animated counters - FAQ section - Pricing section - Blog section - Floating WhatsApp button - SEO optimization - Fast loading - Fully responsive - Premium 3D animations, interactive 3D objects, glassmorphism, and futuristic visual effects. Overall style should feel like a premium international creative agency website with elegant UI, stunning 3D elements, glowing effects, and modern animations.Portfolio & Social Media Create a beautiful Portfolio section to showcase my best Graphic Design, Website Design, UI/UX, and 3D Design projects with modern cards, hover animations, filters, and a project gallery. Add an Instagram section that displays my latest posts and provides a direct link to my Instagram profile: Instagram: @sweb.graphic Include a Follow on Instagram button and an embedded Instagram feed to showcase my recent work and designs. Also add social proof with follower count (if available) and encourage visitors to follow my page for daily design inspiration and updates. Make the portfolio and Instagram sections fully responsive with smooth animations, glassmorphism effects, and a premium modern look.Create a modern, visually immersive hero section for a floral shop named "Bloomora" with the following specific requirements and code structure: Global & Base Setup 1. Fonts: Use Google Fonts "Inter" (weights 300, 400, 500) for UI elements and "Playfair Display" (weights 400, 500, 600) for headings. 2. Icons: Include the latest Lucide icons script via unpkg. 3. Base Styles: Reset margin, padding, and box-sizing (* { margin: 0; padding: 0; box-sizing: border-box; }). Set body to font-family: 'Inter', sans-serif;, color: #fff;, overflow-x: hidden;, height: 100vh;, and a fallback background color #79a6d0. 4. Layout Wrapper: Create a .content div containing everything, set to display: flex; flex-direction: column; height: 100vh; padding: 0 5%; position: relative; z-index: 1;. Background 1. Video Background: Create a full-screen, fixed video background behind all content (z-index: -2). Use this webm source: https://res.cloudinary.com/dprydfxok/video/upload/v1782698816/flowers_motion_r54og5.webm Use this mp4 source: https://res.cloudinary.com/dprydfxok/video/upload/v1782698816/flowers_motion_r54og5.mp4 Attributes: autoplay, loop, muted, playsinline. CSS: object-fit: cover; width: 100%; height: 100%;. 2. Overlay: Add a .overlay div directly over the video (z-index: -1) with a gradient: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.05) 50%, rgba(0,0,0,0)). Header / Navigation 1. Header Layout: display: flex; justify-content: space-between; align-items: center; padding: 2.5rem 0;. 2. Logo (Left): "BLOOMORA" with a flower SVG icon (Lucide-style petal shape). Font weight 500, size 1.15rem, letter-spacing 2px, gap 0.8rem. 3. Main Nav (Center): Links: Home (active), About, Services, Shop, Journal, Contact. Absolutely positioned in center: left: 50%; transform: translateX(-50%);. Gap 2.5rem. Font: 0.9rem, weight 300, color #fff. Active state: A pink (#f87b97) 4x4px dot centered 10px below the active item ("Home"). 4. Header Right: Flex container with gap 1.5rem. Search Icon (Lucide). Cart Icon (Lucide shopping-bag) with a notification badge (pink #f87b97, text "2", absolute positioned top right). Outline Button: "Get in Touch" with a right-arrow icon. CSS: border: 1px solid rgba(255,255,255,0.4); border-radius: 50px; padding: 0.7rem 1.5rem; gap: 0.5rem;. Mobile Menu Toggle (hidden on desktop). Hero Section (Main Content) 1. Hero Container: .hero - flex: 1; display: flex; justify-content: center; align-items: center; position: relative;. 2. Centered Text Content: .hero-text - max-width: 650px; margin-top: -6rem; display: flex; flex-direction: column; align-items: center; text-align: center;. 3. Typography: Subtitle: "NATURE'S BEAUTY, YOUR SANCTUARY". CSS: font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 1.5rem; opacity: 0.85;. Heading: "Find Beauty<br>in Every Bloom". CSS: font-family: 'Playfair Display', serif; font-size: 5.5rem; line-height: 1.1; font-weight: 400; margin-bottom: 1.5rem;. Paragraph: "Discover thoughtfully curated floral collections<br>that bring peace, joy, and color to your world.". CSS: font-size: 1.15rem; line-height: 1.6; font-weight: 300; margin-bottom: 2.5rem; opacity: 0.9; max-width: 480px;. 4. Primary Button: "Explore Collections" with a right-arrow icon. CSS: background-color: #f87b97; color: #fff; border-radius: 50px; padding: 1rem 2rem; gap: 0.75rem; display: inline-flex; align-items: center;. Hover state should lift up slightly with a pink shadow. Circular Animated Badge 1. Positioning: .hero-badge - position: absolute; right: 2%; top: 15%; width: 140px; height: 140px;. 2. Styling: border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); display: flex; justify-content: center; align-items: center; padding: 12px;. 3. Animation: Inside a relative .badge-circle container, an SVG .rotating-text that spins (animation: rotate 20s linear infinite;). 4. SVG Content: Use textPath on invisible paths to create circular text. Text 1 (Top Curve): "HANDPICKED" Text 2 (Bottom Curve): "WITH LOVE" Text CSS: font-size: 10.5px; fill: #fff; letter-spacing: 3.5px; font-weight: 300; font-family: 'Inter';. Two small pink (#f87b97) circles separating the texts. 5. Center Icon: A static SVG petal/flower icon positioned absolutely in the very center of the badge. Scroll Indicator 1. Positioning: .scroll-indicator - position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.75rem;. 2. Icon Circle: .scroll-icon - 40x40px circle, 1px solid border (white, 40% opacity), containing a downward arrow icon (Lucide). 3. Text: "SCROLL TO DISCOVER". CSS: font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase; opacity: 0.8;. Responsiveness Setup Ensure you include basic media queries for hiding the central nav on tablet (converting to a hidden full-screen overlay menu with the mobile toggle), scaling down the 5.5rem heading to 4.5rem (<=1200px), 4rem (<=992px), 3rem (<=768px), and 2.5rem (<=480px), and hiding the circular badge on tablet and smaller screens (<=992px). Mujhe is per meri website ki saari cheeje dijiye
Comments (0)
Sign in to leave a comment
System Requirements
Sweb Graphic System Requirements Document
Introduction
This document outlines the system requirements for the "Sweb Graphic" project, a premium, modern, dark-themed, fully responsive portfolio website for Shekhar Creative Studio. The website will incorporate neon blue and purple gradients, glassmorphism effects, smooth animations, glowing buttons, premium typography, and a professional UI/UX. It will showcase expertise in Graphic Design, Web Design, UI/UX Design, and 3D Design.
System Overview
The Sweb Graphic project aims to create a world-class portfolio website for Shekhar, founder of SWEB Graphic. The website will highlight Shekhar's skills in graphic design, web design, UI/UX design, and 3D design, providing a platform to attract potential clients and showcase his work.
Functional Requirements as Story Points
- As a visitor, I should be able to view a modern, visually immersive hero section with a headline and subheading.
- As a visitor, I should be able to access primary buttons for getting a free quote and viewing the portfolio.
- As a visitor, I should be able to read about Shekhar and his expertise in graphic, web, and 3D design.
- As a visitor, I should be able to explore a comprehensive list of services offered by Shekhar.
- As a visitor, I should be able to view a portfolio section with categories for Graphic Design, Website Design, Branding, UI/UX, and 3D Designs.
- As a visitor, I should be able to read stylish client testimonials with profile images and star ratings.
- As a visitor, I should be able to contact Shekhar via a contact form or WhatsApp button.
- As a visitor, I should be able to access social media links and follow Shekhar on Instagram.
- As a visitor, I should be able to experience smooth scrolling, loading animations, and sticky navigation.
- As a visitor, I should be able to switch between dark and light modes.
- As a visitor, I should be able to use a scroll-to-top button and view animated counters.
- As a visitor, I should be able to access an FAQ section, pricing section, and blog section.
- As a visitor, I should be able to experience fast loading and SEO optimization.
User Personas
- Visitor: Individuals interested in graphic design, web design, UI/UX design, and 3D design services.
- Potential Client: Businesses, startups, and creators looking for professional design services.
- Returning Client: Previous clients seeking additional services or updates.
Core User Flows
- Visitor lands on the homepage -> views hero section -> explores services -> views portfolio -> reads testimonials -> contacts Shekhar.
- Potential Client visits the website -> navigates to the services section -> requests a free quote -> submits contact form.
- Returning Client accesses the website -> views new portfolio projects -> contacts Shekhar for additional services.
Visuals Colors and Theme
- primary: #0d0d3b (dark blue)
- primary_light: #1a1a66 (lighter blue)
- secondary: #8a2be2 (electric purple)
- accent: #ff4500 (vibrant orange)
- highlight: #ffd700 (gold)
- bg: #121212 (dark background)
- surface: rgba(18, 18, 18, 0.8)
- text: #ffffff (white)
- text_muted: #b0b0b0 (light gray)
- border: rgba(255, 255, 255, 0.2)
Signature Design Concept
The homepage will feature an interactive "Neon Galaxy" concept. Visitors will be greeted with a dynamic 3D scene where glowing particles form constellations representing different design services. As users hover over each constellation, it expands and reveals more information about the service. The scene will use @react-three/fiber and @react-three/drei for 3D rendering, with smooth transitions and glowing effects enhanced by gsap.
Landing Hero Motion Brief
The hero section will feature a continuously moving 2D composition built with motion/react. The animation will depict a digital canvas where design elements (logos, websites, 3D models) are created and transformed, showcasing the journey from concept to completion. The animation will loop every 10 seconds, with interactive elements that respond to user inputs, such as hovering to reveal additional details.
Interaction Model & Motion Direction
- Intended Interaction Model: Parallax
- Landing Page: The homepage will feature layered depth via scroll, with decorative layers translating at different speeds. Real content will scroll naturally, providing a visually rich first impression.
- Internal Pages: Static layout for clarity, with minimal motion for dashboards, settings, and forms.
Non-Functional Requirements
- The website must be fully responsive across all devices.
- The website should load quickly and be optimized for SEO.
- The website should support dark and light modes.
- The website should provide a seamless user experience with smooth animations.
Tech Stack
- Frontend: React for Web
- Backend: FastAPI
- Database: MySQL
- AI Models: Not applicable
- AI Tools: Not applicable
- Local Orchestration: Docker
- Server-Side Orchestration: Kubernetes
Assumptions and Constraints
- The website will primarily target an international audience, requiring multilingual support.
- The website will integrate with social media platforms for sharing and engagement.
- The website will be hosted on a scalable cloud platform to handle varying traffic loads.
Glossary
- Glassmorphism: A design style that uses transparency and blur effects to create a frosted-glass appearance.
- 3D Design: The process of creating three-dimensional models and visuals.
- UI/UX Design: User Interface and User Experience design, focusing on the look and feel of a website or application.
- SEO: Search Engine Optimization, the practice of optimizing a website to rank higher in search engine results.
Where Imagination Meets Pixel-Perfect Design
Shekhar Creative Studio specializes in Graphic Design, Web Design, UI/UX, and 3D Design — transforming ideas into stunning visual experiences.
Hi, I'm Shekhar
Founder & Creative Director at SWEB Graphic
With over 8 years of experience in the design industry, I specialize in creating stunning visual identities, responsive websites, intuitive user interfaces, and captivating 3D designs. My passion lies in transforming complex ideas into elegant, user-friendly solutions.
From startups to established brands, I've helped clients across the globe achieve their creative vision with pixel-perfect designs that drive results.
Services I Offer
Comprehensive design solutions tailored to elevate your brand and digital presence.
Graphic Design
Logos, brochures, social media graphics, and print materials that capture your brand essence.
Web Design
Responsive, modern websites built with cutting-edge technologies for optimal performance.
UI/UX Design
User-centered interfaces and seamless experiences that delight and convert visitors.
3D Design
Stunning 3D models, renders, and visualizations that bring ideas to life in three dimensions.
Branding
Complete brand identity systems including logos, guidelines, and strategic brand positioning.
Motion Graphics
Engaging animations and video content that tell your story dynamically and memorably.
Featured Projects
A selection of recent work across multiple design disciplines.
Neon Brand Identity
E-Commerce Redesign
Fitness App UI
Product Visualization
Restaurant Menu Design
SaaS Dashboard
What Clients Say
Real feedback from real clients who trusted me with their creative vision.
"Shekhar transformed our brand identity completely. His attention to detail and creative vision exceeded our expectations. The designs perfectly captured our company ethos."
"Working with SWEB Graphic was an absolute pleasure. The website design was stunning, responsive, and delivered on time. Highly recommend for any design project!"
"The 3D visualizations Shekhar created for our product launch were phenomenal. They helped us communicate our vision to stakeholders more effectively than ever."
Ready to Bring Your Vision to Life?
Let's collaborate and create something extraordinary. Get a free quote for your project today.
Where Imagination Meets Pixel-Perfect Design
Shekhar Creative Studio specializes in Graphic Design, Web Design, UI/UX, and 3D Design — transforming ideas into stunning visual experiences.
Hi, I'm Shekhar
Founder & Creative Director at SWEB Graphic
With over 8 years of experience in the design industry, I specialize in creating stunning visual identities, responsive websites, intuitive user interfaces, and captivating 3D designs. My passion lies in transforming complex ideas into elegant, user-friendly solutions.
From startups to established brands, I've helped clients across the globe achieve their creative vision with pixel-perfect designs that drive results.
Services I Offer
Comprehensive design solutions tailored to elevate your brand and digital presence.
Graphic Design
Logos, brochures, social media graphics, and print materials that capture your brand essence.
Web Design
Responsive, modern websites built with cutting-edge technologies for optimal performance.
UI/UX Design
User-centered interfaces and seamless experiences that delight and convert visitors.
3D Design
Stunning 3D models, renders, and visualizations that bring ideas to life in three dimensions.
Branding
Complete brand identity systems including logos, guidelines, and strategic brand positioning.
Motion Graphics
Engaging animations and video content that tell your story dynamically and memorably.
Featured Projects
A selection of recent work across multiple design disciplines.
Neon Brand Identity
E-Commerce Redesign
Fitness App UI
Product Visualization
Restaurant Menu Design
SaaS Dashboard
What Clients Say
Real feedback from real clients who trusted me with their creative vision.
"Shekhar transformed our brand identity completely. His attention to detail and creative vision exceeded our expectations. The designs perfectly captured our company ethos."
"Working with SWEB Graphic was an absolute pleasure. The website design was stunning, responsive, and delivered on time. Highly recommend for any design project!"
"The 3D visualizations Shekhar created for our product launch were phenomenal. They helped us communicate our vision to stakeholders more effectively than ever."
Ready to Bring Your Vision to Life?
Let's collaborate and create something extraordinary. Get a free quote for your project today.
No comments yet. Be the first!