From 1fbed390cd7b7cd680ad90b60fe6ab3952a12a37 Mon Sep 17 00:00:00 2001 From: bender Date: Tue, 10 Mar 2026 16:42:15 +0000 Subject: [PATCH] Update src/app/page.tsx --- src/app/page.tsx | 233 +++++++++++++++++++++-------------------------- 1 file changed, 105 insertions(+), 128 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 6cbf6a5..1ebad1b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,5 @@ "use client"; -import React from "react"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial'; @@ -11,111 +10,7 @@ import ContactCenter from '@/components/sections/contact/ContactCenter'; import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal'; import { Award, Heart, Sparkles, Zap } from 'lucide-react'; -// Memoized section components for performance optimization -const MemoHero = React.memo(HeroSplitTestimonial); -const MemoAbout = React.memo(AboutMetric); -const MemoFeatureWork = React.memo(FeatureCardThree); -const MemoFeatureSkills = React.memo(FeatureCardThree); -const MemoProducts = React.memo(ProductCardOne); -const MemoContact = React.memo(ContactCenter); -const MemoFooter = React.memo(FooterBaseReveal); -const MemoNavbar = React.memo(NavbarStyleCentered); - -// Performance monitoring utility -const reportWebVitals = (metric) => { - if (typeof window !== 'undefined' && (window as any).gtag) { - (window as any).gtag('event', metric.name, { - event_category: 'web_vitals', - value: Math.round(metric.value), - event_label: metric.id, - }); - } -}; - export default function LandingPage() { - // Pre-memoized static data to prevent unnecessary re-renders - const navItems = React.useMemo(() => [ - { name: "About", id: "about" }, - { name: "Work", id: "work" }, - { name: "Skills", id: "skills" }, - { name: "Contact", id: "contact" }, - { name: "Resume", id: "resume" } - ], []); - - const heroButtons = React.useMemo(() => [ - { text: "View My Work", href: "work" }, - { text: "Get In Touch", href: "contact" } - ], []); - - const heroTestimonials = React.useMemo(() => [{ - name: "Design Excellence", handle: "Creative Direction", testimonial: "Creating compelling visual narratives through thoughtful design", rating: 5, - imageSrc: "http://img.b2bpic.net/free-photo/portrait-pensive-african-american-man-dressed-classic-brown-jacket-standing-studio-dark-background_613910-17787.jpg" - }], []); - - const metrics = React.useMemo(() => [ - { icon: Sparkles, label: "Projects Completed", value: "2+" }, - { icon: Zap, label: "Years of Experience", value: "3+" }, - { icon: Award, label: "Design Disciplines", value: "8+" }, - { icon: Heart, label: "Client Satisfaction", value: "100%" } - ], []); - - const workFeatures = React.useMemo(() => [ - { - id: "01", title: "Basic Website", description: "A clean, responsive website built with HTML, CSS, and JavaScript. Demonstrates foundational web design principles and user-centered layout approach.", imageSrc: "http://img.b2bpic.net/free-vector/hotel-landing-page-template-with-photo_23-2148893460.jpg", imageAlt: "responsive website design desktop mobile" - }, - { - id: "02", title: "Mobile App Prototype", description: "A comprehensive mobile interface prototype designed in Figma. Showcases UI/UX research, wireframing, and interactive prototyping skills.", imageSrc: "http://img.b2bpic.net/free-vector/workout-tracker-app-template_52683-44294.jpg", imageAlt: "mobile app ui prototype design" - } - ], []); - - const skillsFeatures = React.useMemo(() => [ - { - id: "01", title: "UI Design", description: "Crafting intuitive interfaces with attention to visual hierarchy, accessibility, and user experience principles.", imageSrc: "http://img.b2bpic.net/free-photo/circuit-board-close-up-with-different-connections_23-2149174342.jpg", imageAlt: "ui design interface dashboard application" - }, - { - id: "02", title: "UX Research", description: "Conducting user research, creating personas, and developing evidence-based design strategies.", imageSrc: "http://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas_176420-1670.jpg", imageAlt: "ux research user testing workshop" - }, - { - id: "03", title: "Brand Identity", description: "Developing comprehensive brand systems including logos, typography, and visual guidelines.", imageSrc: "http://img.b2bpic.net/free-vector/gradient-brand-manual-presentation_23-2149853441.jpg", imageAlt: "brand identity logo design guideline" - }, - { - id: "04", title: "Motion Design", description: "Creating smooth animations and interactions that enhance user engagement and product delight.", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-technology-infographic-template_23-2149195721.jpg", imageAlt: "motion graphics animation design studio" - } - ], []); - - const products = React.useMemo(() => [ - { id: "1", name: "Figma", price: "Design & Prototype", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-people-discussing-work_52683-101630.jpg", imageAlt: "figma design tool interface screenshot" }, - { id: "2", name: "Adobe XD", price: "UI Mockups", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg", imageAlt: "adobe xd ui design application" }, - { id: "3", name: "Photoshop", price: "Image Editing", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440903.jpg", imageAlt: "adobe photoshop image editing interface" }, - { id: "4", name: "Illustrator", price: "Vector Design", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-web-designer-vertical-business-card_23-2150395752.jpg", imageAlt: "adobe illustrator vector design tool" }, - { id: "5", name: "After Effects", price: "Motion Graphics", imageSrc: "http://img.b2bpic.net/free-photo/young-programmer-engineer-writing-binary-code-data-terminal-window_482257-126472.jpg", imageAlt: "adobe after effects motion graphics" }, - { id: "6", name: "GitHub", price: "Version Control", imageSrc: "http://img.b2bpic.net/free-photo/programming-background-with-html-text_23-2150040426.jpg", imageAlt: "github version control interface" } - ], []); - - const footerColumns = React.useMemo(() => [ - { - title: "Navigate", items: [ - { label: "About", href: "#about" }, - { label: "Work", href: "#work" }, - { label: "Skills", href: "#skills" }, - { label: "Contact", href: "#contact" } - ] - }, - { - title: "Connect", items: [ - { label: "LinkedIn", href: "https://www.linkedin.com/in/sharanya-sasmal/" }, - { label: "GitHub", href: "https://github.com/Soulful-Sharanya116" }, - { label: "Email", href: "#contact" } - ] - }, - { - title: "Legal", items: [ - { label: "Privacy Policy", href: "#" }, - { label: "Terms of Service", href: "#" } - ] - } - ], []); - return (
-
-
-
-
-
-
- ); -} \ No newline at end of file +}