array:4 [ "data" => array:2 [ "component" => App\Models\Component\Component {#2024 #connection: "mysql" #table: "components" #primaryKey: "id" #keyType: "int" +incrementing: true #with: [] #withCount: [] +preventsLazyLoading: false #perPage: 15 +exists: true +wasRecentlyCreated: false #escapeWhenCastingToString: false #attributes: array:10 [ "id" => "019b5fcc-5d74-72a5-a3df-ab39069d1c1b" "category_id" => "019b5fb1-d95e-732f-a6d0-a4d9d40e7599" "title" => "Card Component 1" "slug" => "card-component-1" "status" => "published" "is_featured" => 0 "bg_color" => "#000000" "view_count" => 41 "favorite_count" => 1 "copy_count" => 0 ] #original: array:10 [ "id" => "019b5fcc-5d74-72a5-a3df-ab39069d1c1b" "category_id" => "019b5fb1-d95e-732f-a6d0-a4d9d40e7599" "title" => "Card Component 1" "slug" => "card-component-1" "status" => "published" "is_featured" => 0 "bg_color" => "#000000" "view_count" => 41 "favorite_count" => 1 "copy_count" => 0 ] #changes: [] #previous: [] #casts: array:2 [ "status" => "App\Enums\ComponentStatus" "is_featured" => "boolean" ] #classCastCache: [] #attributeCastCache: [] #dateFormat: null #appends: [] #dispatchesEvents: [] #observables: [] #relations: array:2 [ "category" => App\Models\Component\ComponentCategory {#2041 #connection: "mysql" #table: "component_categories" #primaryKey: "id" #keyType: "int" +incrementing: true #with: [] #withCount: [] +preventsLazyLoading: false #perPage: 15 +exists: true +wasRecentlyCreated: false #escapeWhenCastingToString: false #attributes: array:2 [ "id" => "019b5fb1-d95e-732f-a6d0-a4d9d40e7599" "name" => "Card" ] #original: array:2 [ "id" => "019b5fb1-d95e-732f-a6d0-a4d9d40e7599" "name" => "Card" ] #changes: [] #previous: [] #casts: [] #classCastCache: [] #attributeCastCache: [] #dateFormat: null #appends: [] #dispatchesEvents: [] #observables: [] #relations: [] #touches: [] #relationAutoloadCallback: null #relationAutoloadContext: null +timestamps: true +usesUniqueIds: true #hidden: [] #visible: [] #fillable: [] #guarded: array:1 [ 0 => "id" ] } "variants" => Illuminate\Database\Eloquent\Collection {#2437 #items: array:1 [ 0 => App\Models\Component\ComponentVariant {#2434 #connection: "mysql" #table: "component_variants" #primaryKey: "id" #keyType: "int" +incrementing: true #with: [] #withCount: [] +preventsLazyLoading: false #perPage: 15 +exists: true +wasRecentlyCreated: false #escapeWhenCastingToString: false #attributes: array:3 [ "id" => "019e9bbc-335a-72db-a6ba-f3f6cd655aed" "component_id" => "019b5fcc-5d74-72a5-a3df-ab39069d1c1b" "type" => "native" ] #original: array:3 [ "id" => "019e9bbc-335a-72db-a6ba-f3f6cd655aed" "component_id" => "019b5fcc-5d74-72a5-a3df-ab39069d1c1b" "type" => "native" ] #changes: [] #previous: [] #casts: array:2 [ "type" => "App\Enums\ComponentVariantType" "is_default" => "boolean" ] #classCastCache: [] #attributeCastCache: [] #dateFormat: null #appends: [] #dispatchesEvents: [] #observables: [] #relations: array:1 [ "codes" => Illuminate\Database\Eloquent\Collection {#2671 #items: array:2 [ 0 => App\Models\Component\ComponentCode {#2670 #connection: "mysql" #table: "component_codes" #primaryKey: "id" #keyType: "int" +incrementing: true #with: [] #withCount: [] +preventsLazyLoading: false #perPage: 15 +exists: true +wasRecentlyCreated: false #escapeWhenCastingToString: false #attributes: array:7 [ "id" => "019b5fcc-5d7b-708f-b8c7-1f33837c225b" "component_variant_id" => "019e9bbc-335a-72db-a6ba-f3f6cd655aed" "code" => """ \n

\n \n

CSS Gradient Button

Praashoo7

\n 22\n

\n 12\n

\n 332\n

""" "type" => "html" "copy_count" => 0 "created_at" => "2025-12-27 12:33:07" "updated_at" => "2026-06-06 07:01:02" ] #original: array:7 [ "id" => "019b5fcc-5d7b-708f-b8c7-1f33837c225b" "component_variant_id" => "019e9bbc-335a-72db-a6ba-f3f6cd655aed" "code" => """ \n

\n \n

CSS Gradient Button

Praashoo7

\n 22\n

\n 12\n

\n 332\n

""" "type" => "html" "copy_count" => 0 "created_at" => "2025-12-27 12:33:07" "updated_at" => "2026-06-06 07:01:02" ] #changes: [] #previous: [] #casts: array:1 [ "type" => "App\Enums\CodeType" ] #classCastCache: [] #attributeCastCache: [] #dateFormat: null #appends: [] #dispatchesEvents: [] #observables: [] #relations: [] #touches: [] #relationAutoloadCallback: null #relationAutoloadContext: null +timestamps: true +usesUniqueIds: true #hidden: [] #visible: [] #fillable: [] #guarded: array:1 [ 0 => "id" ] } 1 => App\Models\Component\ComponentCode {#2644 #connection: "mysql" #table: "component_codes" #primaryKey: "id" #keyType: "int" +incrementing: true #with: [] #withCount: [] +preventsLazyLoading: false #perPage: 15 +exists: true +wasRecentlyCreated: false #escapeWhenCastingToString: false #attributes: array:7 [ "id" => "019b5fcc-5d7e-720b-a801-6b8174a9067f" "component_variant_id" => "019e9bbc-335a-72db-a6ba-f3f6cd655aed" "code" => """ /* From Uiverse.io by Praashoo7 */ \n /* CodePen Card */\n \n .card {\n width: 15em;\n height: 10em;\n background: linear-gradient(270deg, #ce68d9, #45c6db, #45db79);\n background-size: 800% 800%;\n -webkit-animation: AnimationName 3s ease infinite;\n -moz-animation: AnimationName 3s ease infinite;\n animation: AnimationName 3s ease infinite;\n transition: .4s ease-in-out;\n border-radius: 7px;\n cursor: pointer;\n }\n \n .fl {\n display: flex;\n justify-content: flex-end;\n opacity: 0;\n transition: .2s ease-in-out;\n }\n \n .fl:hover .fullscreen {\n scale: 1.2;\n }\n \n .fl:hover .fullscreen_svg {\n fill: white;\n }\n \n .fullscreen {\n width: 1.5em;\n height: 1.5em;\n border-radius: 5px;\n background-color: #727890;\n margin: 1em;\n margin-right: 0.5em;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: .2s ease-in-out;\n box-shadow: 2px 2px 6px rgba(0,0,0,.4);\n }\n \n .fullscreen_svg {\n width: 15px;\n height: 15px;\n fill: rgb(177, 176, 176);\n transition: .2s ease-in-out;\n }\n \n .card_back {\n position: absolute;\n width: 15em;\n height: 13em;\n background-color: rgba(30, 31, 38, 0.575);\n border-radius: 7px;\n margin-top: -4.7em;\n margin-left: 0.7em;\n transition: .2s ease-in-out;\n z-index: -1;\n }\n \n .main:hover .card_back {\n margin-top: -5.9em;\n margin-left: 0em;\n scale: 1.1;\n height: 15.25em;\n cursor: pointer;\n }\n \n .main:hover .fl {\n opacity: 1;\n cursor: pointer;\n margin-right: 0.5em;\n }\n \n .data {\n display: flex;\n flex-direction: row;\n margin-top: 1em;\n }\n \n .img {\n width: 2.25em;\n height: 2.25em;\n background-color: #252525;\n border-radius: 5px;\n overflow: hidden;\n }\n \n .text {\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 0.5em;\n font-family: Montserrat;\n color: white;\n }\n \n .text_m {\n font-weight: bold;\n font-size: 0.9em;\n }\n \n .text_s {\n font-size: 0.7em;\n }\n \n .btns {\n display: flex;\n gap: 0.5em;\n transition: .2s ease-in-out;\n }\n \n .likes {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5em;\n height: 1.4em;\n border-radius: 4px;\n margin-top: -0.5em;\n opacity: 0;\n background-color: #444857;\n transition: .2s ease-in-out;\n }\n \n .likes_text {\n font-family: Montserrat;\n font-size: 0.8em;\n margin-left: 0.25em;\n color: white;\n }\n \n .likes_svg {\n width: 12px;\n height: 12px;\n fill: white;\n }\n \n .likes:hover {\n background-color: #5A5F73;\n cursor: pointer;\n }\n \n .comments {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5em;\n height: 1.4em;\n border-radius: 4px;\n margin-top: -0.5em;\n opacity: 0;\n background-color: #444857;\n transition: .24s ease-in-out;\n }\n \n .comments_text {\n font-family: Montserrat;\n font-size: 0.8em;\n margin-left: 0.25em;\n color: white;\n }\n \n .comments_svg {\n width: 12px;\n height: 12px;\n fill: white;\n }\n \n .comments:hover {\n background-color: #5A5F73;\n cursor: pointer;\n }\n \n .views {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3em;\n height: 1.4em;\n border-radius: 4px;\n margin-top: -0.5em;\n opacity: 0;\n background-color: #444857;\n transition: .28s ease-in-out;\n }\n \n .views_text {\n font-family: Montserrat;\n font-size: 0.8em;\n margin-left: 0.25em;\n color: white;\n }\n \n .views_svg {\n width: 12px;\n height: 12px;\n fill: white;\n }\n \n .views:hover {\n background-color: #5A5F73;\n cursor: pointer;\n }\n \n .main:hover .likes {\n margin-top: 0.5em;\n opacity: 1;\n }\n \n .main:hover .comments {\n margin-top: 0.5em;\n opacity: 1;\n }\n \n .main:hover .views {\n margin-top: 0.5em;\n opacity: 1;\n }\n \n \n \n /* The Main Switch */\n \n .card_content {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n button {\n padding: 0.8em;\n width: 14em;\n border-radius: 10px;\n font-family: Montserrat;\n font-size: 0.8em;\n align-self: center;\n outline: none;\n font-weight: bold;\n border: 1px solid white;\n background-color: transparent;\n color: white;\n transition: .4s ease-in-out;\n }\n \n button::after {\n content: "(Hold Me)";\n opacity: 0;\n position: absolute;\n }\n \n button::before {\n content: "∞";\n font-size: 3.5em;\n position: absolute;\n opacity: 0;\n left: 1.6em;\n top: -0.36em;\n transition: .4s ease-in-out;\n }\n \n button:hover {\n cursor: pointer;\n color: black;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 15px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(5px);\n -webkit-backdrop-filter: blur(5px);\n border: 1px solid rgba(255, 255, 255, 0.3);\n }\n \n button:hover::after {\n position: relative;\n opacity: 1;\n font-size: 0.7em;\n }\n \n @keyframes AnimationName {\n 0% {\n background-position: 0% 50%\n }\n \n 50% {\n background-position: 100% 50%\n }\n \n 100% {\n background-position: 0% 50%\n }\n }\n \n button:active {\n scale: 1.1;\n opacity: 1;\n color: transparent;\n background: linear-gradient(90deg, #ce68d9, #45c6db, #45db79, #9f45b0, #e54ed0, #ffe4f2);\n background-size: 800% 800%;\n -webkit-animation: AnimationName 1s ease infinite;\n -moz-animation: AnimationName 1s ease infinite;\n animation: AnimationName 1s ease infinite;\n }\n \n button:active::before {\n color: white;\n opacity: 1;\n } """ "type" => "css" "copy_count" => 0 "created_at" => "2025-12-27 12:33:07" "updated_at" => "2026-06-06 07:01:02" ] #original: array:7 [ "id" => "019b5fcc-5d7e-720b-a801-6b8174a9067f" "component_variant_id" => "019e9bbc-335a-72db-a6ba-f3f6cd655aed" "code" => """ /* From Uiverse.io by Praashoo7 */ \n /* CodePen Card */\n \n .card {\n width: 15em;\n height: 10em;\n background: linear-gradient(270deg, #ce68d9, #45c6db, #45db79);\n background-size: 800% 800%;\n -webkit-animation: AnimationName 3s ease infinite;\n -moz-animation: AnimationName 3s ease infinite;\n animation: AnimationName 3s ease infinite;\n transition: .4s ease-in-out;\n border-radius: 7px;\n cursor: pointer;\n }\n \n .fl {\n display: flex;\n justify-content: flex-end;\n opacity: 0;\n transition: .2s ease-in-out;\n }\n \n .fl:hover .fullscreen {\n scale: 1.2;\n }\n \n .fl:hover .fullscreen_svg {\n fill: white;\n }\n \n .fullscreen {\n width: 1.5em;\n height: 1.5em;\n border-radius: 5px;\n background-color: #727890;\n margin: 1em;\n margin-right: 0.5em;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: .2s ease-in-out;\n box-shadow: 2px 2px 6px rgba(0,0,0,.4);\n }\n \n .fullscreen_svg {\n width: 15px;\n height: 15px;\n fill: rgb(177, 176, 176);\n transition: .2s ease-in-out;\n }\n \n .card_back {\n position: absolute;\n width: 15em;\n height: 13em;\n background-color: rgba(30, 31, 38, 0.575);\n border-radius: 7px;\n margin-top: -4.7em;\n margin-left: 0.7em;\n transition: .2s ease-in-out;\n z-index: -1;\n }\n \n .main:hover .card_back {\n margin-top: -5.9em;\n margin-left: 0em;\n scale: 1.1;\n height: 15.25em;\n cursor: pointer;\n }\n \n .main:hover .fl {\n opacity: 1;\n cursor: pointer;\n margin-right: 0.5em;\n }\n \n .data {\n display: flex;\n flex-direction: row;\n margin-top: 1em;\n }\n \n .img {\n width: 2.25em;\n height: 2.25em;\n background-color: #252525;\n border-radius: 5px;\n overflow: hidden;\n }\n \n .text {\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 0.5em;\n font-family: Montserrat;\n color: white;\n }\n \n .text_m {\n font-weight: bold;\n font-size: 0.9em;\n }\n \n .text_s {\n font-size: 0.7em;\n }\n \n .btns {\n display: flex;\n gap: 0.5em;\n transition: .2s ease-in-out;\n }\n \n .likes {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5em;\n height: 1.4em;\n border-radius: 4px;\n margin-top: -0.5em;\n opacity: 0;\n background-color: #444857;\n transition: .2s ease-in-out;\n }\n \n .likes_text {\n font-family: Montserrat;\n font-size: 0.8em;\n margin-left: 0.25em;\n color: white;\n }\n \n .likes_svg {\n width: 12px;\n height: 12px;\n fill: white;\n }\n \n .likes:hover {\n background-color: #5A5F73;\n cursor: pointer;\n }\n \n .comments {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5em;\n height: 1.4em;\n border-radius: 4px;\n margin-top: -0.5em;\n opacity: 0;\n background-color: #444857;\n transition: .24s ease-in-out;\n }\n \n .comments_text {\n font-family: Montserrat;\n font-size: 0.8em;\n margin-left: 0.25em;\n color: white;\n }\n \n .comments_svg {\n width: 12px;\n height: 12px;\n fill: white;\n }\n \n .comments:hover {\n background-color: #5A5F73;\n cursor: pointer;\n }\n \n .views {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3em;\n height: 1.4em;\n border-radius: 4px;\n margin-top: -0.5em;\n opacity: 0;\n background-color: #444857;\n transition: .28s ease-in-out;\n }\n \n .views_text {\n font-family: Montserrat;\n font-size: 0.8em;\n margin-left: 0.25em;\n color: white;\n }\n \n .views_svg {\n width: 12px;\n height: 12px;\n fill: white;\n }\n \n .views:hover {\n background-color: #5A5F73;\n cursor: pointer;\n }\n \n .main:hover .likes {\n margin-top: 0.5em;\n opacity: 1;\n }\n \n .main:hover .comments {\n margin-top: 0.5em;\n opacity: 1;\n }\n \n .main:hover .views {\n margin-top: 0.5em;\n opacity: 1;\n }\n \n \n \n /* The Main Switch */\n \n .card_content {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n button {\n padding: 0.8em;\n width: 14em;\n border-radius: 10px;\n font-family: Montserrat;\n font-size: 0.8em;\n align-self: center;\n outline: none;\n font-weight: bold;\n border: 1px solid white;\n background-color: transparent;\n color: white;\n transition: .4s ease-in-out;\n }\n \n button::after {\n content: "(Hold Me)";\n opacity: 0;\n position: absolute;\n }\n \n button::before {\n content: "∞";\n font-size: 3.5em;\n position: absolute;\n opacity: 0;\n left: 1.6em;\n top: -0.36em;\n transition: .4s ease-in-out;\n }\n \n button:hover {\n cursor: pointer;\n color: black;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 15px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(5px);\n -webkit-backdrop-filter: blur(5px);\n border: 1px solid rgba(255, 255, 255, 0.3);\n }\n \n button:hover::after {\n position: relative;\n opacity: 1;\n font-size: 0.7em;\n }\n \n @keyframes AnimationName {\n 0% {\n background-position: 0% 50%\n }\n \n 50% {\n background-position: 100% 50%\n }\n \n 100% {\n background-position: 0% 50%\n }\n }\n \n button:active {\n scale: 1.1;\n opacity: 1;\n color: transparent;\n background: linear-gradient(90deg, #ce68d9, #45c6db, #45db79, #9f45b0, #e54ed0, #ffe4f2);\n background-size: 800% 800%;\n -webkit-animation: AnimationName 1s ease infinite;\n -moz-animation: AnimationName 1s ease infinite;\n animation: AnimationName 1s ease infinite;\n }\n \n button:active::before {\n color: white;\n opacity: 1;\n } """ "type" => "css" "copy_count" => 0 "created_at" => "2025-12-27 12:33:07" "updated_at" => "2026-06-06 07:01:02" ] #changes: [] #previous: [] #casts: array:1 [ "type" => "App\Enums\CodeType" ] #classCastCache: [] #attributeCastCache: [] #dateFormat: null #appends: [] #dispatchesEvents: [] #observables: [] #relations: [] #touches: [] #relationAutoloadCallback: null #relationAutoloadContext: null +timestamps: true +usesUniqueIds: true #hidden: [] #visible: [] #fillable: [] #guarded: array:1 [ 0 => "id" ] } ] #escapeWhenCastingToString: false } ] #touches: [] #relationAutoloadCallback: null #relationAutoloadContext: null +timestamps: true +usesUniqueIds: true #hidden: [] #visible: [] #fillable: [] #guarded: array:1 [ 0 => "id" ] } ] #escapeWhenCastingToString: false } ] #touches: [] #relationAutoloadCallback: null #relationAutoloadContext: null +timestamps: true +usesUniqueIds: true #hidden: [] #visible: [] #fillable: [] #guarded: array:1 [ 0 => "id" ] } "sandboxHtml" => """ \n \n \n \n \n \n \n \n \n \n

\n \n

CSS Gradient Button

Praashoo7

\n 22\n

\n 12\n

\n 332\n

\n \n \n """ ] "name" => "components.component-card" "component" => "App\Livewire\Components\ComponentCard" "id" => "ksQfTycELBPANDMbRl4E" ]