@promakeai/cli 0.0.5 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +214 -135
- package/dist/registry/about-page.json +5 -3
- package/dist/registry/about-section.json +2 -2
- package/dist/registry/announcement-bar.json +43 -0
- package/dist/registry/api.json +55 -0
- package/dist/registry/auth-core.json +43 -0
- package/dist/registry/auth.json +70 -0
- package/dist/registry/bento-grid-section.json +1 -1
- package/dist/registry/blog-list-page.json +3 -2
- package/dist/registry/blog-section.json +2 -2
- package/dist/registry/cart-drawer.json +1 -1
- package/dist/registry/cart-page.json +5 -4
- package/dist/registry/case-study-page.json +48 -0
- package/dist/registry/category-section.json +1 -1
- package/dist/registry/checkout-page.json +7 -5
- package/dist/registry/coming-soon-page-minimal.json +45 -0
- package/dist/registry/coming-soon-page.json +47 -0
- package/dist/registry/contact-info-grid.json +2 -2
- package/dist/registry/contact-page-centered.json +2 -2
- package/dist/registry/contact-page-map-overlay.json +4 -3
- package/dist/registry/contact-page-map-split.json +4 -3
- package/dist/registry/contact-page-split.json +3 -3
- package/dist/registry/contact-page.json +5 -3
- package/dist/registry/cookie-consent.json +43 -0
- package/dist/registry/cookies-page.json +4 -2
- package/dist/registry/cta-section.json +2 -2
- package/dist/registry/db.json +129 -0
- package/dist/registry/docs/about-page.md +5 -0
- package/dist/registry/docs/announcement-bar.md +38 -0
- package/dist/registry/docs/auth-core.md +64 -0
- package/dist/registry/docs/blog-list-page.md +1 -0
- package/dist/registry/docs/cart-page.md +1 -0
- package/dist/registry/docs/case-study-page.md +39 -0
- package/dist/registry/docs/checkout-page.md +3 -1
- package/dist/registry/docs/coming-soon-page-minimal.md +32 -0
- package/dist/registry/docs/coming-soon-page.md +37 -0
- package/dist/registry/docs/contact-page-map-overlay.md +2 -2
- package/dist/registry/docs/contact-page-map-split.md +2 -2
- package/dist/registry/docs/contact-page.md +5 -0
- package/dist/registry/docs/cookie-consent.md +37 -0
- package/dist/registry/docs/cookies-page.md +5 -0
- package/dist/registry/docs/ecommerce-core.md +4 -3
- package/dist/registry/docs/forgot-password-page-split.md +45 -0
- package/dist/registry/docs/forgot-password-page.md +46 -0
- package/dist/registry/docs/header-ecommerce.md +2 -0
- package/dist/registry/docs/hero-carousel.md +37 -0
- package/dist/registry/docs/landing-page-app.md +43 -0
- package/dist/registry/docs/landing-page-saas.md +41 -0
- package/dist/registry/docs/login-page-split.md +13 -4
- package/dist/registry/docs/login-page.md +17 -4
- package/dist/registry/docs/logo-cloud.md +33 -0
- package/dist/registry/docs/masonry-grid.md +37 -0
- package/dist/registry/docs/my-orders-page.md +44 -0
- package/dist/registry/docs/order-confirmation-page.md +41 -0
- package/dist/registry/docs/portfolio-page.md +38 -0
- package/dist/registry/docs/pricing-page.md +38 -0
- package/dist/registry/docs/privacy-page.md +5 -0
- package/dist/registry/docs/product-quick-view.md +37 -0
- package/dist/registry/docs/products-page.md +1 -0
- package/dist/registry/docs/reading-progress.md +31 -0
- package/dist/registry/docs/register-page-split.md +45 -0
- package/dist/registry/docs/register-page.md +46 -0
- package/dist/registry/docs/reset-password-page-split.md +45 -0
- package/dist/registry/docs/reset-password-page.md +36 -0
- package/dist/registry/docs/share-buttons.md +37 -0
- package/dist/registry/docs/team-page.md +38 -0
- package/dist/registry/docs/terms-page.md +5 -0
- package/dist/registry/docs/timeline-section.md +37 -0
- package/dist/registry/docs/video-hero.md +41 -0
- package/dist/registry/ecommerce-core.json +18 -2
- package/dist/registry/empty-page.json +1 -1
- package/dist/registry/faq-categorized.json +2 -2
- package/dist/registry/faq-simple.json +2 -2
- package/dist/registry/favorites-blog-block.json +1 -1
- package/dist/registry/favorites-ecommerce-block.json +1 -1
- package/dist/registry/feature-section.json +2 -2
- package/dist/registry/featured-products.json +1 -1
- package/dist/registry/footer-detailed.json +1 -1
- package/dist/registry/footer-minimal.json +3 -3
- package/dist/registry/footer.json +2 -2
- package/dist/registry/forgot-password-page-split.json +50 -0
- package/dist/registry/forgot-password-page.json +51 -0
- package/dist/registry/header-ecommerce.json +4 -2
- package/dist/registry/header-mega.json +2 -2
- package/dist/registry/header-minimal.json +1 -1
- package/dist/registry/header-simple.json +1 -1
- package/dist/registry/hero-carousel.json +45 -0
- package/dist/registry/hero-cta.json +2 -2
- package/dist/registry/hero-gradient.json +2 -2
- package/dist/registry/hero-profile.json +1 -1
- package/dist/registry/hero.json +2 -2
- package/dist/registry/index.json +24 -1
- package/dist/registry/landing-page-app.json +47 -0
- package/dist/registry/landing-page-saas.json +47 -0
- package/dist/registry/login-page-split.json +11 -7
- package/dist/registry/login-page.json +4 -4
- package/dist/registry/logo-cloud.json +41 -0
- package/dist/registry/masonry-grid.json +43 -0
- package/dist/registry/my-orders-page.json +52 -0
- package/dist/registry/order-confirmation-page.json +49 -0
- package/dist/registry/orders-list-block.json +1 -1
- package/dist/registry/payment-success-block.json +1 -1
- package/dist/registry/portfolio-page.json +45 -0
- package/dist/registry/post-detail-block.json +1 -1
- package/dist/registry/pricing-page.json +47 -0
- package/dist/registry/pricing-section.json +2 -2
- package/dist/registry/privacy-page.json +4 -2
- package/dist/registry/product-detail-block.json +1 -1
- package/dist/registry/product-quick-view.json +46 -0
- package/dist/registry/products-page.json +5 -4
- package/dist/registry/reading-progress.json +43 -0
- package/dist/registry/register-page-split.json +50 -0
- package/dist/registry/register-page.json +51 -0
- package/dist/registry/related-posts-block.json +1 -1
- package/dist/registry/reset-password-page-split.json +50 -0
- package/dist/registry/reset-password-page.json +39 -0
- package/dist/registry/share-buttons.json +46 -0
- package/dist/registry/team-page.json +47 -0
- package/dist/registry/terms-page.json +4 -2
- package/dist/registry/testimonials-carousel.json +2 -2
- package/dist/registry/testimonials-grid.json +2 -2
- package/dist/registry/timeline-section.json +43 -0
- package/dist/registry/video-hero.json +42 -0
- package/package.json +1 -1
- package/template/index.html +5 -5
- package/template/src/App.tsx +7 -24
- package/template/src/components/GoogleAnalytics.tsx +34 -0
- package/template/src/components/Layout.tsx +1 -5
- package/template/src/components/ScriptInjector.tsx +62 -0
- package/template/src/constants/constants.json +8 -2
- package/template/src/index.css +1 -0
- package/template/src/lang/en/index.json +1 -28
- package/template/src/lang/tr/index.json +1 -28
- package/template/src/pages/Index.tsx +1 -98
- package/template/src/components/Footer.tsx +0 -100
- package/template/src/components/Header.tsx +0 -79
- package/template/src/components/Hero.tsx +0 -69
- package/template/src/modules/api/USAGE.md +0 -515
- package/template/src/modules/api/customer-client.ts +0 -20
- package/template/src/modules/api/get-error-message.ts +0 -18
- package/template/src/modules/api/validation/en.json +0 -29
- package/template/src/modules/api/validation/tr.json +0 -29
- package/template/src/modules/auth/USAGE.md +0 -248
- package/template/src/modules/auth/auth-header-menu.tsx +0 -123
- package/template/src/modules/auth/auth-store.ts +0 -57
- package/template/src/modules/auth/forgot-password-page.tsx +0 -371
- package/template/src/modules/auth/login-page.tsx +0 -183
- package/template/src/modules/auth/register-page.tsx +0 -252
- package/template/src/modules/auth/use-auth.ts +0 -273
- package/template/src/modules/db/adapters/IDataAdapter.ts +0 -26
- package/template/src/modules/db/adapters/SqliteAdapter.ts +0 -364
- package/template/src/modules/db/adapters/index.ts +0 -2
- package/template/src/modules/db/config.ts +0 -59
- package/template/src/modules/db/core/DataManager.ts +0 -125
- package/template/src/modules/db/core/types.ts +0 -101
- package/template/src/modules/db/index.ts +0 -42
- package/template/src/modules/db/react/QueryProvider.tsx +0 -16
- package/template/src/modules/db/react/index.ts +0 -23
- package/template/src/modules/db/react/queryClient.ts +0 -64
- package/template/src/modules/db/react/useRepository.ts +0 -400
- package/template/src/modules/db/utils/parsers.ts +0 -96
|
@@ -23,13 +23,13 @@
|
|
|
23
23
|
"path": "header-mega/header-mega.tsx",
|
|
24
24
|
"type": "registry:component",
|
|
25
25
|
"target": "$modules$/header-mega/header-mega.tsx",
|
|
26
|
-
"content": "import { Link } from \"react-router\";\r\nimport { Book, Menu, Sunset, Trees, Zap } from \"lucide-react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport {\r\n Accordion,\r\n AccordionContent,\r\n AccordionItem,\r\n AccordionTrigger,\r\n} from \"@/components/ui/accordion\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport {\r\n NavigationMenu,\r\n NavigationMenuContent,\r\n NavigationMenuItem,\r\n NavigationMenuLink,\r\n NavigationMenuList,\r\n NavigationMenuTrigger,\r\n} from \"@/components/ui/navigation-menu\";\r\nimport {\r\n Sheet,\r\n SheetContent,\r\n SheetHeader,\r\n SheetTitle,\r\n SheetTrigger,\r\n} from \"@/components/ui/sheet\";\r\nimport constants from \"@/constants/constants.json\";\r\n\r\ninterface MenuItem {\r\n title: string;\r\n url: string;\r\n description?: string;\r\n icon?: React.ReactNode;\r\n items?: MenuItem[];\r\n}\r\n\r\ninterface HeaderMegaProps {\r\n className?: string;\r\n}\r\n\r\nexport function HeaderMega({ className }: HeaderMegaProps) {\r\n const { t } = useTranslation(\"header-mega\");\r\n\r\n const menu: MenuItem[] = [\r\n { title: t(\"home\", \"Home\"), url: \"/\" },\r\n {\r\n title: t(\"products\", \"Products\"),\r\n url: \"/products\",\r\n items: [\r\n {\r\n title: t(\"allProducts\", \"All Products\"),\r\n description: t(\r\n \"allProductsDesc\",\r\n \"Browse our complete product catalog\"\r\n ),\r\n icon: <Book className=\"h-5 w-5 shrink-0\" />,\r\n url: \"/products\",\r\n },\r\n {\r\n title: t(\"featured\", \"Featured\"),\r\n description: t(\r\n \"featuredDesc\",\r\n \"Our handpicked selection of top products\"\r\n ),\r\n icon: <Trees className=\"h-5 w-5 shrink-0\" />,\r\n url: \"/products?featured=true\",\r\n },\r\n {\r\n title: t(\"newArrivals\", \"New Arrivals\"),\r\n description: t(\"newArrivalsDesc\", \"Check out the latest additions\"),\r\n icon: <Sunset className=\"h-5 w-5 shrink-0\" />,\r\n url: \"/products?is_new=true\",\r\n },\r\n {\r\n title: t(\"onSale\", \"On Sale\"),\r\n description: t(\"onSaleDesc\", \"Great deals and special offers\"),\r\n icon: <Zap className=\"h-5 w-5 shrink-0\" />,\r\n url: \"/products?on_sale=true\",\r\n },\r\n ],\r\n },\r\n {\r\n title: t(\"company\", \"Company\"),\r\n url: \"#\",\r\n items: [\r\n {\r\n title: t(\"aboutUs\", \"About Us\"),\r\n description: t(\r\n \"aboutUsDesc\",\r\n \"Learn more about our story and mission\"\r\n ),\r\n icon: <Trees className=\"h-5 w-5 shrink-0\" />,\r\n url: \"/about\",\r\n },\r\n {\r\n title: t(\"contact\", \"Contact\"),\r\n description: t(\"contactDesc\", \"Get in touch with our team\"),\r\n icon: <Sunset className=\"h-5 w-5 shrink-0\" />,\r\n url: \"/contact\",\r\n },\r\n {\r\n title: t(\"blog\", \"Blog\"),\r\n description: t(\"blogDesc\", \"Read our latest articles and updates\"),\r\n icon: <Book className=\"h-5 w-5 shrink-0\" />,\r\n url: \"/blog\",\r\n },\r\n ],\r\n },\r\n ];\r\n\r\n const renderMenuItem = (item: MenuItem) => {\r\n if (item.items) {\r\n return (\r\n <NavigationMenuItem key={item.title}>\r\n <NavigationMenuTrigger>{item.title}</NavigationMenuTrigger>\r\n <NavigationMenuContent className=\"z-50 bg-popover text-popover-foreground\">\r\n {item.items.map((subItem) => (\r\n <NavigationMenuLink asChild key={subItem.title} className=\"w-80\">\r\n <SubMenuLink item={subItem} />\r\n </NavigationMenuLink>\r\n ))}\r\n </NavigationMenuContent>\r\n </NavigationMenuItem>\r\n );\r\n }\r\n\r\n return (\r\n <NavigationMenuItem key={item.title}>\r\n <NavigationMenuLink asChild>\r\n <Link\r\n to={item.url}\r\n className=\"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground\"\r\n >\r\n {item.title}\r\n </Link>\r\n </NavigationMenuLink>\r\n </NavigationMenuItem>\r\n );\r\n };\r\n\r\n const renderMobileMenuItem = (item: MenuItem) => {\r\n if (item.items) {\r\n return (\r\n <AccordionItem\r\n key={item.title}\r\n value={item.title}\r\n className=\"border-b-0\"\r\n >\r\n <AccordionTrigger className=\"text-md py-0 font-semibold hover:no-underline\">\r\n {item.title}\r\n </AccordionTrigger>\r\n <AccordionContent className=\"mt-2\">\r\n {item.items.map((subItem) => (\r\n <SubMenuLink key={subItem.title} item={subItem} />\r\n ))}\r\n </AccordionContent>\r\n </AccordionItem>\r\n );\r\n }\r\n\r\n return (\r\n <Link key={item.title} to={item.url} className=\"text-md font-semibold\">\r\n {item.title}\r\n </Link>\r\n );\r\n };\r\n\r\n return (\r\n <header\r\n className={cn(\r\n \"relative z-40 py-4 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60\",\r\n className\r\n )}\r\n >\r\n <div className=\"container mx-auto px-4\">\r\n {/* Desktop Menu */}\r\n <nav className=\"hidden items-center justify-between lg:flex\">\r\n <div className=\"flex items-center gap-6\">\r\n {/* Logo */}\r\n <Link to=\"/\" className=\"flex items-center gap-2\">\r\n <img\r\n src=\"/images/logo.png\"\r\n className=\"h-8 w-auto\"\r\n alt={constants.site.name}\r\n onError={(e) => {\r\n e.currentTarget.style.display = \"none\";\r\n }}\r\n />\r\n <span className=\"text-lg font-semibold tracking-tight\">\r\n {constants.site.name}\r\n </span>\r\n </Link>\r\n <div className=\"flex items-center\">\r\n <NavigationMenu>\r\n <NavigationMenuList>\r\n {menu.map((item) => renderMenuItem(item))}\r\n </NavigationMenuList>\r\n </NavigationMenu>\r\n </div>\r\n </div>\r\n <div className=\"flex gap-2\">\r\n <Button asChild variant=\"outline\" size=\"sm\">\r\n <Link to=\"/login\">{t(\"login\", \"Login\")}</Link>\r\n </Button>\r\n <Button asChild size=\"sm\">\r\n <Link to=\"/register\">{t(\"signup\", \"Sign up\")}</Link>\r\n </Button>\r\n </div>\r\n </nav>\r\n\r\n {/* Mobile Menu */}\r\n <div className=\"block lg:hidden\">\r\n <div className=\"flex items-center justify-between\">\r\n {/* Logo */}\r\n <Link to=\"/\" className=\"flex items-center gap-2\">\r\n <img\r\n src=\"/images/logo.png\"\r\n className=\"h-8 w-auto\"\r\n alt={constants.site.name}\r\n onError={(e) => {\r\n e.currentTarget.style.display = \"none\";\r\n }}\r\n />\r\n <span className=\"text-lg font-semibold tracking-tight\">\r\n {constants.site.name}\r\n </span>\r\n </Link>\r\n <Sheet>\r\n <SheetTrigger asChild>\r\n <Button variant=\"outline\" size=\"icon\">\r\n <Menu className=\"h-4 w-4\" />\r\n </Button>\r\n </SheetTrigger>\r\n <SheetContent className=\"z-50 overflow-y-auto px-6\">\r\n <SheetHeader>\r\n <SheetTitle>\r\n <Link to=\"/\" className=\"flex items-center gap-2\">\r\n <img\r\n src=\"/images/logo.png\"\r\n className=\"h-8 w-auto\"\r\n alt={constants.site.name}\r\n onError={(e) => {\r\n e.currentTarget.style.display = \"none\";\r\n }}\r\n />\r\n </Link>\r\n </SheetTitle>\r\n </SheetHeader>\r\n <div className=\"flex flex-col gap-6 p-4\">\r\n <Accordion\r\n type=\"single\"\r\n collapsible\r\n className=\"flex w-full flex-col gap-4\"\r\n >\r\n {menu.map((item) => renderMobileMenuItem(item))}\r\n </Accordion>\r\n\r\n <div className=\"flex flex-col gap-3\">\r\n <Button asChild variant=\"outline\">\r\n <Link to=\"/login\">{t(\"login\", \"Login\")}</Link>\r\n </Button>\r\n <Button asChild>\r\n <Link to=\"/register\">{t(\"signup\", \"Sign up\")}</Link>\r\n </Button>\r\n </div>\r\n </div>\r\n </SheetContent>\r\n </Sheet>\r\n </div>\r\n </div>\r\n </div>\r\n </header>\r\n );\r\n}\r\n\r\nfunction SubMenuLink({ item }: { item: MenuItem }) {\r\n return (\r\n <Link\r\n to={item.url}\r\n className=\"flex min-w-80 flex-row gap-4 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-muted hover:text-accent-foreground\"\r\n >\r\n <div className=\"text-foreground\">{item.icon}</div>\r\n <div>\r\n <div className=\"text-sm font-semibold\">{item.title}</div>\r\n {item.description && (\r\n <p className=\"text-sm leading-snug text-muted-foreground\">\r\n {item.description}\r\n </p>\r\n )}\r\n </div>\r\n </Link>\r\n );\r\n}\r\n"
|
|
26
|
+
"content": "import { Link } from \"react-router\";\r\nimport { Book, Menu, Sunset, Trees, Zap } from \"lucide-react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport {\r\n Accordion,\r\n AccordionContent,\r\n AccordionItem,\r\n AccordionTrigger,\r\n} from \"@/components/ui/accordion\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport {\r\n NavigationMenu,\r\n NavigationMenuContent,\r\n NavigationMenuItem,\r\n NavigationMenuLink,\r\n NavigationMenuList,\r\n NavigationMenuTrigger,\r\n} from \"@/components/ui/navigation-menu\";\r\nimport {\r\n Sheet,\r\n SheetContent,\r\n SheetHeader,\r\n SheetTitle,\r\n SheetTrigger,\r\n} from \"@/components/ui/sheet\";\r\nimport constants from \"@/constants/constants.json\";\r\n\r\ninterface MenuItem {\r\n title: string;\r\n url: string;\r\n description?: string;\r\n icon?: React.ReactNode;\r\n items?: MenuItem[];\r\n}\r\n\r\ninterface HeaderMegaProps {\r\n className?: string;\r\n}\r\n\r\nexport function HeaderMega({ className }: HeaderMegaProps) {\r\n const { t } = useTranslation(\"header-mega\");\r\n\r\n const menu: MenuItem[] = [\r\n { title: t(\"home\", \"Home\"), url: \"/\" },\r\n {\r\n title: t(\"products\", \"Products\"),\r\n url: \"/products\",\r\n items: [\r\n {\r\n title: t(\"allProducts\", \"All Products\"),\r\n description: t(\r\n \"allProductsDesc\",\r\n \"Browse our complete product catalog\"\r\n ),\r\n icon: <Book className=\"h-5 w-5 shrink-0\" />,\r\n url: \"/products\",\r\n },\r\n {\r\n title: t(\"featured\", \"Featured\"),\r\n description: t(\r\n \"featuredDesc\",\r\n \"Our handpicked selection of top products\"\r\n ),\r\n icon: <Trees className=\"h-5 w-5 shrink-0\" />,\r\n url: \"/products?featured=true\",\r\n },\r\n {\r\n title: t(\"newArrivals\", \"New Arrivals\"),\r\n description: t(\"newArrivalsDesc\", \"Check out the latest additions\"),\r\n icon: <Sunset className=\"h-5 w-5 shrink-0\" />,\r\n url: \"/products?is_new=true\",\r\n },\r\n {\r\n title: t(\"onSale\", \"On Sale\"),\r\n description: t(\"onSaleDesc\", \"Great deals and special offers\"),\r\n icon: <Zap className=\"h-5 w-5 shrink-0\" />,\r\n url: \"/products?on_sale=true\",\r\n },\r\n ],\r\n },\r\n {\r\n title: t(\"company\", \"Company\"),\r\n url: \"#\",\r\n items: [\r\n {\r\n title: t(\"aboutUs\", \"About Us\"),\r\n description: t(\r\n \"aboutUsDesc\",\r\n \"Learn more about our story and mission\"\r\n ),\r\n icon: <Trees className=\"h-5 w-5 shrink-0\" />,\r\n url: \"/about\",\r\n },\r\n {\r\n title: t(\"contact\", \"Contact\"),\r\n description: t(\"contactDesc\", \"Get in touch with our team\"),\r\n icon: <Sunset className=\"h-5 w-5 shrink-0\" />,\r\n url: \"/contact\",\r\n },\r\n {\r\n title: t(\"blog\", \"Blog\"),\r\n description: t(\"blogDesc\", \"Read our latest articles and updates\"),\r\n icon: <Book className=\"h-5 w-5 shrink-0\" />,\r\n url: \"/blog\",\r\n },\r\n ],\r\n },\r\n ];\r\n\r\n const renderMenuItem = (item: MenuItem) => {\r\n if (item.items) {\r\n return (\r\n <NavigationMenuItem key={item.title}>\r\n <NavigationMenuTrigger>{item.title}</NavigationMenuTrigger>\r\n <NavigationMenuContent className=\"z-50 bg-popover text-popover-foreground\">\r\n {item.items.map((subItem) => (\r\n <NavigationMenuLink asChild key={subItem.title} className=\"w-80\">\r\n <SubMenuLink item={subItem} />\r\n </NavigationMenuLink>\r\n ))}\r\n </NavigationMenuContent>\r\n </NavigationMenuItem>\r\n );\r\n }\r\n\r\n return (\r\n <NavigationMenuItem key={item.title}>\r\n <NavigationMenuLink asChild>\r\n <Link\r\n to={item.url}\r\n className=\"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground\"\r\n >\r\n {item.title}\r\n </Link>\r\n </NavigationMenuLink>\r\n </NavigationMenuItem>\r\n );\r\n };\r\n\r\n const renderMobileMenuItem = (item: MenuItem) => {\r\n if (item.items) {\r\n return (\r\n <AccordionItem\r\n key={item.title}\r\n value={item.title}\r\n className=\"border-b-0\"\r\n >\r\n <AccordionTrigger className=\"text-md py-0 font-semibold hover:no-underline\">\r\n {item.title}\r\n </AccordionTrigger>\r\n <AccordionContent className=\"mt-2\">\r\n {item.items.map((subItem) => (\r\n <SubMenuLink key={subItem.title} item={subItem} />\r\n ))}\r\n </AccordionContent>\r\n </AccordionItem>\r\n );\r\n }\r\n\r\n return (\r\n <Link key={item.title} to={item.url} className=\"text-md font-semibold\">\r\n {item.title}\r\n </Link>\r\n );\r\n };\r\n\r\n return (\r\n <header\r\n className={cn(\r\n \"relative z-50 py-4 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60\",\r\n className\r\n )}\r\n >\r\n <div className=\"container max-w-7xl mx-auto px-4\">\r\n {/* Desktop Menu */}\r\n <nav className=\"hidden items-center justify-between lg:flex\">\r\n <div className=\"flex items-center gap-6\">\r\n {/* Logo */}\r\n <Link to=\"/\" className=\"flex items-center gap-2\">\r\n <img\r\n src=\"/images/logo.png\"\r\n className=\"h-8 w-auto\"\r\n alt={constants.site.name}\r\n onError={(e) => {\r\n e.currentTarget.style.display = \"none\";\r\n }}\r\n />\r\n <span className=\"text-lg font-semibold tracking-tight\">\r\n {constants.site.name}\r\n </span>\r\n </Link>\r\n <div className=\"flex items-center\">\r\n <NavigationMenu>\r\n <NavigationMenuList>\r\n {menu.map((item) => renderMenuItem(item))}\r\n </NavigationMenuList>\r\n </NavigationMenu>\r\n </div>\r\n </div>\r\n <div className=\"flex gap-2\">\r\n <Button asChild variant=\"outline\" size=\"sm\">\r\n <Link to=\"/login\">{t(\"login\", \"Login\")}</Link>\r\n </Button>\r\n <Button asChild size=\"sm\">\r\n <Link to=\"/register\">{t(\"signup\", \"Sign up\")}</Link>\r\n </Button>\r\n </div>\r\n </nav>\r\n\r\n {/* Mobile Menu */}\r\n <div className=\"block lg:hidden\">\r\n <div className=\"flex items-center justify-between\">\r\n {/* Logo */}\r\n <Link to=\"/\" className=\"flex items-center gap-2\">\r\n <img\r\n src=\"/images/logo.png\"\r\n className=\"h-8 w-auto\"\r\n alt={constants.site.name}\r\n onError={(e) => {\r\n e.currentTarget.style.display = \"none\";\r\n }}\r\n />\r\n <span className=\"text-lg font-semibold tracking-tight\">\r\n {constants.site.name}\r\n </span>\r\n </Link>\r\n <Sheet>\r\n <SheetTrigger asChild>\r\n <Button variant=\"outline\" size=\"icon\">\r\n <Menu className=\"h-4 w-4\" />\r\n </Button>\r\n </SheetTrigger>\r\n <SheetContent className=\"z-50 overflow-y-auto px-6\">\r\n <SheetHeader>\r\n <SheetTitle>\r\n <Link to=\"/\" className=\"flex items-center gap-2\">\r\n <img\r\n src=\"/images/logo.png\"\r\n className=\"h-8 w-auto\"\r\n alt={constants.site.name}\r\n onError={(e) => {\r\n e.currentTarget.style.display = \"none\";\r\n }}\r\n />\r\n </Link>\r\n </SheetTitle>\r\n </SheetHeader>\r\n <div className=\"flex flex-col gap-6 p-4\">\r\n <Accordion\r\n type=\"single\"\r\n collapsible\r\n className=\"flex w-full flex-col gap-4\"\r\n >\r\n {menu.map((item) => renderMobileMenuItem(item))}\r\n </Accordion>\r\n\r\n <div className=\"flex flex-col gap-3\">\r\n <Button asChild variant=\"outline\">\r\n <Link to=\"/login\">{t(\"login\", \"Login\")}</Link>\r\n </Button>\r\n <Button asChild>\r\n <Link to=\"/register\">{t(\"signup\", \"Sign up\")}</Link>\r\n </Button>\r\n </div>\r\n </div>\r\n </SheetContent>\r\n </Sheet>\r\n </div>\r\n </div>\r\n </div>\r\n </header>\r\n );\r\n}\r\n\r\nfunction SubMenuLink({ item }: { item: MenuItem }) {\r\n return (\r\n <Link\r\n to={item.url}\r\n className=\"flex min-w-80 flex-row gap-4 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-muted hover:text-accent-foreground\"\r\n >\r\n <div className=\"text-foreground\">{item.icon}</div>\r\n <div>\r\n <div className=\"text-sm font-semibold\">{item.title}</div>\r\n {item.description && (\r\n <p className=\"text-sm leading-snug text-muted-foreground\">\r\n {item.description}\r\n </p>\r\n )}\r\n </div>\r\n </Link>\r\n );\r\n}\r\n"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"path": "header-mega/lang/en.json",
|
|
30
30
|
"type": "registry:lang",
|
|
31
31
|
"target": "$modules$/header-mega/lang/en.json",
|
|
32
|
-
"content": "{\r\n \"home\": \"Home\",\r\n \"products\": \"Products\",\r\n \"allProducts\": \"All Products\",\r\n \"allProductsDesc\": \"
|
|
32
|
+
"content": "{\r\n \"home\": \"Home\",\r\n \"products\": \"Products\",\r\n \"allProducts\": \"All Products\",\r\n \"allProductsDesc\": \"Ask Promake to customize this menu description based on your product catalog\",\r\n \"featured\": \"Featured\",\r\n \"featuredDesc\": \"Replace this text with your featured products description\",\r\n \"newArrivals\": \"New Arrivals\",\r\n \"newArrivalsDesc\": \"This description will be customized by Promake for your new products\",\r\n \"onSale\": \"On Sale\",\r\n \"onSaleDesc\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit\",\r\n \"company\": \"About\",\r\n \"aboutUs\": \"About Us\",\r\n \"aboutUsDesc\": \"Ask Promake to replace this with your story and purpose\",\r\n \"contact\": \"Contact\",\r\n \"contactDesc\": \"Customize this contact menu description\",\r\n \"blog\": \"Blog\",\r\n \"blogDesc\": \"This text will be replaced with your blog description\",\r\n \"login\": \"Login\",\r\n \"signup\": \"Sign up\"\r\n}\r\n"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"path": "header-mega/lang/tr.json",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"path": "header-minimal/header-minimal.tsx",
|
|
22
22
|
"type": "registry:component",
|
|
23
23
|
"target": "$modules$/header-minimal/header-minimal.tsx",
|
|
24
|
-
"content": "import { Link } from \"react-router\";\r\nimport { Menu } from \"lucide-react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport {\r\n Sheet,\r\n SheetContent,\r\n SheetHeader,\r\n SheetTitle,\r\n SheetTrigger,\r\n} from \"@/components/ui/sheet\";\r\nimport constants from \"@/constants/constants.json\";\r\n\r\ninterface HeaderMinimalProps {\r\n className?: string;\r\n}\r\n\r\nexport function HeaderMinimal({ className }: HeaderMinimalProps) {\r\n const { t } = useTranslation(\"header-minimal\");\r\n\r\n const links = [\r\n { title: t(\"home\", \"Home\"), url: \"/\" },\r\n { title: t(\"about\", \"About\"), url: \"/about\" },\r\n ];\r\n\r\n return (\r\n <header className={cn(\"py-4 border-b bg-background\", className)}>\r\n <div className=\"container mx-auto px-4\">\r\n <nav className=\"flex items-center justify-between\">\r\n {/* Logo */}\r\n <Link to=\"/\" className=\"flex items-center gap-2\">\r\n <img\r\n src=\"/images/logo.png\"\r\n className=\"h-8 w-auto\"\r\n alt={constants.site.name}\r\n onError={(e) => {\r\n e.currentTarget.style.display = \"none\";\r\n }}\r\n />\r\n <span className=\"text-xl font-bold tracking-tight\">\r\n {constants.site.name}\r\n </span>\r\n </Link>\r\n\r\n {/* Desktop Links */}\r\n <div className=\"hidden md:flex items-center gap-8\">\r\n {links.map((link) => (\r\n <Link\r\n key={link.title}\r\n to={link.url}\r\n className=\"text-sm font-medium text-muted-foreground hover:text-foreground transition-colors\"\r\n >\r\n {link.title}\r\n </Link>\r\n ))}\r\n </div>\r\n\r\n {/* CTA Button - Desktop */}\r\n <div className=\"hidden md:block\">\r\n <Button asChild>\r\n <Link to=\"/contact\">{t(\"cta\", \"Contact\")}</Link>\r\n </Button>\r\n </div>\r\n\r\n {/* Mobile Menu */}\r\n <div className=\"md:hidden\">\r\n <Sheet>\r\n <SheetTrigger asChild>\r\n <Button variant=\"ghost\" size=\"icon\">\r\n <Menu className=\"h-5 w-5\" />\r\n </Button>\r\n </SheetTrigger>\r\n <SheetContent side=\"right\" className=\"px-6\">\r\n <SheetHeader>\r\n <SheetTitle>\r\n <Link to=\"/\" className=\"flex items-center gap-2\">\r\n <span className=\"text-xl font-bold\">\r\n {constants.site.name}\r\n </span>\r\n </Link>\r\n </SheetTitle>\r\n </SheetHeader>\r\n <div className=\"flex flex-col gap-4 mt-8\">\r\n {links.map((link) => (\r\n <Link\r\n key={link.title}\r\n to={link.url}\r\n className=\"text-lg font-medium hover:text-primary transition-colors\"\r\n >\r\n {link.title}\r\n </Link>\r\n ))}\r\n <Button asChild className=\"mt-4\">\r\n <Link to=\"/contact\">{t(\"cta\", \"Contact\")}</Link>\r\n </Button>\r\n </div>\r\n </SheetContent>\r\n </Sheet>\r\n </div>\r\n </nav>\r\n </div>\r\n </header>\r\n );\r\n}\r\n"
|
|
24
|
+
"content": "import { Link } from \"react-router\";\r\nimport { Menu } from \"lucide-react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport {\r\n Sheet,\r\n SheetContent,\r\n SheetHeader,\r\n SheetTitle,\r\n SheetTrigger,\r\n} from \"@/components/ui/sheet\";\r\nimport constants from \"@/constants/constants.json\";\r\n\r\ninterface HeaderMinimalProps {\r\n className?: string;\r\n}\r\n\r\nexport function HeaderMinimal({ className }: HeaderMinimalProps) {\r\n const { t } = useTranslation(\"header-minimal\");\r\n\r\n const links = [\r\n { title: t(\"home\", \"Home\"), url: \"/\" },\r\n { title: t(\"about\", \"About\"), url: \"/about\" },\r\n ];\r\n\r\n return (\r\n <header className={cn(\"py-4 border-b bg-background\", className)}>\r\n <div className=\"container max-w-7xl mx-auto px-4\">\r\n <nav className=\"flex items-center justify-between\">\r\n {/* Logo */}\r\n <Link to=\"/\" className=\"flex items-center gap-2\">\r\n <img\r\n src=\"/images/logo.png\"\r\n className=\"h-8 w-auto\"\r\n alt={constants.site.name}\r\n onError={(e) => {\r\n e.currentTarget.style.display = \"none\";\r\n }}\r\n />\r\n <span className=\"text-xl font-bold tracking-tight\">\r\n {constants.site.name}\r\n </span>\r\n </Link>\r\n\r\n {/* Desktop Links */}\r\n <div className=\"hidden md:flex items-center gap-8\">\r\n {links.map((link) => (\r\n <Link\r\n key={link.title}\r\n to={link.url}\r\n className=\"text-sm font-medium text-muted-foreground hover:text-foreground transition-colors\"\r\n >\r\n {link.title}\r\n </Link>\r\n ))}\r\n </div>\r\n\r\n {/* CTA Button - Desktop */}\r\n <div className=\"hidden md:block\">\r\n <Button asChild>\r\n <Link to=\"/contact\">{t(\"cta\", \"Contact\")}</Link>\r\n </Button>\r\n </div>\r\n\r\n {/* Mobile Menu */}\r\n <div className=\"md:hidden\">\r\n <Sheet>\r\n <SheetTrigger asChild>\r\n <Button variant=\"ghost\" size=\"icon\">\r\n <Menu className=\"h-5 w-5\" />\r\n </Button>\r\n </SheetTrigger>\r\n <SheetContent side=\"right\" className=\"px-6\">\r\n <SheetHeader>\r\n <SheetTitle>\r\n <Link to=\"/\" className=\"flex items-center gap-2\">\r\n <span className=\"text-xl font-bold\">\r\n {constants.site.name}\r\n </span>\r\n </Link>\r\n </SheetTitle>\r\n </SheetHeader>\r\n <div className=\"flex flex-col gap-4 mt-8\">\r\n {links.map((link) => (\r\n <Link\r\n key={link.title}\r\n to={link.url}\r\n className=\"text-lg font-medium hover:text-primary transition-colors\"\r\n >\r\n {link.title}\r\n </Link>\r\n ))}\r\n <Button asChild className=\"mt-4\">\r\n <Link to=\"/contact\">{t(\"cta\", \"Contact\")}</Link>\r\n </Button>\r\n </div>\r\n </SheetContent>\r\n </Sheet>\r\n </div>\r\n </nav>\r\n </div>\r\n </header>\r\n );\r\n}\r\n"
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
27
|
"path": "header-minimal/lang/en.json",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"path": "header-simple/header-simple.tsx",
|
|
20
20
|
"type": "registry:component",
|
|
21
21
|
"target": "$modules$/header-simple/header-simple.tsx",
|
|
22
|
-
"content": "import { useState } from \"react\";\nimport { Link } from \"react-router\";\nimport { Menu } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Sheet,\n SheetHeader,\n SheetTitle,\n SheetContent,\n SheetTrigger,\n} from \"@/components/ui/sheet\";\nimport { Logo } from \"@/components/Logo\";\nimport { useTranslation } from \"react-i18next\";\n\nexport function HeaderSimple() {\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const { t } = useTranslation(\"header-simple\");\n\n\n\n const navigation = [\n { name: t('home', 'Home'), href: \"/\" },\n { name: t('about', 'About'), href: \"/about\" },\n { name: t('contact', 'Contact'), href: \"/contact\" },\n ];\n\n return (\n <header className=\"sticky top-0 z-50 w-full border-b border-border/20 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60\">\n <div className=\"container mx-auto px-4 lg:px-8\">\n <div className=\"flex h-16 sm:h-20 items-center justify-between\">\n {/* Logo */}\n <div className=\"flex-shrink-0 min-w-0\">\n <Logo size=\"sm\" className=\"text-base sm:text-xl lg:text-2xl\" />\n </div>\n\n {/* Desktop Navigation - Right Aligned */}\n <nav className=\"hidden lg:flex items-center space-x-8\">\n {navigation.map((item) => (\n <Link\n key={item.name}\n to={item.href}\n className=\"text-base font-medium transition-colors hover:text-primary relative group py-2\"\n >\n {item.name}\n <span className=\"absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full\"></span>\n </Link>\n ))}\n </nav>\n\n {/* Mobile Menu - Right Aligned */}\n <div className=\"lg:hidden flex-shrink-0\">\n <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>\n <SheetTrigger asChild>\n <Button variant=\"ghost\" size=\"icon\">\n <Menu className=\"h-5 w-5\" />\n </Button>\n </SheetTrigger>\n <SheetContent side=\"right\" className=\"w-[300px] sm:w-[400px] px-6\">\n <SheetHeader>\n <SheetTitle>{t('menu')}</SheetTitle>\n </SheetHeader>\n <div className=\"flex flex-col space-y-4 mt-8\">\n {navigation.map((item) => (\n <Link\n key={item.name}\n to={item.href}\n className=\"text-lg font-medium hover:text-primary transition-colors\"\n onClick={() => setMobileMenuOpen(false)}\n >\n {item.name}\n </Link>\n ))}\n </div>\n </SheetContent>\n </Sheet>\n </div>\n </div>\n </div>\n </header>\n );\n}\n"
|
|
22
|
+
"content": "import { useState } from \"react\";\nimport { Link } from \"react-router\";\nimport { Menu } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Sheet,\n SheetHeader,\n SheetTitle,\n SheetContent,\n SheetTrigger,\n} from \"@/components/ui/sheet\";\nimport { Logo } from \"@/components/Logo\";\nimport { useTranslation } from \"react-i18next\";\n\nexport function HeaderSimple() {\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const { t } = useTranslation(\"header-simple\");\n\n\n\n const navigation = [\n { name: t('home', 'Home'), href: \"/\" },\n { name: t('about', 'About'), href: \"/about\" },\n { name: t('contact', 'Contact'), href: \"/contact\" },\n ];\n\n return (\n <header className=\"sticky top-0 z-50 w-full border-b border-border/20 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60\">\n <div className=\"container max-w-7xl mx-auto px-4 lg:px-8\">\n <div className=\"flex h-16 sm:h-20 items-center justify-between\">\n {/* Logo */}\n <div className=\"flex-shrink-0 min-w-0\">\n <Logo size=\"sm\" className=\"text-base sm:text-xl lg:text-2xl\" />\n </div>\n\n {/* Desktop Navigation - Right Aligned */}\n <nav className=\"hidden lg:flex items-center space-x-8\">\n {navigation.map((item) => (\n <Link\n key={item.name}\n to={item.href}\n className=\"text-base font-medium transition-colors hover:text-primary relative group py-2\"\n >\n {item.name}\n <span className=\"absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full\"></span>\n </Link>\n ))}\n </nav>\n\n {/* Mobile Menu - Right Aligned */}\n <div className=\"lg:hidden flex-shrink-0\">\n <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>\n <SheetTrigger asChild>\n <Button variant=\"ghost\" size=\"icon\">\n <Menu className=\"h-5 w-5\" />\n </Button>\n </SheetTrigger>\n <SheetContent side=\"right\" className=\"w-[300px] sm:w-[400px] px-6\">\n <SheetHeader>\n <SheetTitle>{t('menu')}</SheetTitle>\n </SheetHeader>\n <div className=\"flex flex-col space-y-4 mt-8\">\n {navigation.map((item) => (\n <Link\n key={item.name}\n to={item.href}\n className=\"text-lg font-medium hover:text-primary transition-colors\"\n onClick={() => setMobileMenuOpen(false)}\n >\n {item.name}\n </Link>\n ))}\n </div>\n </SheetContent>\n </Sheet>\n </div>\n </div>\n </div>\n </header>\n );\n}\n"
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
25
|
"path": "header-simple/lang/en.json",
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "hero-carousel",
|
|
3
|
+
"type": "registry:component",
|
|
4
|
+
"title": "Hero Carousel",
|
|
5
|
+
"description": "Full-width hero carousel with auto-play and touch support. Features navigation dots, arrows, and configurable interval.",
|
|
6
|
+
"dependencies": [
|
|
7
|
+
"lucide-react"
|
|
8
|
+
],
|
|
9
|
+
"registryDependencies": [
|
|
10
|
+
"button"
|
|
11
|
+
],
|
|
12
|
+
"usage": "import { HeroCarousel } from '@/modules/hero-carousel';\n\n<HeroCarousel />\n\n• Installed at: src/modules/hero-carousel/\n• Customize content: lang/en/hero-carousel.json\n• Props: slides[], autoPlay, interval, showDots, showArrows, pauseOnHover",
|
|
13
|
+
"files": [
|
|
14
|
+
{
|
|
15
|
+
"path": "hero-carousel/hero-carousel.tsx",
|
|
16
|
+
"type": "registry:component",
|
|
17
|
+
"target": "$modules$/hero-carousel/hero-carousel.tsx",
|
|
18
|
+
"content": "\"use client\";\n\nimport { useState, useEffect, useCallback, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Link } from \"react-router\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\n\ninterface Slide {\n image: string;\n title: string;\n description: string;\n primaryButton?: {\n text: string;\n link: string;\n };\n secondaryButton?: {\n text: string;\n link: string;\n };\n}\n\ninterface HeroCarouselProps {\n slides?: Slide[];\n autoPlay?: boolean;\n interval?: number;\n showDots?: boolean;\n showArrows?: boolean;\n pauseOnHover?: boolean;\n className?: string;\n}\n\nexport function HeroCarousel({\n slides,\n autoPlay = true,\n interval = 5000,\n showDots = true,\n showArrows = true,\n pauseOnHover = true,\n className,\n}: HeroCarouselProps) {\n const { t } = useTranslation(\"hero-carousel\");\n const [currentSlide, setCurrentSlide] = useState(0);\n const [isPaused, setIsPaused] = useState(false);\n const [dragStart, setDragStart] = useState<number | null>(null);\n const [isDragging, setIsDragging] = useState(false);\n const containerRef = useRef<HTMLElement>(null);\n\n const defaultSlides: Slide[] = [\n {\n image: \"/images/placeholder.png\",\n title: t(\"slides.0.title\"),\n description: t(\"slides.0.description\"),\n primaryButton: { text: t(\"slides.0.primaryButton\"), link: \"/get-started\" },\n secondaryButton: { text: t(\"slides.0.secondaryButton\"), link: \"/learn-more\" },\n },\n {\n image: \"/images/placeholder.png\",\n title: t(\"slides.1.title\"),\n description: t(\"slides.1.description\"),\n primaryButton: { text: t(\"slides.1.primaryButton\"), link: \"/features\" },\n },\n {\n image: \"/images/placeholder.png\",\n title: t(\"slides.2.title\"),\n description: t(\"slides.2.description\"),\n primaryButton: { text: t(\"slides.2.primaryButton\"), link: \"/contact\" },\n secondaryButton: { text: t(\"slides.2.secondaryButton\"), link: \"/demo\" },\n },\n ];\n\n const displaySlides = slides ?? defaultSlides;\n\n const goToSlide = useCallback((index: number) => {\n setCurrentSlide(index);\n }, []);\n\n const nextSlide = useCallback(() => {\n setCurrentSlide((prev) => (prev + 1) % displaySlides.length);\n }, [displaySlides.length]);\n\n const prevSlide = useCallback(() => {\n setCurrentSlide((prev) => (prev - 1 + displaySlides.length) % displaySlides.length);\n }, [displaySlides.length]);\n\n // Auto-play\n useEffect(() => {\n if (!autoPlay || isPaused) return;\n\n const timer = setInterval(nextSlide, interval);\n return () => clearInterval(timer);\n }, [autoPlay, interval, isPaused, nextSlide]);\n\n // Mouse drag handlers\n const handleMouseDown = (e: React.MouseEvent) => {\n setIsDragging(true);\n setDragStart(e.clientX);\n };\n\n const handleMouseMove = (e: React.MouseEvent) => {\n if (!isDragging || dragStart === null) return;\n e.preventDefault();\n };\n\n const handleMouseUp = (e: React.MouseEvent) => {\n if (!isDragging || dragStart === null) {\n setIsDragging(false);\n return;\n }\n\n const diff = dragStart - e.clientX;\n\n if (Math.abs(diff) > 50) {\n if (diff > 0) {\n nextSlide();\n } else {\n prevSlide();\n }\n }\n\n setIsDragging(false);\n setDragStart(null);\n };\n\n const handleMouseLeave = () => {\n if (isDragging) {\n setIsDragging(false);\n setDragStart(null);\n }\n };\n\n // Touch handlers for swipe\n const handleTouchStart = (e: React.TouchEvent) => {\n setDragStart(e.touches[0].clientX);\n };\n\n const handleTouchEnd = (e: React.TouchEvent) => {\n if (dragStart === null) return;\n\n const touchEnd = e.changedTouches[0].clientX;\n const diff = dragStart - touchEnd;\n\n if (Math.abs(diff) > 50) {\n if (diff > 0) {\n nextSlide();\n } else {\n prevSlide();\n }\n }\n\n setDragStart(null);\n };\n\n // Wheel handler for trackpad two-finger swipe\n const handleWheel = useCallback((e: WheelEvent) => {\n // Only handle horizontal scroll (trackpad two-finger swipe)\n if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 30) {\n e.preventDefault();\n if (e.deltaX > 0) {\n nextSlide();\n } else {\n prevSlide();\n }\n }\n }, [nextSlide, prevSlide]);\n\n // Add wheel event listener\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n let lastWheelTime = 0;\n const throttledWheel = (e: WheelEvent) => {\n const now = Date.now();\n if (now - lastWheelTime > 500) {\n handleWheel(e);\n lastWheelTime = now;\n }\n };\n\n container.addEventListener(\"wheel\", throttledWheel, { passive: false });\n return () => container.removeEventListener(\"wheel\", throttledWheel);\n }, [handleWheel]);\n\n return (\n <section\n ref={containerRef}\n className={cn(\n \"relative w-full h-[500px] md:h-[600px] lg:h-[700px] overflow-hidden select-none\",\n isDragging ? \"cursor-grabbing\" : \"cursor-grab\",\n className\n )}\n onMouseEnter={() => pauseOnHover && setIsPaused(true)}\n onMouseLeave={() => {\n pauseOnHover && setIsPaused(false);\n handleMouseLeave();\n }}\n onMouseDown={handleMouseDown}\n onMouseMove={handleMouseMove}\n onMouseUp={handleMouseUp}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n >\n {/* Slides */}\n {displaySlides.map((slide, index) => (\n <div\n key={index}\n className={cn(\n \"absolute inset-0 transition-opacity duration-700\",\n index === currentSlide ? \"opacity-100 z-10\" : \"opacity-0 z-0\"\n )}\n >\n {/* Background Image */}\n <img\n src={slide.image}\n alt={slide.title}\n className=\"absolute inset-0 w-full h-full object-cover pointer-events-none\"\n draggable={false}\n />\n\n {/* Overlay */}\n <div className=\"absolute inset-0 bg-black/50\" />\n\n {/* Content */}\n <div className=\"relative z-10 h-full flex items-center\">\n <div className=\"container max-w-[var(--container-max-width)] mx-auto px-6 md:px-24 lg:px-32\">\n <div\n className={cn(\n \"max-w-2xl transition-all duration-700 delay-200\",\n index === currentSlide\n ? \"translate-y-0 opacity-100\"\n : \"translate-y-8 opacity-0\"\n )}\n >\n <h1 className=\"text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4 md:mb-6\">\n {slide.title}\n </h1>\n <p className=\"text-lg md:text-xl text-white/90 mb-6 md:mb-8\">\n {slide.description}\n </p>\n <div className=\"flex flex-wrap gap-4\">\n {slide.primaryButton && (\n <Link to={slide.primaryButton.link}>\n <Button size=\"lg\" className=\"text-base\">\n {slide.primaryButton.text}\n </Button>\n </Link>\n )}\n {slide.secondaryButton && (\n <Link to={slide.secondaryButton.link}>\n <Button size=\"lg\" variant=\"outline\" className=\"text-base bg-white/10 border-white/30 text-white hover:bg-white/20\">\n {slide.secondaryButton.text}\n </Button>\n </Link>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n ))}\n\n {/* Navigation Arrows */}\n {showArrows && (\n <>\n <button\n onClick={prevSlide}\n className=\"absolute left-4 top-1/2 -translate-y-1/2 z-20 w-12 h-12 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-white/30 transition-colors\"\n aria-label=\"Previous slide\"\n >\n <ChevronLeft className=\"w-6 h-6\" />\n </button>\n <button\n onClick={nextSlide}\n className=\"absolute right-4 top-1/2 -translate-y-1/2 z-20 w-12 h-12 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-white/30 transition-colors\"\n aria-label=\"Next slide\"\n >\n <ChevronRight className=\"w-6 h-6\" />\n </button>\n </>\n )}\n\n {/* Dots */}\n {showDots && (\n <div className=\"absolute bottom-6 left-1/2 -translate-x-1/2 z-20 flex gap-2\">\n {displaySlides.map((_, index) => (\n <button\n key={index}\n onClick={() => goToSlide(index)}\n className={cn(\n \"w-3 h-3 rounded-full transition-all duration-300\",\n index === currentSlide\n ? \"bg-white w-8\"\n : \"bg-white/50 hover:bg-white/70\"\n )}\n aria-label={`Go to slide ${index + 1}`}\n />\n ))}\n </div>\n )}\n </section>\n );\n}\n"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"path": "hero-carousel/index.ts",
|
|
22
|
+
"type": "registry:index",
|
|
23
|
+
"target": "$modules$/hero-carousel/index.ts",
|
|
24
|
+
"content": "export * from \"./hero-carousel\";\r\n"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"path": "hero-carousel/lang/en.json",
|
|
28
|
+
"type": "registry:lang",
|
|
29
|
+
"target": "$modules$/hero-carousel/lang/en.json",
|
|
30
|
+
"content": "{\r\n \"slides\": [\r\n {\r\n \"title\": \"Build Something Amazing\",\r\n \"description\": \"Ask Promake to customize these slides based on your brand message and call-to-action.\",\r\n \"primaryButton\": \"Get Started\",\r\n \"secondaryButton\": \"Learn More\"\r\n },\r\n {\r\n \"title\": \"Powerful Features\",\r\n \"description\": \"Discover tools and features that help you achieve more with less effort.\",\r\n \"primaryButton\": \"Explore Features\"\r\n },\r\n {\r\n \"title\": \"Ready to Transform?\",\r\n \"description\": \"Join thousands of satisfied customers who have already made the switch.\",\r\n \"primaryButton\": \"Contact Us\",\r\n \"secondaryButton\": \"See Demo\"\r\n }\r\n ]\r\n}\r\n"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"path": "hero-carousel/lang/tr.json",
|
|
34
|
+
"type": "registry:lang",
|
|
35
|
+
"target": "$modules$/hero-carousel/lang/tr.json",
|
|
36
|
+
"content": "{\r\n \"slides\": [\r\n {\r\n \"title\": \"Harika Bir Şey İnşa Edin\",\r\n \"description\": \"Bu slaytları marka mesajınıza ve eylem çağrınıza göre özelleştirmek için Promake'e sorun.\",\r\n \"primaryButton\": \"Başlayın\",\r\n \"secondaryButton\": \"Daha Fazla Bilgi\"\r\n },\r\n {\r\n \"title\": \"Güçlü Özellikler\",\r\n \"description\": \"Daha az çabayla daha fazlasını başarmanıza yardımcı olan araçları ve özellikleri keşfedin.\",\r\n \"primaryButton\": \"Özellikleri Keşfet\"\r\n },\r\n {\r\n \"title\": \"Dönüşüme Hazır mısınız?\",\r\n \"description\": \"Geçiş yapan binlerce memnun müşteriye katılın.\",\r\n \"primaryButton\": \"Bize Ulaşın\",\r\n \"secondaryButton\": \"Demo İzle\"\r\n }\r\n ]\r\n}\r\n"
|
|
37
|
+
}
|
|
38
|
+
],
|
|
39
|
+
"exports": {
|
|
40
|
+
"types": [],
|
|
41
|
+
"variables": [
|
|
42
|
+
"HeroCarousel"
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
}
|
|
@@ -18,13 +18,13 @@
|
|
|
18
18
|
"path": "hero-cta/hero-cta.tsx",
|
|
19
19
|
"type": "registry:component",
|
|
20
20
|
"target": "$modules$/hero-cta/hero-cta.tsx",
|
|
21
|
-
"content": "import { Link } from \"react-router\";\r\nimport { ArrowRight, Star } from \"lucide-react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Avatar, AvatarImage, AvatarFallback } from \"@/components/ui/avatar\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ninterface HeroCtaProps {\r\n className?: string;\r\n}\r\n\r\nexport function HeroCta({ className }: HeroCtaProps) {\r\n const { t } = useTranslation(\"hero-cta\");\r\n\r\n const avatars = [\r\n { src: \"/images/placeholder.png\", alt: \"User 1\", fallback: \"U1\" },\r\n { src: \"/images/placeholder.png\", alt: \"User 2\", fallback: \"U2\" },\r\n { src: \"/images/placeholder.png\", alt: \"User 3\", fallback: \"U3\" },\r\n { src: \"/images/placeholder.png\", alt: \"User 4\", fallback: \"U4\" },\r\n { src: \"/images/placeholder.png\", alt: \"User 5\", fallback: \"U5\" },\r\n ];\r\n\r\n return (\r\n <section className={cn(\"py-
|
|
21
|
+
"content": "import { Link } from \"react-router\";\r\nimport { ArrowRight, Star } from \"lucide-react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Avatar, AvatarImage, AvatarFallback } from \"@/components/ui/avatar\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ninterface HeroCtaProps {\r\n className?: string;\r\n}\r\n\r\nexport function HeroCta({ className }: HeroCtaProps) {\r\n const { t } = useTranslation(\"hero-cta\");\r\n\r\n const avatars = [\r\n { src: \"/images/placeholder.png\", alt: \"User 1\", fallback: \"U1\" },\r\n { src: \"/images/placeholder.png\", alt: \"User 2\", fallback: \"U2\" },\r\n { src: \"/images/placeholder.png\", alt: \"User 3\", fallback: \"U3\" },\r\n { src: \"/images/placeholder.png\", alt: \"User 4\", fallback: \"U4\" },\r\n { src: \"/images/placeholder.png\", alt: \"User 5\", fallback: \"U5\" },\r\n ];\r\n\r\n return (\r\n <section className={cn(\"py-8 md:py-12 lg:py-26\", className)}>\r\n <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\r\n <div className=\"grid items-center gap-10 lg:grid-cols-2 lg:gap-16\">\r\n {/* Content Column */}\r\n <div className=\"flex flex-col items-center text-center lg:items-start lg:text-left\">\r\n <h1 className=\"mb-6 text-2xl font-bold text-pretty sm:text-3xl lg:text-4xl xl:text-5xl leading-tight\">\r\n {t(\"heading\")}\r\n </h1>\r\n <p className=\"mb-8 max-w-xl text-muted-foreground text-base lg:text-lg\">\r\n {t(\"description\")}\r\n </p>\r\n\r\n {/* Social Proof */}\r\n <div className=\"mb-10 flex flex-col items-center gap-4 sm:flex-row lg:items-start\">\r\n <div className=\"flex -space-x-3\">\r\n {avatars.map((avatar, index) => (\r\n <Avatar key={index} className=\"h-10 w-10 border-2 border-background\">\r\n <AvatarImage src={avatar.src} alt={avatar.alt} />\r\n <AvatarFallback className=\"text-xs\">{avatar.fallback}</AvatarFallback>\r\n </Avatar>\r\n ))}\r\n </div>\r\n <div>\r\n <div className=\"flex items-center gap-1\">\r\n {[...Array(5)].map((_, index) => (\r\n <Star\r\n key={index}\r\n className=\"h-4 w-4 fill-yellow-400 text-yellow-400\"\r\n />\r\n ))}\r\n <span className=\"ml-1 font-semibold text-sm\">5.0</span>\r\n </div>\r\n <p className=\"text-sm text-muted-foreground\">\r\n {t(\"reviews\")}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n {/* CTA Buttons */}\r\n <div className=\"flex w-full flex-col gap-3 sm:flex-row sm:w-auto\">\r\n <Button asChild size=\"lg\" className=\"w-full sm:w-auto\">\r\n <Link to=\"/register\">\r\n {t(\"primaryCta\")}\r\n </Link>\r\n </Button>\r\n <Button asChild variant=\"outline\" size=\"lg\" className=\"w-full sm:w-auto\">\r\n <Link to=\"/about\">\r\n {t(\"secondaryCta\")}\r\n <ArrowRight className=\"ml-2 h-4 w-4\" />\r\n </Link>\r\n </Button>\r\n </div>\r\n </div>\r\n\r\n {/* Image Column */}\r\n <div className=\"relative order-first lg:order-last\">\r\n <div className=\"aspect-[4/3] overflow-hidden rounded-2xl bg-muted\">\r\n <img\r\n src=\"/images/placeholder.png\"\r\n alt={t(\"imageAlt\")}\r\n className=\"h-full w-full object-cover\"\r\n onError={(e) => {\r\n e.currentTarget.style.display = \"none\";\r\n }}\r\n />\r\n </div>\r\n {/* Decorative gradient blur */}\r\n <div className=\"absolute -z-10 -bottom-4 -right-4 h-72 w-72 rounded-full bg-primary/20 blur-3xl\" />\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n );\r\n}\r\n"
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
24
|
"path": "hero-cta/lang/en.json",
|
|
25
25
|
"type": "registry:lang",
|
|
26
26
|
"target": "$modules$/hero-cta/lang/en.json",
|
|
27
|
-
"content": "{\r\n \"heading\": \"
|
|
27
|
+
"content": "{\r\n \"heading\": \"Ask Promake to customize this hero heading based on your site\",\r\n \"description\": \"This is where your hero section description will appear. Ask Promake to replace this text with content relevant to your industry and services. Lorem ipsum dolor sit amet.\",\r\n \"reviews\": \"Ask Promake to customize this review count\",\r\n \"primaryCta\": \"Get Started\",\r\n \"secondaryCta\": \"Learn More\",\r\n \"imageAlt\": \"Hero image\"\r\n}\r\n"
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
"path": "hero-cta/lang/tr.json",
|
|
@@ -16,13 +16,13 @@
|
|
|
16
16
|
"path": "hero-gradient/hero-gradient.tsx",
|
|
17
17
|
"type": "registry:component",
|
|
18
18
|
"target": "$modules$/hero-gradient/hero-gradient.tsx",
|
|
19
|
-
"content": "import { Link } from \"react-router\";\r\nimport { ArrowRight } from \"lucide-react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ninterface HeroGradientProps {\r\n className?: string;\r\n}\r\n\r\nexport function HeroGradient({ className }: HeroGradientProps) {\r\n const { t } = useTranslation(\"hero-gradient\");\r\n\r\n return (\r\n <section\r\n className={cn(\r\n \"relative min-h-[70vh] flex items-center justify-center overflow-hidden\",\r\n className\r\n )}\r\n >\r\n {/* Gradient Background */}\r\n <div className=\"absolute inset-0 bg-gradient-to-br from-primary/20 via-background to-primary/10\" />\r\n\r\n {/* Animated gradient orbs */}\r\n <div className=\"absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-primary/30 blur-3xl animate-pulse\" />\r\n <div className=\"absolute bottom-1/4 right-1/4 h-80 w-80 rounded-full bg-primary/20 blur-3xl animate-pulse delay-700\" />\r\n\r\n {/* Grid pattern overlay */}\r\n <div className=\"absolute inset-0 bg-[linear-gradient(to_right,hsl(var(--border)/0.1)_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--border)/0.1)_1px,transparent_1px)] bg-[size:4rem_4rem]\" />\r\n\r\n {/* Content */}\r\n <div className=\"container mx-auto px-4 relative z-10\">\r\n <div className=\"max-w-4xl mx-auto text-center\">\r\n {/* Badge */}\r\n <div className=\"inline-flex items-center gap-2 rounded-full border border-border/50 bg-background/50 backdrop-blur-sm px-4 py-1.5 text-sm mb-8\">\r\n <span className=\"relative flex h-2 w-2\">\r\n <span className=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75\" />\r\n <span className=\"relative inline-flex rounded-full h-2 w-2 bg-primary\" />\r\n </span>\r\n {t(\"badge\", \"New features available\")}\r\n </div>\r\n\r\n {/* Heading */}\r\n <h1 className=\"text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6 leading-tight\">\r\n {t(\"headingLine1\", \"Transform your ideas\")}\r\n <br />\r\n <span className=\"bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent\">\r\n {t(\"headingLine2\", \"into reality\")}\r\n </span>\r\n </h1>\r\n\r\n {/* Description */}\r\n <p className=\"text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10\">\r\n {t(\"description\", \"A powerful platform that helps you build, deploy, and scale your applications with ease. Start your journey today.\")}\r\n </p>\r\n\r\n {/* CTA Buttons */}\r\n <div className=\"flex flex-col sm:flex-row gap-4 justify-center\">\r\n <Button asChild size=\"lg\" className=\"text-base px-8\">\r\n <Link to=\"/register\">\r\n {t(\"primaryCta\", \"Start Building\")}\r\n <ArrowRight className=\"ml-2 h-4 w-4\" />\r\n </Link>\r\n </Button>\r\n <Button asChild variant=\"outline\" size=\"lg\" className=\"text-base px-8\">\r\n <Link to=\"/contact\">\r\n {t(\"secondaryCta\", \"Contact Sales\")}\r\n </Link>\r\n </Button>\r\n </div>\r\n\r\n {/* Trust badges */}\r\n <div className=\"mt-12 flex flex-wrap items-center justify-center gap-8 text-muted-foreground\">\r\n <div className=\"flex items-center gap-2\">\r\n <span className=\"text-2xl font-bold text-foreground\">10K+</span>\r\n <span className=\"text-sm\">{t(\"users\", \"Active Users\")}</span>\r\n </div>\r\n <div className=\"h-8 w-px bg-border hidden sm:block\" />\r\n <div className=\"flex items-center gap-2\">\r\n <span className=\"text-2xl font-bold text-foreground\">99.9%</span>\r\n <span className=\"text-sm\">{t(\"uptime\", \"Uptime\")}</span>\r\n </div>\r\n <div className=\"h-8 w-px bg-border hidden sm:block\" />\r\n <div className=\"flex items-center gap-2\">\r\n <span className=\"text-2xl font-bold text-foreground\">24/7</span>\r\n <span className=\"text-sm\">{t(\"support\", \"Support\")}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n );\r\n}\r\n"
|
|
19
|
+
"content": "import { Link } from \"react-router\";\r\nimport { ArrowRight } from \"lucide-react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ninterface HeroGradientProps {\r\n className?: string;\r\n}\r\n\r\nexport function HeroGradient({ className }: HeroGradientProps) {\r\n const { t } = useTranslation(\"hero-gradient\");\r\n\r\n return (\r\n <section\r\n className={cn(\r\n \"relative min-h-[70vh] flex items-center justify-center overflow-hidden\",\r\n className\r\n )}\r\n >\r\n {/* Gradient Background */}\r\n <div className=\"absolute inset-0 bg-gradient-to-br from-primary/20 via-background to-primary/10\" />\r\n\r\n {/* Animated gradient orbs */}\r\n <div className=\"absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-primary/30 blur-3xl animate-pulse\" />\r\n <div className=\"absolute bottom-1/4 right-1/4 h-80 w-80 rounded-full bg-primary/20 blur-3xl animate-pulse delay-700\" />\r\n\r\n {/* Grid pattern overlay */}\r\n <div className=\"absolute inset-0 bg-[linear-gradient(to_right,hsl(var(--border)/0.1)_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--border)/0.1)_1px,transparent_1px)] bg-[size:4rem_4rem]\" />\r\n\r\n {/* Content */}\r\n <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 relative z-10\">\r\n <div className=\"max-w-4xl mx-auto text-center\">\r\n {/* Badge */}\r\n <div className=\"inline-flex items-center gap-2 rounded-full border border-border/50 bg-background/50 backdrop-blur-sm px-4 py-1.5 text-sm mb-8\">\r\n <span className=\"relative flex h-2 w-2\">\r\n <span className=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75\" />\r\n <span className=\"relative inline-flex rounded-full h-2 w-2 bg-primary\" />\r\n </span>\r\n {t(\"badge\", \"New features available\")}\r\n </div>\r\n\r\n {/* Heading */}\r\n <h1 className=\"text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6 leading-tight\">\r\n {t(\"headingLine1\", \"Transform your ideas\")}\r\n <br />\r\n <span className=\"bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent\">\r\n {t(\"headingLine2\", \"into reality\")}\r\n </span>\r\n </h1>\r\n\r\n {/* Description */}\r\n <p className=\"text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10\">\r\n {t(\"description\", \"A powerful platform that helps you build, deploy, and scale your applications with ease. Start your journey today.\")}\r\n </p>\r\n\r\n {/* CTA Buttons */}\r\n <div className=\"flex flex-col sm:flex-row gap-4 justify-center\">\r\n <Button asChild size=\"lg\" className=\"text-base px-8\">\r\n <Link to=\"/register\">\r\n {t(\"primaryCta\", \"Start Building\")}\r\n <ArrowRight className=\"ml-2 h-4 w-4\" />\r\n </Link>\r\n </Button>\r\n <Button asChild variant=\"outline\" size=\"lg\" className=\"text-base px-8\">\r\n <Link to=\"/contact\">\r\n {t(\"secondaryCta\", \"Contact Sales\")}\r\n </Link>\r\n </Button>\r\n </div>\r\n\r\n {/* Trust badges */}\r\n <div className=\"mt-12 flex flex-wrap items-center justify-center gap-8 text-muted-foreground\">\r\n <div className=\"flex items-center gap-2\">\r\n <span className=\"text-2xl font-bold text-foreground\">10K+</span>\r\n <span className=\"text-sm\">{t(\"users\", \"Active Users\")}</span>\r\n </div>\r\n <div className=\"h-8 w-px bg-border hidden sm:block\" />\r\n <div className=\"flex items-center gap-2\">\r\n <span className=\"text-2xl font-bold text-foreground\">99.9%</span>\r\n <span className=\"text-sm\">{t(\"uptime\", \"Uptime\")}</span>\r\n </div>\r\n <div className=\"h-8 w-px bg-border hidden sm:block\" />\r\n <div className=\"flex items-center gap-2\">\r\n <span className=\"text-2xl font-bold text-foreground\">24/7</span>\r\n <span className=\"text-sm\">{t(\"support\", \"Support\")}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n );\r\n}\r\n"
|
|
20
20
|
},
|
|
21
21
|
{
|
|
22
22
|
"path": "hero-gradient/lang/en.json",
|
|
23
23
|
"type": "registry:lang",
|
|
24
24
|
"target": "$modules$/hero-gradient/lang/en.json",
|
|
25
|
-
"content": "{\r\n \"badge\": \"
|
|
25
|
+
"content": "{\r\n \"badge\": \"Ask Promake to customize this badge text\",\r\n \"headingLine1\": \"Ask Promake to replace this heading\",\r\n \"headingLine2\": \"with your site headline\",\r\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ask Promake to customize this description based on your site and audience. Sed do eiusmod tempor incididunt ut labore.\",\r\n \"primaryCta\": \"Get Started\",\r\n \"secondaryCta\": \"Contact Sales\",\r\n \"users\": \"Active Users\",\r\n \"uptime\": \"Uptime\",\r\n \"support\": \"Support\"\r\n}\r\n"
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
28
|
"path": "hero-gradient/lang/tr.json",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"path": "hero-profile/hero-profile.tsx",
|
|
20
20
|
"type": "registry:component",
|
|
21
21
|
"target": "$modules$/hero-profile/hero-profile.tsx",
|
|
22
|
-
"content": "import { useTranslation } from \"react-i18next\";\nimport { Facebook, Linkedin, Twitter, Github, Instagram } from \"lucide-react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nconst socialLinks = [\n { icon: Facebook, href: \"#\", label: \"Facebook\" },\n { icon: Twitter, href: \"#\", label: \"Twitter\" },\n { icon: Linkedin, href: \"#\", label: \"LinkedIn\" },\n { icon: Github, href: \"#\", label: \"GitHub\" },\n { icon: Instagram, href: \"#\", label: \"Instagram\" },\n];\n\nexport function HeroProfile() {\n const { t } = useTranslation(\"hero-profile\");\n const companies = [\"Walmart\", \"LinkedIn\", \"Google\", \"Slack\", \"Amazon\"];\n\n return (\n <section className=\"relative min-h-[80vh] flex items-center overflow-hidden\">\n {/* Background */}\n <div className=\"absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-primary/10\" />\n\n {/* Content */}\n <div className=\"container mx-auto px-4 relative z-10 py-12\">\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n {/* Left Column - Profile Card */}\n <motion.div\n initial={{ opacity: 0, x: -50 }}\n animate={{ opacity: 1, x: 0 }}\n transition={{ duration: 0.6, ease: \"easeOut\" }}\n className=\"lg:col-span-1 flex\"\n >\n <div className=\"bg-card/80 backdrop-blur-lg rounded-3xl p-6 md:p-8 text-center space-y-6 border border-border/50 shadow-xl flex flex-col justify-center w-full\">\n {/* Profile Image */}\n <motion.div\n initial={{ scale: 0.8, opacity: 0 }}\n animate={{ scale: 1, opacity: 1 }}\n transition={{ duration: 0.5, delay: 0.2 }}\n className=\"relative mx-auto w-40 h-40 sm:w-48 sm:h-48\"\n >\n <div className=\"absolute inset-0 bg-gradient-to-br from-primary to-primary/50 rounded-full blur-xl opacity-30 animate-pulse\" />\n <img\n src=\"/images/placeholder.png\"\n alt={t(\"name\")}\n className=\"relative w-full h-full object-cover object-center rounded-full border-4 border-primary/20 shadow-lg\"\n onError={(e) => {\n e.currentTarget.style.display = \"none\";\n }}\n />\n </motion.div>\n\n {/* Name and Bio */}\n <motion.div\n initial={{ opacity: 0, y: 20 }}\n animate={{ opacity: 1, y: 0 }}\n transition={{ duration: 0.5, delay: 0.3 }}\n className=\"space-y-2\"\n >\n <h1 className=\"text-2xl sm:text-3xl font-bold\">{t(\"name\")}</h1>\n <p className=\"text-muted-foreground\">{t(\"bio\")}</p>\n </motion.div>\n\n {/* Social Media Icons */}\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={{ duration: 0.5, delay: 0.4 }}\n className=\"flex justify-center gap-2\"\n >\n {socialLinks.slice(0, 4).map((social, index) => {\n const Icon = social.icon;\n return (\n <motion.a\n key={social.label}\n href={social.href}\n initial={{ scale: 0 }}\n animate={{ scale: 1 }}\n transition={{ duration: 0.3, delay: 0.5 + index * 0.1 }}\n whileHover={{ scale: 1.1, y: -2 }}\n whileTap={{ scale: 0.95 }}\n className={cn(\n \"w-10 h-10 rounded-full flex items-center justify-center\",\n \"bg-muted/50 text-muted-foreground\",\n \"hover:bg-primary hover:text-primary-foreground\",\n \"transition-colors duration-300 shadow-sm\"\n )}\n >\n <Icon className=\"w-4 h-4\" />\n </motion.a>\n );\n })}\n </motion.div>\n </div>\n </motion.div>\n\n {/* Right Column - Two Cards */}\n <div className=\"lg:col-span-2 flex flex-col gap-6\">\n {/* Top Card - Introduction */}\n <motion.div\n initial={{ opacity: 0, y: 30 }}\n animate={{ opacity: 1, y: 0 }}\n transition={{ duration: 0.6, delay: 0.2 }}\n className=\"bg-card/80 backdrop-blur-lg rounded-3xl p-6 md:p-8 border border-border/50 shadow-xl flex-1 flex flex-col justify-center\"\n >\n <div className=\"space-y-4\">\n <motion.p\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={{ delay: 0.4 }}\n className=\"text-sm text-muted-foreground\"\n >\n {t(\"greeting\")}\n </motion.p>\n\n <motion.h2\n initial={{ opacity: 0, y: 20 }}\n animate={{ opacity: 1, y: 0 }}\n transition={{ delay: 0.5 }}\n className=\"text-2xl sm:text-3xl lg:text-4xl font-bold leading-tight\"\n >\n {t(\"intro\")}\n </motion.h2>\n\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={{ delay: 0.6 }}\n className=\"flex items-center gap-2\"\n >\n <span className=\"inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full text-sm font-medium text-primary\">\n <span className=\"w-2 h-2 bg-green-500 rounded-full animate-pulse\" />\n {t(\"freelancing\")}\n </span>\n </motion.div>\n </div>\n </motion.div>\n\n {/* Bottom Card - Companies Marquee */}\n <motion.div\n initial={{ opacity: 0, y: 30 }}\n animate={{ opacity: 1, y: 0 }}\n transition={{ duration: 0.6, delay: 0.4 }}\n className=\"bg-card/80 backdrop-blur-lg rounded-3xl p-6 md:p-8 border border-border/50 shadow-xl overflow-hidden flex-1 flex flex-col justify-center\"\n >\n <h3 className=\"text-lg font-semibold mb-6\">\n {t(\"companiesTitle\")}\n </h3>\n\n <div className=\"relative overflow-hidden\">\n {/* Gradient masks */}\n <div className=\"absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-card to-transparent z-10\" />\n <div className=\"absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-card to-transparent z-10\" />\n\n {/* Scrolling container */}\n <motion.div\n animate={{ x: [0, -1000] }}\n transition={{\n x: {\n repeat: Infinity,\n repeatType: \"loop\",\n duration: 20,\n ease: \"linear\",\n },\n }}\n className=\"flex gap-16 whitespace-nowrap\"\n >\n {[...companies, ...companies, ...companies].map(\n (company, index) => (\n <div\n key={index}\n className=\"text-xl font-bold text-muted-foreground/70 hover:text-foreground transition-colors\"\n >\n {company}\n </div>\n )\n )}\n </motion.div>\n </div>\n </motion.div>\n </div>\n </div>\n </div>\n </section>\n );\n}\n"
|
|
22
|
+
"content": "import { useTranslation } from \"react-i18next\";\nimport { Facebook, Linkedin, Twitter, Github, Instagram } from \"lucide-react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nconst socialLinks = [\n { icon: Facebook, href: \"#\", label: \"Facebook\" },\n { icon: Twitter, href: \"#\", label: \"Twitter\" },\n { icon: Linkedin, href: \"#\", label: \"LinkedIn\" },\n { icon: Github, href: \"#\", label: \"GitHub\" },\n { icon: Instagram, href: \"#\", label: \"Instagram\" },\n];\n\nexport function HeroProfile() {\n const { t } = useTranslation(\"hero-profile\");\n const companies = [\"Walmart\", \"LinkedIn\", \"Google\", \"Slack\", \"Amazon\"];\n\n return (\n <section className=\"relative min-h-[80vh] flex items-center overflow-hidden\">\n {/* Background */}\n <div className=\"absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-primary/10\" />\n\n {/* Content */}\n <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 relative z-10 py-12\">\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n {/* Left Column - Profile Card */}\n <motion.div\n initial={{ opacity: 0, x: -50 }}\n animate={{ opacity: 1, x: 0 }}\n transition={{ duration: 0.6, ease: \"easeOut\" }}\n className=\"lg:col-span-1 flex\"\n >\n <div className=\"bg-card/80 backdrop-blur-lg rounded-3xl p-6 md:p-8 text-center space-y-6 border border-border/50 shadow-xl flex flex-col justify-center w-full\">\n {/* Profile Image */}\n <motion.div\n initial={{ scale: 0.8, opacity: 0 }}\n animate={{ scale: 1, opacity: 1 }}\n transition={{ duration: 0.5, delay: 0.2 }}\n className=\"relative mx-auto w-40 h-40 sm:w-48 sm:h-48\"\n >\n <div className=\"absolute inset-0 bg-gradient-to-br from-primary to-primary/50 rounded-full blur-xl opacity-30 animate-pulse\" />\n <img\n src=\"/images/placeholder.png\"\n alt={t(\"name\")}\n className=\"relative w-full h-full object-cover object-center rounded-full border-4 border-primary/20 shadow-lg\"\n onError={(e) => {\n e.currentTarget.style.display = \"none\";\n }}\n />\n </motion.div>\n\n {/* Name and Bio */}\n <motion.div\n initial={{ opacity: 0, y: 20 }}\n animate={{ opacity: 1, y: 0 }}\n transition={{ duration: 0.5, delay: 0.3 }}\n className=\"space-y-2\"\n >\n <h1 className=\"text-2xl sm:text-3xl font-bold\">{t(\"name\")}</h1>\n <p className=\"text-muted-foreground\">{t(\"bio\")}</p>\n </motion.div>\n\n {/* Social Media Icons */}\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={{ duration: 0.5, delay: 0.4 }}\n className=\"flex justify-center gap-2\"\n >\n {socialLinks.slice(0, 4).map((social, index) => {\n const Icon = social.icon;\n return (\n <motion.a\n key={social.label}\n href={social.href}\n initial={{ scale: 0 }}\n animate={{ scale: 1 }}\n transition={{ duration: 0.3, delay: 0.5 + index * 0.1 }}\n whileHover={{ scale: 1.1, y: -2 }}\n whileTap={{ scale: 0.95 }}\n className={cn(\n \"w-10 h-10 rounded-full flex items-center justify-center\",\n \"bg-muted/50 text-muted-foreground\",\n \"hover:bg-primary hover:text-primary-foreground\",\n \"transition-colors duration-300 shadow-sm\"\n )}\n >\n <Icon className=\"w-4 h-4\" />\n </motion.a>\n );\n })}\n </motion.div>\n </div>\n </motion.div>\n\n {/* Right Column - Two Cards */}\n <div className=\"lg:col-span-2 flex flex-col gap-6\">\n {/* Top Card - Introduction */}\n <motion.div\n initial={{ opacity: 0, y: 30 }}\n animate={{ opacity: 1, y: 0 }}\n transition={{ duration: 0.6, delay: 0.2 }}\n className=\"bg-card/80 backdrop-blur-lg rounded-3xl p-6 md:p-8 border border-border/50 shadow-xl flex-1 flex flex-col justify-center\"\n >\n <div className=\"space-y-4\">\n <motion.p\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={{ delay: 0.4 }}\n className=\"text-sm text-muted-foreground\"\n >\n {t(\"greeting\")}\n </motion.p>\n\n <motion.h2\n initial={{ opacity: 0, y: 20 }}\n animate={{ opacity: 1, y: 0 }}\n transition={{ delay: 0.5 }}\n className=\"text-2xl sm:text-3xl lg:text-4xl font-bold leading-tight\"\n >\n {t(\"intro\")}\n </motion.h2>\n\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={{ delay: 0.6 }}\n className=\"flex items-center gap-2\"\n >\n <span className=\"inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full text-sm font-medium text-primary\">\n <span className=\"w-2 h-2 bg-green-500 rounded-full animate-pulse\" />\n {t(\"freelancing\")}\n </span>\n </motion.div>\n </div>\n </motion.div>\n\n {/* Bottom Card - Companies Marquee */}\n <motion.div\n initial={{ opacity: 0, y: 30 }}\n animate={{ opacity: 1, y: 0 }}\n transition={{ duration: 0.6, delay: 0.4 }}\n className=\"bg-card/80 backdrop-blur-lg rounded-3xl p-6 md:p-8 border border-border/50 shadow-xl overflow-hidden flex-1 flex flex-col justify-center\"\n >\n <h3 className=\"text-lg font-semibold mb-6\">\n {t(\"companiesTitle\")}\n </h3>\n\n <div className=\"relative overflow-hidden\">\n {/* Gradient masks */}\n <div className=\"absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-card to-transparent z-10\" />\n <div className=\"absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-card to-transparent z-10\" />\n\n {/* Scrolling container */}\n <motion.div\n animate={{ x: [0, -1000] }}\n transition={{\n x: {\n repeat: Infinity,\n repeatType: \"loop\",\n duration: 20,\n ease: \"linear\",\n },\n }}\n className=\"flex gap-16 whitespace-nowrap\"\n >\n {[...companies, ...companies, ...companies].map(\n (company, index) => (\n <div\n key={index}\n className=\"text-xl font-bold text-muted-foreground/70 hover:text-foreground transition-colors\"\n >\n {company}\n </div>\n )\n )}\n </motion.div>\n </div>\n </motion.div>\n </div>\n </div>\n </div>\n </section>\n );\n}\n"
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
25
|
"path": "hero-profile/lang/en.json",
|
package/dist/registry/hero.json
CHANGED
|
@@ -16,13 +16,13 @@
|
|
|
16
16
|
"path": "hero/hero.tsx",
|
|
17
17
|
"type": "registry:component",
|
|
18
18
|
"target": "$modules$/hero/hero.tsx",
|
|
19
|
-
"content": "import { useTranslation } from \"react-i18next\";\n\nexport function Hero() {\n const { t } = useTranslation(\"hero\");\n\n return (\n <section className=\"relative min-h-[60vh] flex items-center overflow-hidden bg-gradient-to-br from-background via-muted/10 to-background\">\n {/* Background Image */}\n <div className=\"absolute inset-0\">\n {/* Background image will be placed here */}\n <img\n src=\"/images/placeholder.png\"\n alt=\"Hero Background\"\n className=\"w-full h-full object-cover\"\n onError={(e) => {\n // Hide broken image and keep gradient background\n e.currentTarget.style.display = \"none\";\n }}\n />\n\n {/* Dark overlay for text readability */}\n <div className=\"absolute inset-0 bg-gradient-to-r from-black/60 via-black/30 to-transparent\"></div>\n\n {/* Fallback gradient background */}\n <div className=\"absolute inset-0 bg-gradient-to-r from-primary/5 via-transparent to-primary/5\"></div>\n </div>\n\n {/* Content - Left Aligned with better contrast */}\n <div className=\"container mx-auto px-4 relative z-10\">\n <div className=\"max-w-2xl\">\n {/* Main Headline */}\n <div className=\"space-y-6 mb-8\">\n <h1 className=\"text-4xl md:text-5xl lg:text-6xl font-bold leading-normal text-white drop-shadow-lg pb-1\">\n <span>{t(\"discover\", \"Discover\")} </span>\n <span className=\"bg-gradient-to-r from-primary to-primary/80 bg-clip-text text-transparent\">\n {t(\"amazing\", \"Inspiring\")}\n </span>\n <br />\n <span>{t(\"content\", \"Stories\")}</span>\n </h1>\n\n <p className=\"text-xl text-white/90 max-w-lg leading-relaxed drop-shadow-md\">\n {t(\n \"subtitle\",\n \"Dive into a world of captivating narratives, expert insights, and thought-provoking content that inspires and educates.\"\n )}\n </p>\n </div>\n </div>\n </div>\n </section>\n );\n}\n"
|
|
19
|
+
"content": "import { useTranslation } from \"react-i18next\";\n\nexport function Hero() {\n const { t } = useTranslation(\"hero\");\n\n return (\n <section className=\"relative min-h-[60vh] flex items-center overflow-hidden bg-gradient-to-br from-background via-muted/10 to-background\">\n {/* Background Image */}\n <div className=\"absolute inset-0\">\n {/* Background image will be placed here */}\n <img\n src=\"/images/placeholder.png\"\n alt=\"Hero Background\"\n className=\"w-full h-full object-cover\"\n onError={(e) => {\n // Hide broken image and keep gradient background\n e.currentTarget.style.display = \"none\";\n }}\n />\n\n {/* Dark overlay for text readability */}\n <div className=\"absolute inset-0 bg-gradient-to-r from-black/60 via-black/30 to-transparent\"></div>\n\n {/* Fallback gradient background */}\n <div className=\"absolute inset-0 bg-gradient-to-r from-primary/5 via-transparent to-primary/5\"></div>\n </div>\n\n {/* Content - Left Aligned with better contrast */}\n <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 relative z-10\">\n <div className=\"max-w-2xl\">\n {/* Main Headline */}\n <div className=\"space-y-6 mb-8\">\n <h1 className=\"text-4xl md:text-5xl lg:text-6xl font-bold leading-normal text-white drop-shadow-lg pb-1\">\n <span>{t(\"discover\", \"Discover\")} </span>\n <span className=\"bg-gradient-to-r from-primary to-primary/80 bg-clip-text text-transparent\">\n {t(\"amazing\", \"Inspiring\")}\n </span>\n <br />\n <span>{t(\"content\", \"Stories\")}</span>\n </h1>\n\n <p className=\"text-xl text-white/90 max-w-lg leading-relaxed drop-shadow-md\">\n {t(\n \"subtitle\",\n \"Dive into a world of captivating narratives, expert insights, and thought-provoking content that inspires and educates.\"\n )}\n </p>\n </div>\n </div>\n </div>\n </section>\n );\n}\n"
|
|
20
20
|
},
|
|
21
21
|
{
|
|
22
22
|
"path": "hero/lang/en.json",
|
|
23
23
|
"type": "registry:lang",
|
|
24
24
|
"target": "$modules$/hero/lang/en.json",
|
|
25
|
-
"content": "{\r\n \"discover\": \"Discover\",\r\n \"amazing\": \"Inspiring\",\r\n \"content\": \"Stories\",\r\n \"subtitle\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
25
|
+
"content": "{\r\n \"discover\": \"Discover\",\r\n \"amazing\": \"Inspiring\",\r\n \"content\": \"Stories\",\r\n \"subtitle\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ask Promake to replace this content with your actual blog description.\",\r\n \"readLatest\": \"Start Reading\",\r\n \"exploreTopics\": \"Explore Topics\"\r\n}\r\n"
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
28
|
"path": "hero/lang/tr.json",
|
package/dist/registry/index.json
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
[
|
|
2
2
|
"about-page",
|
|
3
3
|
"about-section",
|
|
4
|
+
"announcement-bar",
|
|
5
|
+
"api",
|
|
6
|
+
"auth-core",
|
|
4
7
|
"animations",
|
|
5
8
|
"bento-grid-section",
|
|
6
9
|
"blog-core",
|
|
@@ -9,8 +12,11 @@
|
|
|
9
12
|
"cards-carousel-section",
|
|
10
13
|
"cart-drawer",
|
|
11
14
|
"cart-page",
|
|
15
|
+
"case-study-page",
|
|
12
16
|
"category-section",
|
|
13
17
|
"checkout-page",
|
|
18
|
+
"coming-soon-page",
|
|
19
|
+
"coming-soon-page-minimal",
|
|
14
20
|
"contact-info-grid",
|
|
15
21
|
"contact-page",
|
|
16
22
|
"contact-page-centered",
|
|
@@ -18,8 +24,10 @@
|
|
|
18
24
|
"contact-page-map-split",
|
|
19
25
|
"contact-page-split",
|
|
20
26
|
"content-section",
|
|
27
|
+
"cookie-consent",
|
|
21
28
|
"cookies-page",
|
|
22
29
|
"cta-section",
|
|
30
|
+
"db",
|
|
23
31
|
"ecommerce-core",
|
|
24
32
|
"empty-page",
|
|
25
33
|
"faq-categorized",
|
|
@@ -31,6 +39,7 @@
|
|
|
31
39
|
"footer",
|
|
32
40
|
"footer-detailed",
|
|
33
41
|
"footer-minimal",
|
|
42
|
+
"forgot-password-page",
|
|
34
43
|
"google-map",
|
|
35
44
|
"header-centered-pill",
|
|
36
45
|
"header-ecommerce",
|
|
@@ -38,20 +47,27 @@
|
|
|
38
47
|
"header-minimal",
|
|
39
48
|
"header-simple",
|
|
40
49
|
"hero",
|
|
50
|
+
"hero-carousel",
|
|
41
51
|
"hero-cta",
|
|
42
52
|
"hero-gradient",
|
|
43
53
|
"hero-grid",
|
|
44
54
|
"hero-profile",
|
|
55
|
+
"landing-page-app",
|
|
56
|
+
"landing-page-saas",
|
|
45
57
|
"login-page",
|
|
46
58
|
"login-page-split",
|
|
59
|
+
"logo-cloud",
|
|
60
|
+
"masonry-grid",
|
|
47
61
|
"newsletter-section",
|
|
48
62
|
"order-card-compact",
|
|
49
63
|
"order-detail-block",
|
|
50
64
|
"orders-list-block",
|
|
51
65
|
"payment-success-block",
|
|
66
|
+
"portfolio-page",
|
|
52
67
|
"post-card",
|
|
53
68
|
"post-detail-block",
|
|
54
69
|
"pricing-card",
|
|
70
|
+
"pricing-page",
|
|
55
71
|
"pricing-section",
|
|
56
72
|
"privacy-page",
|
|
57
73
|
"product-card",
|
|
@@ -59,12 +75,19 @@
|
|
|
59
75
|
"product-card-hover",
|
|
60
76
|
"product-detail-block",
|
|
61
77
|
"product-detail-section",
|
|
78
|
+
"product-quick-view",
|
|
62
79
|
"products-page",
|
|
80
|
+
"reading-progress",
|
|
81
|
+
"register-page",
|
|
63
82
|
"related-posts-block",
|
|
64
83
|
"related-products-block",
|
|
65
84
|
"service-card",
|
|
85
|
+
"share-buttons",
|
|
66
86
|
"skill-card",
|
|
87
|
+
"team-page",
|
|
67
88
|
"terms-page",
|
|
68
89
|
"testimonials-carousel",
|
|
69
|
-
"testimonials-grid"
|
|
90
|
+
"testimonials-grid",
|
|
91
|
+
"timeline-section",
|
|
92
|
+
"video-hero"
|
|
70
93
|
]
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "landing-page-app",
|
|
3
|
+
"type": "registry:page",
|
|
4
|
+
"title": "Mobile App Landing Page",
|
|
5
|
+
"description": "Mobile app promotion landing page with phone mockup hero, App Store/Play Store download buttons, 4 feature cards, screenshot carousel, user reviews, and download CTA. Includes floating notification elements and FadeIn/ScaleUp animations.",
|
|
6
|
+
"registryDependencies": [
|
|
7
|
+
"animations"
|
|
8
|
+
],
|
|
9
|
+
"route": {
|
|
10
|
+
"path": "/app",
|
|
11
|
+
"componentName": "LandingPageApp"
|
|
12
|
+
},
|
|
13
|
+
"usage": "import { LandingPageApp } from '@/modules/landing-page-app';\n\n<Route path=\"/app\" element={<LandingPageApp\n appStoreUrl=\"https://apps.apple.com/...\"\n playStoreUrl=\"https://play.google.com/...\"\n/>} />\n\n• Phone mockup with floating elements\n• App Store & Play Store buttons\n• 4 feature cards\n• Screenshot carousel\n• 3 user reviews\n• Download CTA section",
|
|
14
|
+
"files": [
|
|
15
|
+
{
|
|
16
|
+
"path": "landing-page-app/index.ts",
|
|
17
|
+
"type": "registry:index",
|
|
18
|
+
"target": "$modules$/landing-page-app/index.ts",
|
|
19
|
+
"content": "export * from \"./landing-page-app\";\r\nexport { default } from \"./landing-page-app\";\r\n"
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"path": "landing-page-app/landing-page-app.tsx",
|
|
23
|
+
"type": "registry:page",
|
|
24
|
+
"target": "$modules$/landing-page-app/landing-page-app.tsx",
|
|
25
|
+
"content": "import { useTranslation } from \"react-i18next\";\nimport { usePageTitle } from \"@/hooks/use-page-title\";\nimport { Layout } from \"@/components/Layout\";\nimport {\n Star,\n Download,\n Smartphone,\n Bell,\n Lock,\n Zap,\n Heart,\n CheckCircle,\n} from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { FadeIn, StaggerContainer, StaggerItem, ScaleUp } from \"@/modules/animations\";\nimport { cn } from \"@/lib/utils\";\n\ninterface LandingPageAppProps {\n className?: string;\n appStoreUrl?: string;\n playStoreUrl?: string;\n}\n\nexport function LandingPageApp({\n className,\n appStoreUrl = \"#\",\n playStoreUrl = \"#\",\n}: LandingPageAppProps) {\n const { t } = useTranslation(\"landing-page-app\");\n usePageTitle({ title: t(\"title\") });\n\n const features = [\n { icon: Zap, title: t(\"feature1Title\"), desc: t(\"feature1Desc\") },\n { icon: Bell, title: t(\"feature2Title\"), desc: t(\"feature2Desc\") },\n { icon: Lock, title: t(\"feature3Title\"), desc: t(\"feature3Desc\") },\n { icon: Heart, title: t(\"feature4Title\"), desc: t(\"feature4Desc\") },\n ];\n\n const screenshots = [\n { src: \"/images/placeholder.png\", alt: \"App Screenshot 1\" },\n { src: \"/images/placeholder.png\", alt: \"App Screenshot 2\" },\n { src: \"/images/placeholder.png\", alt: \"App Screenshot 3\" },\n ];\n\n const reviews = [\n { name: \"Alex K.\", rating: 5, content: t(\"review1\"), date: \"2 days ago\" },\n { name: \"Maria S.\", rating: 5, content: t(\"review2\"), date: \"1 week ago\" },\n { name: \"Tom B.\", rating: 5, content: t(\"review3\"), date: \"2 weeks ago\" },\n ];\n\n return (\n <Layout>\n <div className={cn(\"min-h-screen bg-background\", className)}>\n {/* Hero Section */}\n <section className=\"relative overflow-hidden py-12 md:py-20\">\n <div className=\"absolute inset-0 bg-gradient-to-b from-primary/5 via-transparent to-transparent\" />\n <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 relative\">\n <div className=\"grid lg:grid-cols-2 gap-12 items-center\">\n {/* Content */}\n <FadeIn className=\"text-center lg:text-left\">\n <Badge variant=\"secondary\" className=\"mb-6\">\n <Smartphone className=\"h-3 w-3 mr-1\" />\n {t(\"badge\")}\n </Badge>\n <h1 className=\"text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6 leading-tight\">\n {t(\"heroTitle\")}\n </h1>\n <p className=\"text-lg md:text-xl text-muted-foreground mb-8\">\n {t(\"heroDescription\")}\n </p>\n\n {/* Download Buttons */}\n <div className=\"flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-8\">\n <a\n href={appStoreUrl}\n className=\"inline-flex items-center gap-3 px-6 py-3 bg-foreground text-background rounded-xl hover:opacity-90 transition-opacity\"\n >\n <svg className=\"h-8 w-8\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z\"/>\n </svg>\n <div className=\"text-left\">\n <div className=\"text-xs opacity-80\">{t(\"downloadOn\")}</div>\n <div className=\"text-lg font-semibold\">App Store</div>\n </div>\n </a>\n <a\n href={playStoreUrl}\n className=\"inline-flex items-center gap-3 px-6 py-3 bg-foreground text-background rounded-xl hover:opacity-90 transition-opacity\"\n >\n <svg className=\"h-8 w-8\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z\"/>\n </svg>\n <div className=\"text-left\">\n <div className=\"text-xs opacity-80\">{t(\"getItOn\")}</div>\n <div className=\"text-lg font-semibold\">Google Play</div>\n </div>\n </a>\n </div>\n\n {/* Stats */}\n <div className=\"flex flex-wrap gap-8 justify-center lg:justify-start\">\n <div className=\"text-center\">\n <div className=\"text-2xl font-bold text-foreground\">4.9</div>\n <div className=\"flex gap-0.5 justify-center\">\n {[...Array(5)].map((_, i) => (\n <Star key={i} className=\"h-4 w-4 fill-yellow-400 text-yellow-400\" />\n ))}\n </div>\n </div>\n <div className=\"text-center\">\n <div className=\"text-2xl font-bold text-foreground\">1M+</div>\n <div className=\"text-sm text-muted-foreground\">{t(\"downloads\")}</div>\n </div>\n <div className=\"text-center\">\n <div className=\"text-2xl font-bold text-foreground\">#1</div>\n <div className=\"text-sm text-muted-foreground\">{t(\"inCategory\")}</div>\n </div>\n </div>\n </FadeIn>\n\n {/* Phone Mockup */}\n <ScaleUp className=\"relative flex justify-center\">\n <div className=\"relative\">\n {/* Phone frame */}\n <div className=\"relative w-[260px] md:w-[300px] h-[520px] md:h-[600px] bg-foreground rounded-[3rem] p-3 shadow-2xl\">\n <div className=\"absolute top-6 left-1/2 -translate-x-1/2 w-20 h-6 bg-foreground rounded-full z-10\" />\n <div className=\"w-full h-full bg-muted rounded-[2.5rem] overflow-hidden\">\n <img\n src=\"/images/placeholder.png\"\n alt=\"App Preview\"\n className=\"w-full h-full object-cover\"\n onError={(e) => {\n e.currentTarget.src = \"/images/placeholder.png\";\n }}\n />\n </div>\n </div>\n {/* Floating elements */}\n <div className=\"hidden sm:block absolute left-0 sm:-left-4 md:-left-8 top-1/4 bg-card rounded-xl p-3 shadow-lg border border-border\">\n <div className=\"flex items-center gap-2\">\n <CheckCircle className=\"h-5 w-5 text-green-500\" />\n <span className=\"text-sm font-medium\">{t(\"taskComplete\")}</span>\n </div>\n </div>\n <div className=\"hidden sm:block absolute right-0 sm:-right-4 md:-right-8 bottom-1/4 bg-card rounded-xl p-3 shadow-lg border border-border\">\n <div className=\"flex items-center gap-2\">\n <Bell className=\"h-5 w-5 text-primary\" />\n <span className=\"text-sm font-medium\">{t(\"newMessage\")}</span>\n </div>\n </div>\n </div>\n </ScaleUp>\n </div>\n </div>\n </section>\n\n {/* Features Section */}\n <section className=\"py-12 md:py-16 bg-muted/30\">\n <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\n <FadeIn className=\"text-center mb-16\">\n <p className=\"text-sm font-medium text-primary mb-2 uppercase tracking-wide\">\n {t(\"featuresLabel\")}\n </p>\n <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mb-4\">\n {t(\"featuresTitle\")}\n </h2>\n </FadeIn>\n\n <StaggerContainer className=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n {features.map((feature, index) => (\n <StaggerItem key={index}>\n <Card className=\"h-full text-center hover:shadow-lg transition-shadow\">\n <CardContent className=\"p-6\">\n <div className=\"w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-4\">\n <feature.icon className=\"h-7 w-7 text-primary\" />\n </div>\n <h3 className=\"text-lg font-semibold text-foreground mb-2\">{feature.title}</h3>\n <p className=\"text-sm text-muted-foreground\">{feature.desc}</p>\n </CardContent>\n </Card>\n </StaggerItem>\n ))}\n </StaggerContainer>\n </div>\n </section>\n\n {/* Screenshots Section */}\n <section className=\"py-12 md:py-16\">\n <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\n <FadeIn className=\"text-center mb-16\">\n <p className=\"text-sm font-medium text-primary mb-2 uppercase tracking-wide\">\n {t(\"screenshotsLabel\")}\n </p>\n <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mb-4\">\n {t(\"screenshotsTitle\")}\n </h2>\n </FadeIn>\n\n <div className=\"flex justify-center gap-6 overflow-x-auto pb-4 snap-x snap-mandatory\">\n {screenshots.map((screenshot, index) => (\n <ScaleUp key={index} delay={index * 0.1} className=\"flex-shrink-0 snap-center\">\n <div className=\"w-[200px] md:w-[240px] h-[400px] md:h-[480px] bg-foreground rounded-[2rem] p-2 shadow-xl\">\n <img\n src={screenshot.src}\n alt={screenshot.alt}\n className=\"w-full h-full object-cover rounded-[1.75rem]\"\n onError={(e) => {\n e.currentTarget.src = \"/images/placeholder.png\";\n }}\n />\n </div>\n </ScaleUp>\n ))}\n </div>\n </div>\n </section>\n\n {/* Reviews Section */}\n <section className=\"py-12 md:py-16 bg-muted/30\">\n <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\n <FadeIn className=\"text-center mb-16\">\n <p className=\"text-sm font-medium text-primary mb-2 uppercase tracking-wide\">\n {t(\"reviewsLabel\")}\n </p>\n <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mb-4\">\n {t(\"reviewsTitle\")}\n </h2>\n </FadeIn>\n\n <StaggerContainer className=\"grid md:grid-cols-3 gap-6 max-w-4xl mx-auto\">\n {reviews.map((review, index) => (\n <StaggerItem key={index}>\n <Card>\n <CardContent className=\"p-6\">\n <div className=\"flex gap-0.5 mb-3\">\n {[...Array(review.rating)].map((_, i) => (\n <Star key={i} className=\"h-4 w-4 fill-yellow-400 text-yellow-400\" />\n ))}\n </div>\n <p className=\"text-foreground mb-4\">\"{review.content}\"</p>\n <div className=\"flex items-center justify-between text-sm\">\n <span className=\"font-medium\">{review.name}</span>\n <span className=\"text-muted-foreground\">{review.date}</span>\n </div>\n </CardContent>\n </Card>\n </StaggerItem>\n ))}\n </StaggerContainer>\n </div>\n </section>\n\n {/* CTA Section */}\n <section className=\"py-12 md:py-16\">\n <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 text-center\">\n <FadeIn>\n <Download className=\"h-16 w-16 text-primary mx-auto mb-6\" />\n <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mb-4\">\n {t(\"ctaTitle\")}\n </h2>\n <p className=\"text-lg text-muted-foreground mb-8 max-w-xl mx-auto\">\n {t(\"ctaDescription\")}\n </p>\n <div className=\"flex flex-col sm:flex-row gap-4 justify-center\">\n <Button asChild size=\"lg\" className=\"text-base\">\n <a href={appStoreUrl}>\n <Download className=\"mr-2 h-5 w-5\" />\n App Store\n </a>\n </Button>\n <Button asChild size=\"lg\" variant=\"outline\" className=\"text-base\">\n <a href={playStoreUrl}>\n <Download className=\"mr-2 h-5 w-5\" />\n Google Play\n </a>\n </Button>\n </div>\n </FadeIn>\n </div>\n </section>\n </div>\n </Layout>\n );\n}\n\nexport default LandingPageApp;\n"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"path": "landing-page-app/lang/en.json",
|
|
29
|
+
"type": "registry:lang",
|
|
30
|
+
"target": "$modules$/landing-page-app/lang/en.json",
|
|
31
|
+
"content": "{\r\n \"title\": \"Mobile App\",\r\n \"badge\": \"Available on iOS & Android\",\r\n \"heroTitle\": \"Your App Name Here\",\r\n \"heroDescription\": \"Ask Promake to customize this description based on your app. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\",\r\n \"downloadOn\": \"Download on the\",\r\n \"getItOn\": \"Get it on\",\r\n \"downloads\": \"Downloads\",\r\n \"inCategory\": \"In Category\",\r\n \"taskComplete\": \"Task Complete!\",\r\n \"newMessage\": \"New Message\",\r\n \"featuresLabel\": \"Features\",\r\n \"featuresTitle\": \"Why You'll Love It\",\r\n \"feature1Title\": \"Feature One\",\r\n \"feature1Desc\": \"Ask Promake to customize this feature description.\",\r\n \"feature2Title\": \"Feature Two\",\r\n \"feature2Desc\": \"Ask Promake to customize this feature description.\",\r\n \"feature3Title\": \"Feature Three\",\r\n \"feature3Desc\": \"Ask Promake to customize this feature description.\",\r\n \"feature4Title\": \"Feature Four\",\r\n \"feature4Desc\": \"Ask Promake to customize this feature description.\",\r\n \"screenshotsLabel\": \"Screenshots\",\r\n \"screenshotsTitle\": \"See It in Action\",\r\n \"reviewsLabel\": \"Reviews\",\r\n \"reviewsTitle\": \"What Users Say\",\r\n \"review1\": \"Ask Promake to add real user reviews here. Lorem ipsum dolor sit amet.\",\r\n \"review2\": \"Ask Promake to add real user reviews here. Consectetur adipiscing elit.\",\r\n \"review3\": \"Ask Promake to add real user reviews here. Sed do eiusmod tempor.\",\r\n \"ctaTitle\": \"Download Now\",\r\n \"ctaDescription\": \"Ask Promake to customize this CTA description. Available for free on iOS and Android.\"\r\n}\r\n"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"path": "landing-page-app/lang/tr.json",
|
|
35
|
+
"type": "registry:lang",
|
|
36
|
+
"target": "$modules$/landing-page-app/lang/tr.json",
|
|
37
|
+
"content": "{\r\n \"title\": \"Mobil Uygulama\",\r\n \"badge\": \"iOS ve Android'de Mevcut\",\r\n \"heroTitle\": \"Hayatınız, Tek Uygulamada Basitleştirildi\",\r\n \"heroDescription\": \"Mobil verimliliğin geleceğini deneyimleyin. Şimdi indirin ve milyonlarca mutlu kullanıcıya katılın.\",\r\n \"downloadOn\": \"Şuradan indir:\",\r\n \"getItOn\": \"Şuradan alın:\",\r\n \"downloads\": \"İndirme\",\r\n \"inCategory\": \"Kategorisinde\",\r\n \"taskComplete\": \"Görev Tamamlandı!\",\r\n \"newMessage\": \"Yeni Mesaj\",\r\n \"featuresLabel\": \"Özellikler\",\r\n \"featuresTitle\": \"Neden Seveceksiniz\",\r\n \"feature1Title\": \"Işık Hızında\",\r\n \"feature1Desc\": \"Anında yükleme ve akıcı animasyonlar\",\r\n \"feature2Title\": \"Akıllı Bildirimler\",\r\n \"feature2Desc\": \"Akıllı uyarılarla güncel kalın\",\r\n \"feature3Title\": \"Güvenli & Özel\",\r\n \"feature3Desc\": \"Verileriniz şifreli ve korumalı\",\r\n \"feature4Title\": \"Çevrimdışı Mod\",\r\n \"feature4Desc\": \"İnternet olmadan da çalışır\",\r\n \"screenshotsLabel\": \"Ekran Görüntüleri\",\r\n \"screenshotsTitle\": \"Uygulamada Görün\",\r\n \"reviewsLabel\": \"Yorumlar\",\r\n \"reviewsTitle\": \"Kullanıcılar Ne Diyor\",\r\n \"review1\": \"Kullandığım en iyi uygulama!\",\r\n \"review2\": \"Verimliliğim için oyun değiştirici\",\r\n \"review3\": \"Basit, güzel ve etkili\",\r\n \"ctaTitle\": \"Şimdi İndirin\",\r\n \"ctaDescription\": \"iOS ve Android'de ücretsiz olarak mevcut. Yolculuğunuza bugün başlayın.\"\r\n}\r\n"
|
|
38
|
+
}
|
|
39
|
+
],
|
|
40
|
+
"exports": {
|
|
41
|
+
"types": [],
|
|
42
|
+
"variables": [
|
|
43
|
+
"LandingPageApp",
|
|
44
|
+
"default"
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
}
|